Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery datepicker set mindate

I have two jQuery datepickers to select a from and to dates. I have the following code that if you select the 15th June in the first then in the second you now can only select from the 15th onwards.

The issue I have is I really need to set the to datepicker to +1 day. So the user could only select 16th onwards.

My skills are not advanced enough to add the date to the parseDate

    $(function() {
        var dates = $( "#from_date, #to_date" ).datepicker({
        dateFormat: 'dd-mm-yy',
        minDate: 0,
        onSelect: function( selectedDate ) {
            var option = this.id == "from" ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" ),
            date = $.datepicker.parseDate(
            instance.settings.dateFormat ||
            $.datepicker._defaults.dateFormat,
            selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
            }
    });
    }); 
like image 454
Keith Power Avatar asked May 03 '13 22:05

Keith Power


People also ask

How do you set your minDate on datepicker?

To set it after init, use $('#datepicker'). datepicker( "option", "minDate", new Date( 1999, 10 - 1, 25 ) ) .

How can I set my minDate today?

You can specify minDate as today by adding minDate: 0 to the options. Save this answer.

How do I set a minDate in react datepicker?

My code: const DatePickerMod = () => { const [startDate, setStartDate] = useState(null); return ( <DatePicker selected={startDate} onChange={date => setStartDate(date)} minDate={'02-01-2020'} maxDate={'02-29-2020} placeholderText="Select a date in February 2020" /> ); }; javascript.

How can change date format in jQuery ui datepicker?

inside the jQuery script code just paste the code. $( ". selector" ). datepicker({ dateFormat: 'yy-mm-dd' });


1 Answers

To limit one datepicker based on the other, one can set the minDate and maxDate settings to the date selected in the other datepicker etc.

Something like this

$(function() {

     /* global setting */
    var datepickersOpt = {
        dateFormat: 'dd-mm-yy',
        minDate   : 0
    }

    $("#from_date").datepicker($.extend({
        onSelect: function() {
            var minDate = $(this).datepicker('getDate');
            minDate.setDate(minDate.getDate()+2); //add two days
            $("#to_date").datepicker( "option", "minDate", minDate);
        }
    },datepickersOpt));

    $("#to_date").datepicker($.extend({
        onSelect: function() {
            var maxDate = $(this).datepicker('getDate');
            maxDate.setDate(maxDate.getDate()-2);
            $("#from_date").datepicker( "option", "maxDate", maxDate);
        }
    },datepickersOpt));
}); 
like image 110
adeneo Avatar answered Sep 28 '22 19:09

adeneo