Telerik Forums
Kendo UI for Angular Forum
1 answer
21 views

I'm working on an Angular 19 application. Based on the codebase with kendo 19.1.2,
i'm trying to Implement a user-configurable date format that can be changed at runtime (e.g., 'dd/MM/yyyy', 'yyyy-MM-dd', 'dd MMM yy').
The date format should be configurable per user.
All dates displayed throughout the application should use this custom format
Date parsing (when users input dates manually) should respect this format
Kendo DatePickers should continue using their internal 'c' or 'g' format for the picker UI, but display/parse the selected date using the user's custom format
I attempted to override the clrdIntlService but it didn't work correctly. The datepickers didn't respect the custom format.
Questions:

What's the correct approach to implement this? Should I:
 * Create a custom IntlService for Kendo?
 * Override date formatting globally?
How can I make Kendo DatePickers use the custom format for display/parsing while keeping their internal format?

Can you provide a complete working example with:
- Service/provider configuration
- Integration with Kendo DatePicker
- How to apply it across the entire application

Thank you in advance!

Martin Bechev
Telerik team
 answered on 10 Oct 2025
1 answer
98 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
51 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
40 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
88 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
97 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
131 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
72 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
74 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
83 views
on click calendar i see button today. how to hide this button?
Abodabe
Top achievements
Rank 1
 asked on 18 Apr 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ambisoft
Top achievements
Rank 2
Iron
Pascal
Top achievements
Rank 2
Iron
Matthew
Top achievements
Rank 1
Sergii
Top achievements
Rank 1
Iron
Iron
Andrey
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?