CODEWITHSUNDEEP
jqueryjquery-ui
Timothy Ruhle
Timothy Ruhle

Reputation: 7597

jQuery UI datepicker date range

I am trying to setup two date pickers like this http://jqueryui.com/demos/datepicker/#date-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/

Upvotes: 3

Views: 10608

Answers (2)

Thilanka De Silva
Thilanka De Silva

Reputation: 1088

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>

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

  1. first idea
    • use the beforeShow instead of onSelect 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.
  2. second idea

Upvotes: 13

Related Questions