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

[Jose]

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

[Alexander Valchev]

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

[Adrian]

It's almost 2018, issue still persists. 

 

 

[Adrian]

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?

[Stefan]

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

[Adrian]

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.

[Preslav]

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

[Chris]

HI

In dojo sample, min Date but still return null : 

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

BUG ?

Best regards

Chris

 

 

 

[Preslav]

Hello Chris,

I added the code to the Dojo, and it seems the value is displayed okay:

• https://www.screencast.com/t/5SOAefLGc3w

Could you please elaborate on what am I missing?

• https://dojo.telerik.com/EVoDUXeD

Regards,
Preslav
Progress Telerik

[Chris]

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

 

 

[Preslav]

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:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

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:

• http://dojo.telerik.com/uqOBapaC

Regards,
Preslav
Progress Telerik