JQuery UI datepicker date range

Question

I am trying to set up two date selections, for example http://jqueryui.com/demos/datepicker/#date-range . But if you manually enter the date in this example, you can break the code. for example, select a date from a date, then the collector stops you from choosing a date to a date, but you can manually enter a date that is earlier.

I installed an example here http://jsfiddle.net/Ruhley/s3h5L/

Answer 1

• first idea
  • beforeShow onSelect, max/min. - , , .
  • , readonly .
• • beforeShow change . (http://jsfiddle.net/s3h5L/4/)

Answer 2

, . ( ). ,

<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>