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

Kendo DateTimePicker ASP.NET MVC UI

7 Answers 59 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Mayurbhai
Top achievements
Rank 1
Veteran
Mayurbhai asked on 19 Mar 2021, 03:47 AM

Hi Team,

 

I am using the Telerik DateTimePicker ASP.NET MVC, and I noticed that after clicking onto the calendar, once I navigate to "Time" tab of the calendar, "Hour" and "Minutes" are not aligned properly. The higher "Minute" I select does not align in the center. For example, if I select "minute" 10, then it would stay in the center of the minute column. However, if I select 58 minute, then it would not be in center of the minute column. 

Please find the attached screenshot to review the issue I am having, and please get back to me as soon as you can.

I am looking forward to hearing back from you.

 

Best,

Mayur Maisuria

7 Answers, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 23 Mar 2021, 12:55 PM

Hi, Mayur Maisuria,

Thank you for the provided screenshot.

I attempted to reproduce the described behavior, however I was unsuccessful.

Are there any errors in the Browser Console or is there any additional styling applied to the widget? Could you also tell me which theme are you using?

Would it be possible for you to provide a small project with a DateTimePicker where this issue is observed so I can debug it locally? I should be able to provide you with a more appropriate response after that.

I am looking forward to your reply.

Best Regards,
Georgi Denchev
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/.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 23 Mar 2021, 02:03 PM

            <div class="row">
                <div class="col-md-4" style="padding-top:5px;">
                    <strong> Completion Date:</strong>
                </div>
                <div class="col-md-5" id="to-do">
                    @(Html.Kendo()
                        .DateTimePicker()
                        .ComponentType("modern")
                        .Name("dpLTSummaryCompletionDate")
                        .HtmlAttributes(new { style = "width: 185px;"} )
                        .Events(e => e.Change("dpLTSummaryCompletionDate_change"))
                        .Value(Model.CompletionDtTm)
                        .Format("MM/dd/yyyy h:mm:ss tt")
                        .ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
                        .DateInput(true)
                        .Max(Model.TakenDtTm.AddDays(365))
                        .Min(Model.OnsiteDtTm))
                </div>
            </div>

Hi There,

I really appreciate you for getting back to me. Please find the attached screenshots and the code I am using above. I did not see any errors in the browser.

I am also getting another issue for not able to clear, empty, or null the date. For example, right now the date automatically sets to either MIN or MAX date when I enter a date that is not in the range between the MIN and MAX. I do not want the date to be set automatically because then a user does not find even if they make the mistake. I want to display the placeholder in the date field if a user enters a date that is not in the range of MIN and MAX.

Please get back to me as soon as you can since I am working on the company's project and I need to complete it.

I am also available to have a discussion over the phone or willing to share my screen to show you the issues I am having.

I am looking forward to hearing back from you.

Best,

Mayur Maisuria

0
Georgi Denchev
Telerik team
answered on 24 Mar 2021, 04:40 PM

Hi, Mayur Maisuria,

I am still trying to replicate the issue with the alignment.

As for the the other problem you could set the value of the input to null if the current value is the min or max date, this way the input will display the placeholder any time the user tries to type in a date outside of the range. To achieve this behavior, bind the Change event to the dateInput on page load.

    $(function () {
        let dateTimePicker = $("#dpLTSummaryCompletionDate").data("kendoDateTimePicker");
        let dateInput = dateTimePicker._dateInput;

        dateInput.bind("change", function (e) {
            let value = this.value().getTime();
            let min = this.options.min.getTime();
            let max = this.options.max.getTime();

            if (value == min || value == max) {
                this.value(null);
            }
        });
    });

Could you also provide me with the implementation of the Change handler so I can further examine the problem with the misalignment? Could you also tell me which theme are you using?

Best Regards,
Georgi Denchev
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/.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 24 Mar 2021, 05:15 PM

Hi Georgi,

Thanks for getting back to me and provide me solution to make a date null. 

Below is the code that I have for the dates. Other than this, I am not using any css or styling. 

Please get back to me as soon as you can. If you need more details, please reach out to me.

Thanks for your help!

<div class="col-md-3">

            <div class="row">
                <div class="col-md-4" style="padding-top:5px;">
                    <strong> Enroute Date:</strong>
                </div>
                <div class="col-md-5">
                    @(Html.Kendo()
                    .DateTimePicker()
                    .ComponentType("modern")
                    .Name("dpLTSummaryEnrouteDate")
                    .HtmlAttributes(new {style = "width: 185px;" })
                    .Events(e => e.Change("dpLTSummaryEnrouteDate_change"))
                    .Value(Model.EnrouteDtTm)
                    .Format("MM/dd/yyyy h:mm:ss tt")
                    .DateInput(true)
                    .Max(Model.TakenDtTm.AddDays(365))
                    .Min(Model.FSRAckDtTm))
                </div>
            </div>

            <div class="row">
                <div class="col-md-4" style="padding-top:5px;">
                    <strong> On Site Date:</strong>
                </div>
                <div class="col-md-5">
                    @(Html.Kendo()
                    .DateTimePicker()
                    .ComponentType("modern")
                    .Name("dpLTSummaryOnSiteDate")
                    .HtmlAttributes(new {style = "width: 185px;" })
                    .Events(e => e.Change("dpLTSummaryOnSiteDate_change"))
                    .Value(Model.OnsiteDtTm)
                    .Format("MM/dd/yyyy h:mm:ss tt")
                    .DateInput(true)
                    .Max(Model.TakenDtTm.AddDays(365))
                    .Min(Model.EnrouteDtTm))
                </div>
            </div>

            <div class="row">
                <div class="col-md-4" style="padding-top:5px;">
                    <strong> Completion Date:</strong>
                </div>
                <div class="col-md-5" id="to-do">
                    @(Html.Kendo()
                        .DateTimePicker()
                        .ComponentType("modern")
                        .Name("dpLTSummaryCompletionDate")
                        .HtmlAttributes(new { style = "width: 185px;"} )
                        .Events(e => e.Change("dpLTSummaryCompletionDate_change"))
                        .Value(Model.CompletionDtTm)
                        .Format("MM/dd/yyyy h:mm:ss tt")
                        .ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
                        .DateInput(true)
                        .Max(Model.TakenDtTm.AddDays(365))
                        .Min(Model.OnsiteDtTm))
                </div>
            </div>

        </div>

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 24 Mar 2021, 05:23 PM

Hi Georgi,

Now, we know we can make the date field to be null. Is it possible to keep the date as it is (whatever user enters) in the date field instead of making the field null? I want to display the date that has been entered by a user even though it's out of Max and Min range, so a user knows that they have made the mistake along with display the error message.

Please help me out on this as soon as you can since I am working on the company's project.

Thanks my friend!

0
Georgi Denchev
Telerik team
answered on 29 Mar 2021, 11:18 AM

Hi, Mayur Maisuria,

In this case you could remove the Min and Max limitations from the DateInput and keep them only on the DatePicker widget. This way you will be able to type in any date in the input, however you will only be able to pick dates in range from the picker.

    $(function () {
        let dateTimePicker = $("#dpLTSummaryCompletionDate").data("kendoDateTimePicker");
        let dateInput = dateTimePicker._dateInput;
        dateInput.setOptions({
            min: null,
            max: null
        });
    });

Now the input value won't be changed even if the date is out of the range of the DatePicker.

Let me know if you experience any issues.

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Mayurbhai
Top achievements
Rank 1
Veteran
answered on 30 Mar 2021, 04:32 AM

Thank you for your help! It works. 

I really appreciate you for getting back to me and helping me out.

Tags
Date/Time Pickers
Asked by
Mayurbhai
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Mayurbhai
Top achievements
Rank 1
Veteran
Share this question
or