DateRangePicker selected time

1 Answer 15 Views
DateRangePicker
CHIHPEI
Top achievements
Rank 1
CHIHPEI asked on 19 Oct 2021, 12:54 AM
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?

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 21 Oct 2021, 09:28 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

CHIHPEI
Top achievements
Rank 1
commented on 23 Oct 2021, 01:45 AM

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
Telerik team
commented on 27 Oct 2021, 01:02 PM

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.

Tags
DateRangePicker
Asked by
CHIHPEI
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or