How to Set minimum and maximum date dynamically in jquery UI date picker

Question

0.00/5 (No votes)

See more:

I have one drop down above my datepicker , based on year selected in this drop down i want to restrict my min date and max date into my next date time picker control

say for example : dropdown i choosed 2013 - 2014 , based on this i am creating logical dates as per my logic , say start date would be

VB

2014-07-23
and end date 2015-07-22

so now my month and year should be between these two dates from date picker

XML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" />
<script>
    var jQuery_1_10_2 = $.noConflict(true);
</script>

lang="cs"> $(function () {
       debugger;
       jQuery_1_10_2("#<%=txtReviewStartDate.ClientID%>").datepicker({
           changeMonth: true,
           changeYear: true,
           showButtonPanel: true,
           minDate: new Date('2014-07-23'),
           maxDate: new Date('2015-07-22'),
           autoclose: true,
           dateFormat: 'MM yy',
           onClose: function (dateText, inst) {
               var month = jQuery_1_10_2("#ui-datepicker-div .ui-datepicker-month :selected").val();
               var year = jQuery_1_10_2("#ui-datepicker-div .ui-datepicker-year :selected").val();
               jQuery_1_10_2(this).datepicker('setDate', new Date(year, month, 1));
               jQuery_1_10_2(this).blur();
           }
       });
   });

this is what i have tried so far , i am using only month and year , there are no dates

Posted 20-May-15 19:59pm

Torakami

Updated 20-May-15 20:05pm

v2

Add a Solution

Comments

Torakami 21-May-15 2:06am

i have update my solution now , but here i think minium is causing an issue , where i just want to restict year selection and not months

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 21-May-15 3:54am

You have already mentioned the minDate and maxDate. So what is the issue?

Torakami 21-May-15 4:38am

I wanted to chenge those dates dynamically

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thanks7872 · Answer 1 · 2015-05-20T20:30:00

Solution 1

You can do it this way : http://api.jqueryui.com/datepicker/#option-yearRange[^]

See this : http://jsfiddle.net/w9fwL/11/[^]

For the case you have mentioned you can set yearRange: "-1". That will provide year selection only for 2014 and 2015.

Regards..

Posted 20-May-15 20:30pm

Thanks7872

v2

Comments

Torakami 21-May-15 3:37am

ok thanks , i have one more problem with this is that , as per ddefault functionality when i select any date , and when i again open date picker for the same , it seelcts the which i have seelcted in that calender ,

here now when i select perticvular month and year combination , but when i again oclick to open the datepicker , it lost what i have choosed into datepicker calendar

Thanks7872 21-May-15 4:52am

Looks like there is an issue with the code you are using in onClose event. I'm not sure.

Torakami 22-May-15 1:25am

yes , seemz to be .. i have almost reached there with poper solution with the help of you guys you have provided by rohan , i will update my comple solution once finished , so if anyone else in trouble will get good example to see

Torakami 22-May-15 3:56am

hey . now check my solution ,

its now complete dynamic and also added complete month list with full names

Torakami · Answer 2 · 2015-05-21T21:54:00

C#

<script type="text/javascript">

    //this function will return month number from month name

    function getMonthNumber(monthName) {
        var monthString = monthName;
        var dat = new Date('1 ' + monthString + ' 1999');
        return dat.getMonth();
    }

    //this function is used to restrict business year timescale
    //as per business year this will set minimum and maximum year range for datepicker

    function yearValues() {
        var years = new Object();

        var startYear = "";
        var endYear = "";

        var value = $("#<%=ddlDataForYear.ClientID%> :selected").text();

        if (value.indexOf('-') == 1) {
            startYear = value;
            endYear = value;
        }
        else {
            var arr = value.split('-');
            startYear = arr[0];
            endYear = arr[1];
        }

        years[0] = startYear;
        years[1] = endYear;

        return years;
    }




    $(document).ready(function () {
        //this is to add complete months name into datepicker box
        var months = ["January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"];
        var uDatepicker = jQuery_1_10_2.datepicker._updateDatepicker;
        jQuery_1_10_2.datepicker._updateDatepicker = function () {
            var ret = uDatepicker.apply(this, arguments);
            var jQuery_1_10_2sel = this.dpDiv.find('select');
            jQuery_1_10_2sel.find('option').each(function (i) {
                jQuery_1_10_2(this).text(months[i]);
            });
            return ret;
        };

        var result = yearValues();
        $('.graphinput').each(function () {
            jQuery_1_10_2(this).datepicker(
                           {
                               dateFormat: 'MM yy',
                               changeMonth: true,
                               changeYear: true,
                               minDate: new Date(result[0], 0, 1),
                               maxDate: new Date(result[1], 11, 31),
                               showButtonPanel: true,
                               onClose: function (dateText, inst) {
                                   function isDonePressed() {
                                       return (jQuery_1_10_2('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                                   }

                                   if (isDonePressed()) {
                                       var month = jQuery_1_10_2("#ui-datepicker-div .ui-datepicker-month :selected").val();
                                       var year = jQuery_1_10_2("#ui-datepicker-div .ui-datepicker-year :selected").val();
                                       jQuery_1_10_2(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
                                       jQuery_1_10_2(this).blur();
                                   }
                               },
                               beforeShow: function (input, inst) {
                                   inst.dpDiv.addClass('month_year_datepicker')
                                   if ((datestr = jQuery_1_10_2(this).val()).length > 0) {
                                       var arr = datestr.split(' ');
                                       month = getMonthNumber(arr[0]) + 1;
                                       year = arr[1];
                                       jQuery_1_10_2(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
                                       jQuery_1_10_2(this).datepicker('setDate', new Date(year, month - 1, 1));
                                       jQuery_1_10_2(".ui-datepicker-calendar").hide();
                                   }
                               }
                           })
        });
    });

</script>