jQuery DatePicker Min Max dates

Question

I have the jQuery date picker setup and working but would like help with setting the minDate and maxDate options. My current code is below (without these options). How can I set the minDate as 3 months before the defaultDate, and maxDate as 28days after the defaultDate?

var expdisp = $("#expdisp").attr("value");

$("#expirydate" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "dd/mm/yy",
    defaultDate: expdisp,
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,
});

Muhammad Hani · Accepted Answer · 2013-02-01T12:46:25.883

17

$(function() {

    $( "#datepicker" ).datepicker({ 
        changeYear: true,
        minDate: '-3M',
        maxDate: '+28D',
    });
});

JSFiddle Demo

UPDATE

You can calculate tour max and min valid dates from the default date, then assign it to the date picker.

var expdisp = $("#expdisp").attr("value");

$("#expirydate" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "dd/mm/yy",
    defaultDate: expdisp,
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,

    minDate: '-3M',
    maxDate: '+28D',
});

Update Demo

edited Feb 01 '13 at 12:46

answered Feb 01 '13 at 12:17

Muhammad Hani

8,476
5
29
44

1

This is calculated from 'today' and not what is set in the 'defaultDate' – Rob Feb 01 '13 at 12:19
Thanks for this, it's still calculating the min/max from today. I've sorted it now though - I'm calculating the values in PHP and then just passing them when initiating the datePicker. – Rob Feb 01 '13 at 13:07
@Rob - because I set the default value as Today in demo. Glad to help :), please upvote and accept answer if you find it helpful. – Muhammad Hani Feb 01 '13 at 13:09
I accepted the answer, although try changing the default value in the demo and you'll see it still calculates from today. – Rob Feb 01 '13 at 13:20

score 2 · Answer 2 · answered Nov 17 '14 at 17:08

maxDate :- Sets the maximum date that can be selected. Accepts a date object or a relative number. For example: +7, or a string such as +6m.

minDate :- Sets the minimum date that can be selected. Accepts a number, date object, or string.

$(document).ready(function() {
  $("#date").datepicker({
      minDate: -3,
      maxDate: "1w"
  });

});

Refer:-set Minimum and maximum date to jquery datepicker

score 0 · Answer 3 · answered Feb 01 '13 at 12:16

0

Your could try:

var expdisp = $("#expdisp").attr("value");

$("#expirydate" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: "dd/mm/yy",
    defaultDate: expdisp,
    showOtherMonths: true,
    selectOtherMonths: true,
    changeMonth: true,
    changeYear: true,

    minDate: -3M,
    maxDate: +28D
});

answered Feb 01 '13 at 12:16

SteveW

386
1
5

I did try this but the values are calculated from 'today' and not whatever is in 'defaultDate' – Rob Feb 01 '13 at 12:17
Ooppps. How about this: http://stackoverflow.com/questions/7395771/jquery-ui-datepicker-maxdate Just pass your date to the function and use it in var maxDate = new Date(defaultDate); – SteveW Feb 01 '13 at 12:24

score 0 · Answer 4 · answered Oct 19 '16 at 20:37

You can also use specific date ranges. I added a min beginning date with a +14D max. You just need to remember to stay consistent with your date format and use "/" instead of "-" between MM/DD/YYYY.

$('#Date').datepicker({
  changeMonth: true,
  minDate: '10/19/2016',
  maxDate: '+14D',
});

score 0 · Answer 5 · edited May 14 '18 at 09:04

0

$(document).ready(function () {
    $('input[id$=tbDate]').datepicker({   
        dateFormat: 'dd-mm-yy',
         minDate: '-0D',
         maxDate: '+28D',
    });
});

edited May 14 '18 at 09:04

Govind Samrow

9,981
13
53
90

answered May 14 '18 at 08:35

Vinesh Winslet

1
1

score 0 · Answer 6 · answered Jun 15 '20 at 16:47

var startDate = new Date(); // Now
var endDate = new Date();
endDate.setDate(startDate.getDate() + 30); // Set now + 30 days as the new date
$('#myDatePicker').datepicker('setEndDate', endDate);//1st set  end date
$('#myDatePicker').datepicker('setStartDate', startDate);//

jQuery DatePicker Min Max dates

6 Answers6

Linked