This is a migrated thread and some comments may be shown as answers.

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

10 Answers 596 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Jose
Top achievements
Rank 2
Jose asked on 13 Jun 2012, 08:00 PM
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

10 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 18 Jun 2012, 01:15 PM
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!
0
Adrian
Top achievements
Rank 1
answered on 06 Dec 2017, 12:11 PM

It's almost 2018, issue still persists. 

 

 

    
0
Adrian
Top achievements
Rank 1
answered on 06 Dec 2017, 12:12 PM

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?

0
Stefan
Telerik team
answered on 11 Dec 2017, 07:47 AM
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.
0
Adrian
Top achievements
Rank 1
answered on 21 Dec 2017, 11:34 AM
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.
0
Preslav
Telerik team
answered on 21 Dec 2017, 03:47 PM
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 05 Jun 2018, 07:28 AM

HI

In dojo sample, min Date but still return null : 

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

BUG ?

Best regards

Chris

 

 

 

0
Preslav
Telerik team
answered on 07 Jun 2018, 10:47 AM
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.
0
Chris
Top achievements
Rank 1
Veteran
Iron
answered on 11 Jun 2018, 02:28 AM

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

 

 

0
Preslav
Telerik team
answered on 12 Jun 2018, 10:48 AM
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.
Tags
Date/Time Pickers
Asked by
Jose
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Adrian
Top achievements
Rank 1
Stefan
Telerik team
Preslav
Telerik team
Chris
Top achievements
Rank 1
Veteran
Iron
Share this question
or