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!
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?
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:
Error in src/app/app.component.ts (28:37)
A binding against a Javascript date, on the other hand, works
Is there also a special adapter for the Kendo DatePicker like for Angular Material Date Components (@angular/material-luxon-adapter)?
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!
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>