DatePicker value() returns null after min() is set and min date is selected

11 posts, 1 answers
  1. Jose
    Jose avatar
    49 posts
    Member since:
    Aug 2008

    Posted 13 Jun 2012 Link to this post

    Hi guys.
    I started having issues with date pickers today.

    In Javascript I set the min date of a date picker to today and the value for tomorrow,

    var today = new Date();
    var tomorrow = new Date();
    tomorrow.setDate(today.getDate() + 1);
     
    $("#start_date").data("kendoDatePicker").min(today);
    $("#start_date").data("kendoDatePicker").value(tomorrow);

    This works fine. However, when I select today's date and I do:

    var d = $("#start_date").data("kendoDatePicker").value();

    d is set to null (or undefined depending on the browser).

    Is this a bug? How do I make it work correctly?

    Thanks.
    Jose
  2. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2890 posts

    Posted 18 Jun 2012 Link to this post

    Hello Jose,

    The issue you are experiencing is caused by the fact that the variable today = new Date() contains information not only about the current date, but also the current time. The datePicker the compares date objects and as a result the date selected by mouse click is not greater or equal to the min value.

    Nevertheless this behaviour is not intuitive, so we will address it as a problem and it will be fixed as soon as possible. As a small sign of our appreciation for your feedback I updated your Telerik points.

    Meanwhile, as a workaround you can set the min/max values in the following way:
    var today = new Date("06/18/2012");
    datePicker.min(today);

    For convenience I made a small example that uses this approach in action. I hope this helps.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Adrian
    Adrian avatar
    7 posts
    Member since:
    Apr 2017

    Posted 06 Dec 2017 Link to this post

    It's almost 2018, issue still persists. 

     

     

        
  4. Adrian
    Adrian avatar
    7 posts
    Member since:
    Apr 2017

    Posted 06 Dec 2017 Link to this post

    Couldn't edit my post after accidentally posting it.

    var elmToDate = $("#ToDate").data("kendoDatePicker");
    var elmFromDate = $("#FromDate").data("kendoDatePicker");
    elmToDate.max(new Date());
    elmFromDate.max(new Date(new Date().setMonth(new Date().getMonth() - 1)));

     

    Both values return null when using .value();

    Was this issue ever fixed?

  5. Stefan
    Admin
    Stefan avatar
    1936 posts

    Posted 11 Dec 2017 Link to this post

    Hello, Adrian,

    Thank you for providing the code.

    After using it to make two datePickers, and selecting the corresponding max dates, the value method is returning the current date on my end.

    Please check the example and advise if I missed an important detail:

    https://dojo.telerik.com/IdoWO


    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Adrian
    Adrian avatar
    7 posts
    Member since:
    Apr 2017

    Posted 21 Dec 2017 in reply to Stefan Link to this post

    Possibly. I am creating the controls using Razor (C#) and using Javascript to modify the values dynamically depending on the content. I suspect the issue could be the way I create the controls.
  7. Preslav
    Admin
    Preslav avatar
    443 posts

    Posted 21 Dec 2017 Link to this post

    Hello Adrian,

    I used the same code in an MVC project and it works as expected on my side. The code is:

    @{
        ViewBag.Title = "Home Page";
    }
    @(Html.Kendo().Button()
        .Name("button")
        .Content("Check")
        .Events(e=>e.Click("checkValue"))
    )
    <br /><br />
    @(Html.Kendo().DatePicker()
        .Name("ToDate")
    )
    <br /><br />
    @(Html.Kendo().DatePicker()
        .Name("FromDate")
    )
    <script>
        $(document).ready(function () {
            var elmToDate = $("#ToDate").data("kendoDatePicker");
            var elmFromDate = $("#FromDate").data("kendoDatePicker");
            elmToDate.max(new Date());
            elmFromDate.max(new Date(new Date().setMonth(new Date().getMonth() - 1)));
        });
     
        function checkValue() {
            var elmToDate = $("#ToDate").data("kendoDatePicker");
            var elmFromDate = $("#FromDate").data("kendoDatePicker");
     
            console.log(elmToDate.value())
            console.log(elmFromDate.value())
        };
    </script>

    I hope the above could help as a reference.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Chris
    Chris avatar
    92 posts
    Member since:
    Oct 2015

    Posted 05 Jun in reply to Preslav Link to this post

    HI

    In dojo sample, min Date but still return null : 

          elmFromDate.min(new Date(1, 0, 1, 0, 0, 0));

    BUG ?

    Best regards

    Chris

     

     

     

  9. Preslav
    Admin
    Preslav avatar
    443 posts

    Posted 07 Jun Link to this post

    Hello Chris,

    I added the code to the Dojo, and it seems the value is displayed okay:
    Could you please elaborate on what am I missing?

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Chris
    Chris avatar
    92 posts
    Member since:
    Oct 2015

    Posted 10 Jun in reply to Preslav Link to this post

    No, Your should not input "1/1/1901", it is the default min date of DatePicker/DateTimePicker.

    min(new Date(1, 0, 1, 0, 0, 0)) means 1/1/0001 (day/month/year),
    but if you input "1/1/1" will return null even if min() previous set.

    Best regards

    Chris

     

     

  11. Preslav
    Admin
    Preslav avatar
    443 posts

    Posted 12 Jun Link to this post

    Hi Chris,

    Generally speaking, the "new Date(1, 0, 1, 0, 0, 0)" creates the following date object - "Tue Jan 01 1901 00:00:00 GMT+0200 (FLE Standard Time)". This JavaScript behavior is explained in the following MDN article:
    In order to create and get dates between the years 0 and 99 the Date.prototype.setFullYear() and Date.prototype.getFullYear() methods should be used. This is also demonstrated in the above article.

    For example, check this Dojo:

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top