jQuery UI datepicker date range
I am trying to setup two date pickers like this http://jqueryui.com/demos/datepicker/#dat开发者_C百科e-range. But if you manually type in a date into that example you can break the code. e.g. select a from date, then the picker stops you from selecting a date before the from date, but you can manually type in a to date that is earlier.
I have set up the example here http://jsfiddle.net/Ruhley/s3h5L/
- first idea
- use the
beforeShow
instead ofonSelect
to set the max/min date range. You still can enter manually wrong values, but as soon as you try to open a datepicker it will auto correct itself. - to avoid manual tampering, you can make
readonly
the fields.
- use the
- second idea
- use the
beforeShow
and at the same time do some manual checking at thechange
event of the fields. ( http://jsfiddle.net/s3h5L/4/ )
- use the
this works ok for me but cannot change from date after click once . (by mistake) . i guess in from date picker all dates can be selectable instead of future dates
<script>
$(function() {
var dates = $( "#datepicker1, #datepicker2" ).datepicker({
changeMonth: true, changeYear: true,dateFormat: "yy-mm-dd",
beforeShow: function( ) {
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
var option = this.id == "from" ? "maxDate" : "minDate";
var selectedDate = $(other).datepicker('getDate');
$(this).datepicker( "option", option, selectedDate );
}
}).change(function(){
var other = this.id == "from" ? "#datepicker2" : "#datepicker1";
if ( $('#datepicker1').datepicker('getDate') > $('#datepicker2').datepicker('getDate') )
$(other).datepicker('setDate', $(this).datepicker('getDate') );
});
});
</script>
精彩评论