Telerik Forums
Kendo UI for Angular Forum
1 answer
6 views

In my application we display all dates in UTC regardless of user's timezone. We use angular reactive forms and will have our kendo date picker mapped to a formControlName - eg 'fiscalYearEnd'.

The value for fiscalYearEnd in my json is  eg '2025-07-09'.

If I then  populate this date field with this.form.get('fiscalYearEnd').setValue(new Date(json.fiscalYearEnd)) then if the user is in eg New York, ie EST timezone, then they will see 2025-07-08 as the value in the date picker.

I've also tried other approaches - eg 

this.form.get('fiscalYearEnd').setValue(new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())));

Whatever I try, if the timezone is EST the date picker will display the previous day.

What am I doing wrong?

 

 

 

Martin Bechev
Telerik team
 answered on 11 Jul 2025
0 answers
24 views
I have a date list which is binding in kendo grid. I what to filter multiple date range like 1st January 2025 to 31st January 2025 and 1st May 2025 - 31st May 2025. Can kendo grid support multi date range filter? If support, then how to implement it.
0 answers
30 views
How we can filter Dates same like excel. I want to filter dates quarterly in kendo gird. Can we achieve it using kendo search? If achieve then how.
1 answer
71 views

Is it possible to bind the kendo angular date controls directly against a luxon date object?

I tried the following:

A direct binding results in a compile error:

    <kendo-label text="Luxon Date">
                <kendo-datepicker  [value]="luxonDate"
                  placeholder="Choose a date ..."
                ></kendo-datepicker>
              </kendo-label>

Error in src/app/app.component.ts (28:37)

Type 'DateTime' is missing the following properties from type 'Date': toDateString, toTimeString, toLocaleDateString, toLocaleTimeString, and 36 more.

 

A binding against a Javascript date, on the other hand, works

 <kendo-label text="JSDate">
                <kendo-datepicker  [value]="date"
                  placeholder="Choose a date ..."
                ></kendo-datepicker>
              </kendo-label>

 

Is there also a special adapter for the Kendo DatePicker like for Angular Material Date Components (@angular/material-luxon-adapter)?

Zornitsa
Telerik team
 answered on 23 Oct 2024
1 answer
84 views

Hi team,

I'm very sorry to bother you again. I tried all the methods you provided, but the error still exists. I will now describe the error to you in more detail.

The following is a picture of unit test error information.

I tried to understand the error message, and it seems to be related to the language setting initialization of the datepicker component.

In the datepicker component, I have implemented the language switching function. Here is the relevant code for the language switching.

In the app.config.ts file, I globally set and imported the corresponding language pack.

I tried to introduce CldrIntlService in the unittest file, but it still gave the same error.

Thank you for your help!

Zornitsa
Telerik team
 answered on 22 Oct 2024
3 answers
104 views

I’m working with the Kendo DateRange component and I need to disable future dates. I attempted to use [disabledDates]="dates", but this option is not available. How can I achieve this?





              <kendo-daterange>
                  <div class="col col-6 custDatePickerWidth">
                    <label>Created Date From</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateFrom" kendoDateRangeStartInput
                        formControlName="createdDateFrom" [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                  </div>
                  <span class="line">-</span>
                <div class="col col-6 custDatePickerWidth toDate">
                    <label>Created Date To</label>
                      <kendo-dateinput name="SearchDatePickerCreatedDateTo" kendoDateRangeEndInput formControlName="createdDateTo"
                        [format]="'MM/dd/yyyy'" placeholder="mm/dd/yyyy" [max]="maxDate">
                      </kendo-dateinput>
                </div>
              </kendo-daterange>

Hetali
Telerik team
 answered on 11 Sep 2024
1 answer
64 views
The Angular Grid Filter Menu doc page (https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/) has a stackblitz example (https://stackblitz.com/run/?file=src%2Fapp%2Fapp.component.ts). The products.ts file in that example has dates but no times, e.g. new Date(1996, 8, 20). Filter by "is equal to" on 8/20/1996 returns one row, as expected. But when I modify that file and add a time, say 10:11:05, and filter by "is equal to" and enter date 8/20/1996, no results are returned. How can I supply exact times but filter only on date? I can create a filter using "is after or equal to" combined with "is before or equal to", but that is non-intuitive to my users. I could use the DateTimePicker, but the users don't want to select a time, they just want to select the date. There is a similar discussion in the forum (https://www.telerik.com/forums/filter-date-column-with-year) but that just has to do with the year. I could create a similar function, but that seems like overkill. Is there an easier way? 
Zornitsa
Telerik team
 answered on 13 Aug 2024
0 answers
66 views
Hi team I am trying to add Date picker to Kendo Grid column so if user select date using date picker that date value should display in all the rows in grid.. is there any way to achieve this..
Sneha
Top achievements
Rank 1
 asked on 22 Jun 2024
0 answers
74 views
on click calendar i see button today. how to hide this button?
Abodabe
Top achievements
Rank 1
 asked on 18 Apr 2024
0 answers
128 views

Hi All,

We recently have undertaken an effort to upgrade our project to Angular 16 and as part of that we also updated all of our Kendo libraries to 14.2.0.  Since the update, many of our datepicker inputs are behaving extremely strangely, namely, you open the datepicker and it starts frantically scrolling into the past without stopping. I'll attach a gif showing the issue. 

Strangely I can't seem to reproduce it consistently, it happens on our test server every single time but not on my local machine.  Here is an example of how the datepicker looks in code, though it happens across many of them in the application:


            <kendo-datepicker
              class="w-100"
              [value]="getDateTimeValue()"
              [format]="'MM/dd/yyyy'"
              [disabled]="valueCanBeEmpty()"
              (valueChange)="handleDatePickerValueChanged($event)"
              [popupSettings]="{appendTo: 'component'}"
              [attr.data-qa-id]="'datepicker-value-'+field.SourceName">
            </kendo-datepicker>

Any help would be appreciated

Timothy
Top achievements
Rank 1
 asked on 20 Mar 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?