Kendo DateTimePicker ASP.NET MVC UI

[Mayurbhai]

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

[Georgi Denchev]

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

[Mayurbhai]

            <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

[Georgi Denchev]

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

[Mayurbhai]

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>

[Mayurbhai]

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!

[Georgi Denchev]

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

[Mayurbhai]

Thank you for your help! It works. 

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