How to set maxDate (jquery-ui datepicker) from a textbox?

Posted on 2014-08-11
Last Modified: 2014-10-28
I have a datepicker (Jquery-UI) that works fine if I set maxDate with literal numbers as in

 $(document).ready(function () {
        $('#<%= SearchToDateTextBox.ClientID %>').datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "mm/dd/yyyy",
                maxDate: new Date(2013, 3, 21)

Open in new window

The information for new Date(2013,3,21) is 04/21/2013 in an textbox on screen and is filled in by an SQL Connection. I want that date to be the maxDate for the datepicker representing the To date: and the defaultDate for the From Date:

I've tried getting values using document.getElementById("ToDate").valueOf directly and also by creating var as intermediate steps.

maxDate is fairly useless to me unless I can control it.

Question by:bob_mechler
    LVL 25

    Expert Comment

    by:Luis Pérez
    So, do you have 2 fields called "ToDate" and "FromDate" in your form? If so, what kind of controls are them and how is the date displayed in them -which format-?
    LVL 30

    Accepted Solution

    You can set the maxDate with whatever you want at any time.
    See the documentation here:
    And the date format should comply to the specified here:

    To get the current date on the datepicker you can use this:

    Author Comment

    The web page produces an RDLC report. The purpose of the From date: and To date: is to pass a date range to the report.

                $(document).ready(function () {
                 $('#<%= SearchToDateTextBox.ClientID %>').datepicker({
                     changeMonth: true,
                     changeYear: true,
                     dateFormat: "mm/dd/yyyy",
                     maxDate: "<%= DefaultToDate%>"

    Open in new window

    '#<%= SearchToDateTextBox.ClientID %>' is the field that the datepicker is supposed to be tied to.
    "<%= DefaultToDate%>" is a date from the code behind that represents the most recent posting date for the users investment account. It first comes into a dataset and then I place it in a protected DateTime variable in the c# code behind.

            protected DateTime DefaultToDate
     DataSet sysDat = ReportsModel.GetSysDat(Convert.ToInt32(Session["SessionID"].ToString()), Session["IPAddress"].ToString());
                DefaultToDate = Convert.ToDateTime(sysDat.Tables["SysDat"].Rows[0][0].ToString());
                SearchToDateTextBox.Text = DefaultToDate.ToString("MM/dd/yyyy");

    Open in new window

    The first line of code creates a protected DateTime variable that is supposed to be available to JavaScript using the notation in the code block before this one.
    The date is then put in the .SearchToDateTextBox.Text .
    The correct date ends up in the textbox properly but the datepicker calendar shows the current date which could be a month apart. It only sync's up if I erase the value in the textbox and type it in again.

    Question: Is my code to set the maxDate correct.
    Question: Is populating the textbox from the code behind the right way to do this.

    Would it be better to set both defaultDate and maxDate to  "<%= DefaultToDate%>" and forget about setting the value in the code behind?

    I want the default value to populate the textbox and show the datepicker set to that date with any date past that date blocked from selection.

    Up till now if I do anything with the defaultDate or the maxDate the datepicker stops dropping down when I click on the field. If I only have
                     changeMonth: true,
                     changeYear: true,
                     dateFormat: "mm/dd/yyyy",
    then the calendar drops down when I click in the To date: field

    I'm thinking I need advice on parsing "<%= DefaultToDate%>"  in the maxDate parameter.



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    This article is for Object-Oriented Programming (OOP) beginners. An Interface contains declarations of events, indexers, methods and/or properties. Any class which implements the Interface should provide the concrete implementation for each Inter…
    Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
    Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
    Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now