DateRangePicker selected time

[CHIHPEI]

Hello,
I'm starting a daterangepicker for filtering my datas,
as i select the time range,
say like selecting start time: 2021/10/18 to end time: 2021/10/19
while i checked the value it turns out to be 2021/10/18 12:00:00 to 2021/10/19 12:00:00.
The issue here is how can i change the selected value to 2021/10/18 00:00:00 to 2021/10/19 00:00:00?

[Aleksandar]

Hello CHIHPEI,

Based on the provided details I am not sure I understand the issue. I tried to reproduce it but I am obviously missing something. For example, a Model with Start and End properties and a DateRangePicker for choosing the values logs the date object and submits the dates to the remote endpoint without changing the time portion:

Model

    public class MyModel
    {
        public DateTime? Start { get; set; }
        public DateTime? End { get; set; }
    }

 

View:

<form action="@Url.Action("FormPost","Home")" method="post">
    @(Html.Kendo().DateRangePicker()
            .Name("daterangepicker")
            .StartField("Start")
            .EndField("End")
            .HtmlAttributes(new { style = "width: 100%", title = "daterangepicker" })
            .Events(ev=>ev.Change("onChange"))
        )
    <button type="submit">Submit</button>
</form>

<script>
    function onChange(e) {
        console.log(e.sender.range())
    }
</script>

 

Controller:

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult FormPost(MyModel model)
        {
            return View("Index");
        }

 

As you can see in this screencast the selected dates are logged without any time portion added and submitted with no time portion is added to them on the server-side. Can you let me know what I am missing in reproducing the reported behavior?

Regards,
Aleksandar
Progress Telerik

[CHIHPEI]

Hi, Aleksandar

First of all, thank your for your answer.
The reproducing of my thoughts was perfect, and it helps me to rethink my question.
So, what I found that the DateRangePicker selected dates were in 12-hour clock,
and my data read time in Sql Server were in 24-hour clock,
thats why I cant get the entire datas ranged between the selected dates.
Is there any way to convert the selected dates into 24-hour clock in the front end widget? 

[Aleksandar]

The Kendo UI Date/Time pickers are using Date object internally. Is it possible that the cultures on the client and server are different and this is causing the observed behavior? You can configure the Localization for the component via the Culture() configuration option. This article demonstrates how to set matching cultures on both the client and the server.

As for converting formatted dates you can try the kendo.parseDate() method.