Hi,

I'm using the data- attribute setup for a date time picker, and I can't seem to get component type (I'm looking for modern) to work. Might anybody know the correct attribute name?

<input name="start" required="required" style="z-index: inherit;" type="datetime"
                               data-bind="value:start,invisible:isAllDay"
                               data-format="M/d/yyyy h:mm tt"
                               data-component-type="modern"
                               data-role="datetimepicker" />

Hi. We're having a little issue with the Kendo DateTime picker in Firefox. If you put the DateTime picker somewhere on a page where you have to scroll down to see it and then you choose a date a couple of times from the dropdown, the page will scroll to the top of the page. Only happens in Firefox.

You can see it here: https://dojo.telerik.com/IvobAtIk

Thanks

I have a timepicker field. The built in required rule is ignored since I am using a dateInput field for the masking. When the user types something wrong in the field such as "1:mm PM" (meaning they just typed a 1 in the field) it throws an error that says "A time is required". The console logs out "null" as the value of the time picker field. When the user then goes and types in the 00 so it reads "1:00 PM" it  still says "A time is required" and still logs out "null" as the value. If the user then changes anything in the field to some other valid time the message goes away an it validates. How do I fix this?

Here is a Dojo demonstrating the issue:

https://dojo.telerik.com/@dojolee/AyuyAtaG/3

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 using the Kendo UI JQuery timepicker with the defaults and the option dateInput: true. When no time has been entered the placeholder text reads, "hours:minutes AM/PM". This is too long to fit in the box and gets cut off at the letter "A". I would like to shorten it to something like "hh:mm am/pm". How would I do this?

$("#myTime").kendoTimePicker({
        dateInput: true,
    });

I am using the kendo-ui(2021.2.511) datetimepicker control in my Vuejs 2.x application.

The datetimepicker controls works when used on a page.

But when I use the datetimepicker in a v-dialog, and click the datetimepicker, the control displays behind the dialog for a moment then closes.

Has anyone seen this behavior? Is there a setting or work around to make the datetimepicker work correctly when used in a v-dialog?

DataSource

transport: {
read: {
url: crudServiceBaseUrl + "?r=panel/json",
contentType: "application/json",
dataType: "json",
type: "GET"
},

...

parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
return kendo.data.transports["odata"].parameterMap(options, operation);
}

...

schema: {
model: {
fields: {

....

date_begin: {
type: "date",
parse: function (value) {
return kendo.toString(new Date(parseInt(value * 1000)), 'yyyy-MM-dd HH:mm:ss');
},
validation: {required: true}
},

....

columns

field

{
field: "date_begin",
width: "120px",
title: "Date Begin",
},

... after update grid 

update: {
url: crudServiceBaseUrl + "?r=panel/update",
dataType: "jsonp"
},

it is show me 

53291-12-11 17:50:00

i don't know why

any help?

Hello,

I have some troube to type in DateRangePicker inputs.
When DateRangePicker has been loaded, I click on start input and begin to type a date for example '2021/01/01', but aftern pressing Enter on keyboard, it shows current date as start input value.

The problem becomes worsen when I type a date in start input and press Tab, type another date in end input. But after pressing Enter on keyboard, again start input's value changes to current date and end input looses his value.

here is an example I'm working on it: DateRangePicker example

I think source of the problem is conflicting between DateInput and MultiViewCalendar widgests, when we click on the one of the inputs, MultiViewCalendar becomse visible, and while MultiViewCalendar is visible, pressing Enter key will fire change event of MultiViewCalendar rather than DateInput's change event. It's not better to add an icon to DateRangePicker in order to show and close the calendar?

Thank you in advance.

I have KendoDatePickers where it works fine if user clicks on the calendar control and selects the date.

But I also want that user can copy-paste the date format and it gets validated. Currently it is returning null for the value being copied like the attached image.

Is there any way I can validate the date?

Below is the JavaScript code I am using to get the values. 

Thanks.

How can I use javascript function for defining template for datepicker. Only strings are working now for templates. And if I use strings for template the corresponding function used inside the template should be global.