jQuery DatePicker restrict dates

Question

I am trying to restrict jquery datepicker values. So the the from date can not exceed the to date and vice versa.

I've tried multiple instances of this but can not seem to get it to work. Is it because I am using the UK date format?

    $(".datepicker").datepicker({
      dateFormat: 'dd-mm-yy'
    });

    $('#from_date').datepicker({
        onSelect: function(dateStr) {
            var min = $(this).datepicker('getDate') || new Date(); // Selected date or today if none
            var max = new Date(min.getTime());
            max.setMonth(max.getDay() + 1); // Add one month
            $('#to_date').datepicker('option', {minDate: min, maxDate: max});
        }
    });
    $('#to_date').datepicker({
        onSelect: function(dateStr) {
            var max = $(this).datepicker('getDate'); // Selected date or null if none
            $('#from_date').datepicker('option', {maxDate: max});
        }
    });

As i'm new to JavaScript i'm keen to know exactly why my code doesn't work, so i can learn from this.

what you want to do is given as an example in the api documents jqueryui.com/datepicker/#date-range — andrew
– andrew, Commented Jun 13, 2016 at 11:37

Varun · Accepted Answer · 2016-06-14 09:38:45Z

1

You cannot initialize date picker on same element twice. First, you called the date picker on element with its class; then with its ID.

Try to move the date format to date picker default function.

  $.datepicker.setDefaults({
            dateFormat: 'dd-mm-yy'
        });

Or, you need to set dateFormat every time you initialize a date picker element.

edited Jun 14, 2016 at 9:38

answered Jun 13, 2016 at 13:06

Varun

2411 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery DatePicker restrict dates

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related