html - Jquery datepicker restrict dates in second date field based on selected date in first date field -
i using jquery date picker , have following code when user selects date, field below populated 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 restrict dates in dt2
field should not below date in dt1
field. e.g. if date selected in dt1
01-may-2013
, user allowed pick date after 01-may-2013
, not less 02-may-2013
how can restrict date picking in date field 2?
i created jsfiddle you. i'm not 100% sure if it's "foolproof" prevent users manually typing date set inputs readonly
e.g.
<input type="text" id="dt1" readonly="readonly">
at moment check dt2 onclose , if date below dt1s date correct it. if date selected in dt1 mindate of dt2 set 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 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 prevent user entering date below date of dt1 if (dt2 <= dt1) { var mindate = $('#dt2').datepicker('option', 'mindate'); $('#dt2').datepicker('setdate', mindate); } } }); });
see jsfiddle
Comments
Post a Comment