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) && 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.
We try to always use a kendo component for our needs.
But, for the first time, the kendo component we need in the framework is totally unusable, and we will not use it.
Instead, we will create a custom range picker, using 2 DatePicker.
First, when the range open, the 2 calendars are always based on the current day, not the range start / end. We see the current month on the left side, and next month on the right. We we should see, is the "start" month on the left when we click the "start" zone, and the end month on the right when we click the "end" zone to open it.
Also, we can't only change the "start" or "end" easily, we always need to re-select the whole range.
And, depending on the previous range, + the new range, sometimes, the "end" value becomes null / undefined %?!
And we may need to re-select the start date and/or end date twice, it's not easy to understand what is happening during a simple selection.
Finally, we tried to catch the "change" events, change the range manually, but there's nothing we can do to make that component easy to use for users.
https://dojo.telerik.com/@foxontherock/UKureVOy/2
Try to select a range, between 10 and 15.
Then, re-open it, and select 12 to 17.
Do you understand what just happened ?!?!? No one can. 2nd click becomes the first one, and the third click becomes the 2nd one, the first is ignored, and we see the "null" end date !?!?.
Hi, I try to turn your "Date Range Picker" widget into a "Year Range Picker".
Your widget give the options "start" and "depth". I believed that will be work well but absolutely not... When I use the both options, the widget stop to work.
I tried with your example in kendo ui dojo, this code :
<div id="example" style="text-align: center;">
<div class="demo-section k-content wide" style="display: inline-block;">
<h4>Pick a date range</h4>
<div id="daterangepicker" title="daterangepicker"></div>
</div>
<script>
$(document).ready(function() {
$("#daterangepicker").kendoDateRangePicker({
start: "decade",
depth: "decade"
});
});
</script>
</div>
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 am little bit confused why DateRangePicker is not working properly as an 'editor' item in form while DatePicker is working properly
I am still learning Kendo so forgive me for my lack of knowledge.
Btw kendo version which I am using is 2022.1.301.
Thanks
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" }); });
Dear Support team,
i'm using the daterange picker of the Kendo UI. and I want to call a function when the from date and to date both selected (up on closing may be)
I tried using the close event but on the close event i do not get the end date (End date is null on the closing event)
your help is much appreciated
Thanks
Ramesh R