Setting min date in jQuery datepicker

JqueryJquery UiJquery Ui-Datepicker

Jquery Problem Overview


Hi I want to set min date in my jQuery datepicker to (1999-10-25). So I tried the below code it's not working.

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        inline: true
    });
});

If I change the min year to above 2002 than it will work fine but if I specify min year less than 2002 (like above example 1999), it will show only up to 2002.
I am using jquery-1.7.1.min.js and jquery-ui-1.8.18.custom.min.js.

Jquery Solutions


Solution 1 - Jquery

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
yearRange: '1999:2012',
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        inline: true
    });
});

Just added year range option. It should solve the problem

Solution 2 - Jquery

The problem is that the default option of "yearRange" is 10 years.

So 2012 - 10 = 2002.

So change the yearRange to c-20:c or just 1999 (yearRange: '1999:c'), and use that in combination with restrict dates (mindate, maxdate).

For more info: https://jqueryui.com/demos/datepicker/#option-yearRange


See example: (JSFiddle)

And your code with the addition:

$(function () {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date(1999, 10 - 1, 25),
        maxDate: '+30Y',
        yearRange: '1999:c',
        inline: true
    });
});

Solution 3 - Jquery

Hiya working demo: http://jsfiddle.net/femy8/

Now the calendar will only go to minimum of 1999-10-25.

Click on the image i.e. small icon next to text box for calendar to appear. You can try selecting up until 1999 but the minimum date for selection is 25th of oct 1999. which is what you want.

This will help, have a nice one! :) cheers!

Jquery Code

$(".mypicker").datepicker({
    changeYear: true,
    dateFormat: 'yy-mm-dd',
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        minDate: new Date('1999/10/25'),
        maxDate: '+30Y',
        inline: true
});


ā€‹

Solution 4 - Jquery

Just want to add this for the future programmer.

This code limits the date min and max. The year is fully controlled by getting the current year as max year.

Hope this could help to anyone.

Here's the code.

var dateToday = new Date();
var yrRange = '2014' + ":" + (dateToday.getFullYear());

$(function () {
    $("[id$=txtDate]").datepicker({
        showOn: 'button',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        buttonImageOnly: true,
        yearRange: yrRange,
        buttonImage: 'calendar3.png',
        buttonImageOnly: true,
        minDate: new Date(2014,1-1,1),
        maxDate: '+50Y',
        inline:true
    });
});

Solution 5 - Jquery

Just in case if for example you need to put a min date, the last 3 months and max date next 3 months

$('#id_your_date').datepicker({ 
   maxDate: '+3m',
   minDate: '-3m'
 });

Solution 6 - Jquery

Try like this

<script>

  $(document).ready(function(){
          $("#order_ship_date").datepicker({
           changeMonth:true,
           changeYear:true,           
     		dateFormat:"yy-mm-dd",
			minDate: +2,
        });
  }); 

     
</script>

html code is given below

<input id="order_ship_date"  type="text" class="input" style="width:80px;"  />

Solution 7 - Jquery

basically if you already specify the year range there is no need to use mindate and maxdate if only year is required

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1184777View Question on Stackoverflow
Solution 1 - JqueryGauravView Answer on Stackoverflow
Solution 2 - JqueryMarco JohannesenView Answer on Stackoverflow
Solution 3 - JqueryTats_innitView Answer on Stackoverflow
Solution 4 - JqueryrthonzView Answer on Stackoverflow
Solution 5 - JqueryEzequiel GarcíaView Answer on Stackoverflow
Solution 6 - Jquerykanhaiya kumarView Answer on Stackoverflow
Solution 7 - JqueryRoshanView Answer on Stackoverflow