Hi all,

I'm currently having a problem to try to change the focus one cell up/down using the key arrows when the focus is on a DatePicker component and it is located inside a Grid. The current behavior is that the focus is on the DatePicker and the up/down arrows change the segment value of the date. (It only changes the day, month or years).

Can you please give an idea how to override this kendo behavior?

Additionally, can you share with me more information about the keyboard navigation inside the DatePickers components?

I read this information DatePicker Component - Keyboard Navigation | Kendo UI for Angular (telerik.com) but it doesn't mention anything about the behavior pressing just the up/down arrows without opening the calendar component. 

Thank you in advance. 

Here is HTML Code of Date Picker

<input kendo-date-picker="" k-scope-field="dteNewDueDateDate" k-format="'yyyy-MM-dd'" k-on-change="undefined" custom-date="" ng-model="vm.target.newDueDate" required="" ng-class="{ 'is-invalid': (changeDueDateForm.dteNewDueDateDate.$dirty || changeDueDateForm.$submitted) &amp;&amp; changeDueDateForm.dteNewDueDateDate.$error.required }" ng-disabled="false" aria-label="New Due Date" name="dteNewDueDateDate" id="dteNewDueDateDate" entity="undefined" field="undefined" config="" class="ng-pristine ng-untouched k-input-inner ng-empty ng-invalid ng-invalid-required" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="dteNewDueDateDate_dateview" autocomplete="off" aria-disabled="false" aria-readonly="false" aria-invalid="true" style="">

I have Tried this and Similar Solutions but all in Vain. Please help me to find its solution

$(document).ready(function() {   // Wait for the document to be fully loaded   // Initialize the Kendo UI DatePicker  $("#dteNewDueDateDate").kendoDatePicker({     format: "yyyy-MM-dd"    // Add any other configuration options you need  });   // Set the value after initialization  setTimeout(function() {     var datePicker = $("#dteNewDueDateDate").data("kendoDatePicker");     var targetDate = new Date('2023-12-04');     datePicker.value(targetDate);     datePicker.trigger("change");   }, 100); // Adjust the timeout duration if needed});

I have 2 fields in my form. 

the first field is using NumericTextBox to set a year

the 2nd field would be a date picker with date input to select the date, the format would be dd MM

I would like to check if it is possible, onblur of the numeric textbox would set the date-picker selectable dates based on the year entered in the first field

I was looking for css fix for the current date focus on kendo datepicker input, where i found this article in kendo site

https://docs.telerik.com/kendo-ui/knowledge-base/datepicker-auto-change-focus

But the issue is for every month the date is focused.

this is the current month and current date

but when i click next month the same date is showed with box shadow.But i want to focus only the current month and current date

Hi

I'm trying to try to disable all dates except for the last date of the month for a range. I add the range ok but all dates are enabled. I just need last date of month. I'm using Jquery. Is there a way to do this with the datepicker? 

 $(document).ready(function () {
                        $("#datepicker").kendoDatePicker({
                            min: new Date(),
                            min: new Date(),
                            format: "MM/dd/yyyy",
                            type: "date",
                            change: function(e) {
                                  var value = this.value();
                                  var days = value.getDate();
                                  var d = new Date();
                                  d = value;
                                d.setDate(d.getDate() - days + 1, 0);
                                    console.log(d);
                            },
                            value: "d"

                        });
                    });

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: "__"
                            }
                        });