Telerik Forums
Kendo UI for jQuery Forum
1 answer
56 views

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

Neli
Telerik team
 answered on 07 Dec 2023
0 answers
89 views

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.

Mohit
Top achievements
Rank 1
 updated question on 22 Sep 2023
2 answers
861 views

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 !?!?.

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 answered on 06 Jul 2023
2 answers
311 views

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>
Why it doesn't work and how to fix it ?
n/a
Top achievements
Rank 1
Iron
 answered on 03 Jul 2023
1 answer
64 views

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

Georgi Denchev
Telerik team
 answered on 02 Nov 2022
1 answer
109 views
How do i change the default start, end labels for daterangepicker?
Georgi Denchev
Telerik team
 answered on 05 Sep 2022
1 answer
60 views

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

Neli
Telerik team
 answered on 20 May 2022
1 answer
86 views

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"

                        });
                    });

Georgi Denchev
Telerik team
 answered on 21 Mar 2022
1 answer
2.2K+ views

     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 

Mihaela
Telerik team
 answered on 26 Feb 2021
1 answer
448 views
Hello
Is it possible to highlight the programmatically set date range ?
Here is demo:
https://demos.telerik.com/kendo-ui/daterangepicker/api
If u click 'Set Value' and after that click the Range Date Picker itself - these dates are not highlighted in the control.
Thank you
Mihaela
Telerik team
 answered on 25 Feb 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?