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});

So this is the code.

@(Html.Kendo().DatePicker()
                          .Name("frShift")
                          .Start(CalendarView.Year)
                          .Depth(CalendarView.Year)
                          .Format("MMMM yyyy")
                          .Value(DateTime.Now)
                          .Min("01/01/" + Model.StartYear)
                          .Max("12/31/" + Model.EndYear)
                          .HtmlAttributes(new { style = "width: 100%;", placeholder = "Select month...", title = "Shift From" })
                          .Events(e =>
                  {
                      e.Change("shiftDemand.updToRow");
                  })

On local it is opening while on server it is not opening due to date control. If we remove date control then it will load. Please respond.

It is on Local

but once i deploy on QA and PROD server its loading but not opening.

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>