how to validate only one years of dates in jQuery datepicker - javascript

I want to validate within one years months and dates, and i created to allow only one year of dates but its not validated.
For example
Im created with in one year, Current date is 7/11/2019, i can allowed to pick date upto 7/11/2020, thats im created working fine.. but if i enter some date in manually its allowed. example: if i enter (type manually) 1/1/2022 its allowed.. i dont want to allow overthan 1 year dates.. how to validate this??
hope my question is understand..
Example Fiddle here..
FIDDLE HERE..
Example code here..
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>

I have change in your code, see below answer.
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
$(document).on( ' input change', '#vochDate', function(){
$('.err').remove();
const nr_years = 1;
var maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + nr_years));
var curDate = $(this).datepicker("getDate");
if (curDate > maxDate) {
//alert("invalid date");
$('#vochDate').after('<span class="err"> Invalid Date </span>');
$(this).datepicker("setDate", new Date());
}
})
});
.err {
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>

Use change event to validate on change. Here you can have a look
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "mm/dd/yy",
maxDate: '1y',
minDate: "-10m"
});
$("#vochDate").change(function(){
if((new Date($("#vochDate").val()).getTime()-new Date().getTime())/(1000*3600*24)>365){
alert("invalid")
//
}
})
});

Related

past dates are not hiding in date picker?

Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..
<!--html:-->
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="FromDate" class="control-label">FromDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="ToDate">ToDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon"> <i class="fa fa-calendar"></i>
</div>
<input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
onchange="report();" />
</div>
</div>
</div>
<!--script:-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Date picker
$('#fromDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#toDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#fromDate').datepicker({ minDate: new Date() });
$('#toDate').datepicker({ minDate: new Date() });
/*]]>*/
</script>
Thanks!!
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Try the above piece of code
I replicated your code and it is working fine.
Can be more clear on the versions and packages you use.
For Datepicker which package you use. I used jquery ui
For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4
http://jsfiddle.net/0oL2yh6r/1/
jQuery(document).ready(function(){
$( "#fromDate" ).datepicker({
minDate: new Date(),
autoclose : true,
todayHighlight : true,
format : 'dd-M-yyyy'
});
});

Enable To Date Only after filling the From Date [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am using bootstrap datepicker and I want to know is there a way to enable To Date Only after filling the From Date.Before that it will be disable. Both javascript or jQuery solutions are welcome.
my html
<div id="div2" style="display: none">
<div class="row m-t-5">
<div class="col-md-8">From Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_from" onblur="checkDate();" name="leave_from" placeholder="dd/mm/yyyy"></div>
</div>
<div class="row m-t-5">
<div class="col-md-8">To Date </div>
<div class="col-md-4"><input type="text" class="form-control datepicker" id="leave_to" onblur="checkDate();" name="leave_to" placeholder="dd/mm/yyyy"></div>
</div>
</div>
<script>
my javascript code
function checkDate(){
var error;
var $validator = $("#myform").validate();
var date1 = document.getElementById('leave_from').value;
var date = date1.substring(0, 2);
var month = date1.substring(3, 5);
var year = date1.substring(6, 10);
var FROM = new Date(year, month - 1, date);
var date2 = document.getElementById('leave_to').value;
var date1 = date2.substring(0, 2);
var month1 = date2.substring(3, 5);
var year1 = date2.substring(6, 10);
var TO = new Date(year1, month1 - 1, date1);
if(FROM > TO)
{
error = {leave_to:"Invalid Date!"};
$validator.showErrors(error);
$('#leave_to').val('');
}
}
Try with,
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("changeDate", function (e) {
$('#datepicker2').prop('disabled',false);
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
Hoe this will help you!! :)
Check this version of the code. Make sure that the first date must be set before heading to the second one. If someone is setting the first date, then the second and then delete the first, the second will also be cleared and disabled again.
$(document).ready(function() {
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
}).on("change", function (e) {
if($('#datepicker1').val() == ""){
$('#datepicker2').prop('disabled',true);
}else{
$('#datepicker2').val('');
$('#datepicker2').prop('disabled',false);
}
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
autoclose: true
});
$('#datepicker2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>

How to calculate two asp text box values using JavaScript and save it on database?

I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Set Current Date as Selected in Bootstrap datepicker

I am using bootstrap-datepicker in my code. How Do I select current date in JavaScript and show it as selected?
After research this is code I am using but current day does not appear as selected:
var today = moment();
datepicker1.datepicker({
endDate: today.toDate()
});
datepicker2.datepicker({
startDate: today .toDate(),
endDate: today.toDate()
});
datepicker1.datepicker('setDate', today.toDate());
datepicker2.datepicker('setDate', today.toDate());
datepicker1.datepicker('update'); //update the bootstrap datepicker
datepicker2.datepicker('update');
Im using bootstrap datepicker. below code worked for me:
$('#my-datepicker').datepicker('setDate', 'now');
No idea about the code you are using and without HTML markup doesn't make much sense,
Here is a working example of what you are after
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
The problem in selecting currentdate when using minDate : moment().
The solution is to use below code for assigning datetimepicker:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});
This works for me
$("#order_date").datepicker( {
autoclose: true,
});
var orderDate = '2021-03-05';
$('#order_date').datepicker('update', new Date(Date.parse(orderDate)));
Reference
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#datepicker1').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker2').datepicker({
format: "mm/dd/yyyy",
todayHighlight: true,
startDate: today,
endDate: end,
autoclose: true
});
$('#datepicker1,#datepicker2').datepicker('setDate', today);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" />
<div class="row">
<div class="col-lg-2">
<div class="panel">
<fieldset>
<div class="form-group">
<label for="datepicker1">Date</label>
<input type="text" class="form-control" id="datepicker1">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="datepicker2">Date2</label>
<input type="text" class="form-control" id="datepicker2">
</div>
</fieldset>
</div>
</div>
</div>
With this you can highlight current date!
$('#datetimepicker6').datetimepicker({
todayHighlight:true
})

validate Date time picker

i need to give user to select a date and a time and get that as an input here i have added the basic code i use and i need to restrict user only to add future date and a time not past dates or time!
$(function () {
var currentDate = new Date();
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'LT'
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Select a date:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker1'>
<input name="datepicker" id="datepicker" type='text' class="form-control" min="2015-01-01" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!--Time picker-->
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px ; font-size:18px">* </a>Select a time:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker2'>
<input name="timepicker" id="timepicker" type='text' class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
my question is i need to allow user only to put future date not past ones!
Restrict the range of selectable dates with the minDate and maxDate options.
$('#datetimepicker1').datepicker({ minDate: 0});
See the official documentation here.
or you can check this example from the documentation bootstrap datetimepicker
$('.starts_on, .ends_on').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
minDate: moment()
});
$('.starts_on').datetimepicker()
.on('dp.change', function(v){
var incrementDay = moment(new Date(v.date));
incrementDay.add(1, 'days');
$('.ends_on').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('.ends_on').datetimepicker()
.on('dp.change', function(v){
var decrementDay = moment(new Date(v.date));
decrementDay.subtract(1, 'days');
$('.starts_on').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
Try this
$("#datetimepicker1").datepicker({
minDate: 1,
onSelect: function(theDate) {
$("#datetimepicker1").datepicker('option', 'minDate', new Date(theDate));
},
dateFormat: 'mm/dd/yy'
});
use minDate: 1, this should allow only future date
$('#datetimepicker1').datetimepicker({
minDate:1,
format: 'DD/MM/YYYY'
});
i got issue solved by this thank you everyone for your help they were very helpful!
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
//minDate:0,
//format: 'DD/MM/YYYY'
format: "MM/DD/YYYY",minDate: new Date()
});

Categories