I am using Jquery date picker and I have the following code where when user selects a date, the field below is populated with date +1
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
$("#dt1").datepicker(
{dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function(date){
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate()+1);
$('#dt2').datepicker('setDate', date2);
I would like to restrict dates in dt2
field which should not be below the date in dt1
field. E.g. If date selected in dt1
is 01-May-2013
, then user is allowed to pick date after 01-May-2013
, not less than 02-May-2013
How can I restrict date picking in date field 2?
I created a jsfiddle for you.
I'm not a 100% sure if it's "foolproof" but to prevent users from manually typing a date you could set the inputs to readonly
e.g.
<input type="text" id="dt1" readonly="readonly">
At the moment I check the dt2 onClose and if its date is below dt1s date I correct it. Also if a date is selected in dt1 the minDate of dt2 is set to dt1 date +1.
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var date2 = $('#dt1').datepicker('getDate');
date2.setDate(date2.getDate() + 1);
$('#dt2').datepicker('setDate', date2);
//sets minDate to dt1 date + 1
$('#dt2').datepicker('option', 'minDate', date2);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy",
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
});
See the jsfiddle
Here's how i do it --
DEMO
And the code is as follows
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function(date){
var date1 = $('#dt1').datepicker('getDate');
var date = new Date( Date.parse( date1 ) );
date.setDate( date.getDate() + 1 );
var newDate = date.toDateString();
newDate = new Date( Date.parse( newDate ) );
$('#dt2').datepicker("option","minDate",newDate);
}
});
i just changed your code, so that min date for date2 set automatically & if date1 is greater than date2, it set date2=date1
$("#dt1").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function (date) {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
if (dt1 > dt2) {
$('#dt2').datepicker('setDate', dt1);
}
$('#dt2').datepicker('option', 'minDate', dt1);
}
});
$('#dt2').datepicker({
dateFormat: "dd/mm/yy",
minDate: $('#dt1').datepicker('getDate'),
onClose: function () {
var dt1 = $('#dt1').datepicker('getDate');
var dt2 = $('#dt2').datepicker('getDate');
//check to prevent a user from entering a date below date of dt1
if (dt2 <= dt1) {
var minDate = $('#dt2').datepicker('option', 'minDate');
$('#dt2').datepicker('setDate', minDate);
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With