CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Chuck Le Butt
Chuck Le Butt

Reputation: 48758

Changing minDate and maxDate on the fly using jQuery DatePicker

I'm having a particular issue with the jQuery Datepicker. I can easily add a date range, but I want the selectable range to change depending on the event the user has picked.

So if they pick event #1, they can only pick dates from event #1's date range.

I've written a simple little function that gets called whenever the user selects a new event, but it only ever shows the initially set minDate/maxDate values.

function datepicker(startDate, endDate) {
  $( "#date" ).datepicker({
    inline: true,
    minDate: new Date(startDate),
    maxDate: new Date(endDate),
    dateFormat: 'dd/mm/yy' 
  });
}

I've tried calling $('#date').datepicker('remove'); before calling the above function again, to see if it creates a new instance with the correct dates, but it doesn't seem to work.

I've checked all the data through developer tools and everything is being called and passed correctly. Is there anything I can do to make this work how I want it to?

Upvotes: 31

Views: 125969

Answers (5)

Mustufa
Mustufa

Reputation: 131

I have changed min date property of date time picker by using this

$('#date').data("DateTimePicker").minDate(startDate);

I hope this one help to someone !

Upvotes: 1

Matias Seguel
Matias Seguel

Reputation: 828

I know you are using Datepicker, but for some people who are just using HTML5 input date like me, there is an example how you can do the same: JSFiddle Link

$('#start_date').change(function(){
  var start_date = $(this).val();
  $('#end_date').prop({
    min: start_date
  });
});


/*  prop() method works since jquery 1.6, if you are using a previus version, you can use attr() method.*/

Upvotes: 0

Jared
Jared

Reputation: 6060

You have a couple of options...

1) You need to call the destroy() method not remove() so...

$('#date').datepicker('destroy');

Then call your method to recreate the datepicker object.

2) You can update the property of the existing object via

$('#date').datepicker('option', 'minDate', new Date(startDate));
$('#date').datepicker('option', 'maxDate', new Date(endDate));

or...

$('#date').datepicker('option', { minDate: new Date(startDate),
                                  maxDate: new Date(endDate) });

Upvotes: 74

greg
greg

Reputation: 117

$(document).ready(function() {
$("#aDateFrom").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var minDate = $('#aDateFrom').datepicker('getDate');
        $("#aDateTo").datepicker("change", { minDate: minDate });
    }
});

$("#aDateTo").datepicker({
    onSelect: function() {
        //- get date from another datepicker without language dependencies
        var maxDate = $('#aDateTo').datepicker('getDate');
        $("#aDateFrom").datepicker("change", { maxDate: maxDate });
    }
});
});

Upvotes: 6

MattC
MattC

Reputation: 6324

For from / to date, here is how I implemented restricting the dates based on the date entered in the other datepicker. Works pretty good:

function activateDatePickers() {
    $("#aDateFrom").datepicker({
        onClose: function() {
            $("#aDateTo").datepicker(
                    "change",
                    { minDate: new Date($('#aDateFrom').val()) }
            );
        }
    });
    $("#aDateTo").datepicker({
        onClose: function() {
            $("#aDateFrom").datepicker(
                    "change",
                    { maxDate: new Date($('#aDateTo').val()) }
            );
        }
    });
}

Upvotes: 10

Related Questions