I have two Kendo Time Pickers on my page. Both are optional but I want to prompt the user to input the value in the format hh:mm am/pm. I want to use the KendoValidator to validate that the values are either empty or contain a valid time. Also, for the second input (end time), a valid time must exist in start time and it cannot come before the start time.

The first issue I am running into is that when using the dateInput: true option to enforce the format it is sending the string "hh:mm am/pm" to the validator as the date when the user enters nothing. Since this is not null it tries to validate it which it of course fails since "hh:mm am/pm" is not a date. This is also causing an issue with validating the required attribute on the startDate. 

Another issue would be that this gets passed to the server as the invalid date string which would potentially cause issues on the back end.

Finally, when I do not enter a start date at all it should trigger the required message but it is not. 

How can I solve this issue? Here is what my code looks like at the moment:

Initialize Time Pickers:

$.each($(".js-time-picker"), function (index, picker) {
    let id = $(picker).attr("id");
    timePickers[id] = $(`#${id}`).kendoTimePicker({
        dateInput: true,
        format: "h:mm tt",
        parseFormats: "HH:mm",
    }).data("kendoTimePicker");
    timePickers[id]._dateInput.setOptions({
        messages: {
            hour: "hh",
            minute: "mm",
            dayperiod: "am/pm"
        }
    });
});

Validator: 

$(document).ready(function () {
    myValidator = $("#myForm").kendoValidator({
        rules: {
            timeValidation: function (input) {
                if ($(input).hasClass("js-time-picker")) {
                    var validDate = kendo.parseDate($(input).val());
                    if (!validDate) {
                        return false;
                    }
                }
                return true;
            }

        },
        messages: {
            required: "Required",
            timeValidation: "Invalid Time"
        },
        validateOnBlur: false
    }).data("kendoValidator");
});

HTML:

            <div class="form-element">
                <label id="startTimeLabel" for="startTime">Start Time</label>
                <input id="startTime" name="startTime" class="js-time-picker" required validationMessage="Invalid time entered" aria-labelledby="startTimeLabel" />
                <span class="k-invalid-msg" data-for="startTime"></span>
            </div>

            <div class="form-element">
                <label id="endTimeLabel" for="endTime">End Time</label>
                <input id="endTime" name="endTime" class="js-time-picker" validationMessage="Invalid time entered" aria-labelledby="endTimeLabel" />
                <span class="k-invalid-msg" data-for="endTime"></span>
            </div>

I am trying to use kendo Jquery Date Picker.
I am referrring https://docs.telerik.com/kendo-ui/controls/editors/datepicker/overview.html for the same.

But instead of default k-i-calendar class I want to use k-i-calendar-date class. But I am not able to change.

Icons: https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
https://docs.telerik.com/kendo-ui/api/javascript/ui/button/configuration/iconclass in this example it talks about changing default icon class.

$("#button").kendoButton({ iconClass: "fa fa-male"});

I tried using the same for my date picker but it doesnot work.
kendo.jQuery("#ang_layout1_asof_sdate").kendoDatePicker({

  iconClass: "k-icon k-i-calendar-date"

});

Hi- I want to auto change focus on Date Input, I come across knowledge base which explains how to achieve this. My question is whether Telerik planning to have this feature inbuilt instead of work around. Means will be there any property expose so that making this property true this feature gets enable.

Link of work around i came across- https://docs.telerik.com/kendo-ui/knowledge-base/datepicker-auto-change-focus

As this is mostly use feature. I would like to request to add this feature for Date and Date time picker with Date Input by exposing one single property.

Hi - I'm using Kendo Date Picker and Date Time Picker with Date Input True, also i have update message of date input to change how place holder should display. Her the problem is date format placeholders are displayed even though there is no date set or component is empty. Is there any solution so that place holder gets displayed only when the component is focused?

My Code as below.

$field.kendoDateTimePicker({
                            dateInput: true,
                            format: "MM-dd-yyyy hh:mm tt",
                            parseFormats: "yyyy-MM-dd-HH.mm.ss",
                            min: new Date(1700, 0, 1)
                        }).data('kendoDateTimePicker')._dateInput.setOptions({
                            messages: {
                                "month": "__",
                                "day": "__",
                                "year": "____",
                                "hour": "__",
                                "minute": "__",
                                "dayperiod": "__"
                            }
                        });

$field.kendoDatePicker({
                            dateInput: true,
                            format: "MM-dd-yyyy",
                            min: new Date(1700, 0, 1)

                        }).data('kendoDatePicker')._dateInput.setOptions({
                            messages: {
                                month: "__",
                                year: "____",
                                day: "__"
                            }
                        });

Hi- I have DateTime picker with Date Input as true. I want to modify the text that is displayed in the placeholders for format "MM-dd-yyyy hh:mm tt"

As per below example i set message for month as "__", day as "__' and year as "____" . My question is how i can set message for hh:mm and day period. So that my Place Holder looks like __-__-____ :__ __/__ and i can enter date with hours and minutes with AP/PM

<input id="dateinput" /><script>

$("#dateinput").kendoDateInput({

format: "MM-dd-yyyy hh:mm tt",

messages:{

month:"____",

year:"____",

day:"__",

}});</script>

Hello, I'm wondering if there is a CSS attribute that will allow one to put the cursor on the textbox and navigate to the end of the text, so one can see the whole text value?

I tried the text-overflow: ellipisis below, but that didn't seem to take and i've attached a zip file with a snap shot of the textboxes, so any pointers would be greatly appreciated! thank you!

<script type="text/x-kendo-template" id="bip-template">

    <div class="bip-container">
        <table class="bip-table" cellpadding="0" cellspacing="0">
……………………………………………
……………………………………………………….
……………………………………………………………………………
                <td width="9%" class="lbl-text">Last Name:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text"         disabled="disabled" style="width:100%" data-bind="value: bipVm.lastName" />
                </td>

                <td width="9%" class="lbl-text">First Name:</td>
                <td width="16%">
                    <input class="k-textbox.large" type="text"         disabled="disabled" style="width:100%" data-bind="value: bipVm.firstName" />
                </td>
………………………..……………………………………………
……………………………………………………….….
……………………………………

<style>
    [class~="k-textbox.large"]
    {
        width: 300px;
        border: none;
        font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
        font-size: 11px;

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

</style>

 locdir

Hello,
I am considering using DateInput, but I found it’s very strange behavior. After completing month, it doesn’t move to day automatically. The only way to move is to use left/right arrows keys. Same for moving after entering day to year section. I think, it is not expected and not convenient for users. Is any configuration option I am missing?

Thank you.

Kendo example: https://demos.telerik.com/kendo-ui/dateinput/index

Jquery example that works: http://jquerytools.github.io/documentation/dateinput/index.html