Telerik Forums
Kendo UI for Angular Forum
1 answer
23 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
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
52 views

In Classic calendar, only for the very first time,  if we click on navigate button to go to a different month, a scroll happens to go to current date in the target month. Second time if we click navigation button, this scroll does not happen. Due to a business requirement all cells of our calendar have been made to a size of more than 100px in width and height. Due to this massive size of the entire calendar, the scroll does not give a good user experience. Is it possible to avoid this?

 

Thambu
Top achievements
Rank 1
 asked on 17 Feb 2025
3 answers
132 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
91 views

To reproduce this issue please select your time zone as any time zone of US (eastern, central or pacific) select the date of date light saving change either the start or end of day light saving i.e the 2nd Sunday of March or November click on 4 am (or to be precise add your time zone offset to 2 am and click on any for example for eastern standard time any time from 2am to  7 am) it returns the wrong time. This can be observed for any kendo scheduler version from 2.1.6 to 15..1.0. 

The ideal behavior for any time after the change time i,e 2 am should return the value of the slot clicked but as of now it is incorrect for any value till 2+offest of the the time zone with day light saving. 

To reproduce this select a US time zone as mentioned (eastern, central or pacific) select 10th march 2024 or 3rd November 2024 and select 3am, 4 am , 5am etc. 

https://stackblitz.com/edit/angular-st2crm

Let me know if you need more details

Yanmario
Telerik team
 answered on 06 Mar 2024
0 answers
130 views

Not sure why, but when i use the kendo-datepicker anywhere in my application, datepicker header template is invisible. I tried with kendo-calender, header is visible initially, but on click of any date buttons or "Today" button it's hiding. Kindly assist soon. Am I missing something? Is there any event's that should be controlled? or can we resolve with styles? 

<kendo-datepicker></kendo-datepicker>

RAMAKRISHNAN
Top achievements
Rank 1
Iron
 updated question on 05 Mar 2024
1 answer
132 views

Hi,

We have a requirement, where we are using supporting internationalization for only date, numbers and currency. We do not want the calendar months to be displayed in local language. For example, when we set the LOCALE_ID, useValue: 'pt-PT', we don't want the calendar months to be displayed in Portugues. We want it to be SU, MO etc. Is this achievable?

 

Regards,

Jyothi

Martin Bechev
Telerik team
 answered on 13 Dec 2023
1 answer
105 views
I am using kendo-daterange component. I need to apply background color for the week number column since weeknumber column is greyed out more .

My pesudo code below:
--------------------
Styles :
-------
.weeknumber-cell{
    color : red;
}
------
<kendo-daterange>
<kendo-daterange-popup>
  <ng-template kendoDateRangePopupTemplate>
<kendo-multiviewcalendar kendoDateRangeSelection [selectionRange]="range" [weekNumber]="true"
  (selectionRangeChange)="handleSelectionRange($event)">
  <ng-template kendoCalendarWeekNumberCellTemplate let-context="cellContext">
<span class="weeknumber-cell">{{context.formattedValue}}</span>
  </ng-template>
</kendo-multiviewcalendar>
  </ng-template>
</kendo-daterange-popup>
</kendo-daterange>
Manjunath
Top achievements
Rank 1
Iron
 updated answer on 20 Sep 2023
1 answer
1.6K+ views

The calendar popup is not getting closed even after selecting the date or clicking outside.

This is how I have integrated data picker in my component.

<kendo-datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"
    [formControlName] = "controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates" >
   

</kendo-datepicker>

 

 

Hetali
Telerik team
 answered on 05 Sep 2023
1 answer
146 views

In Calendar month view, can I adjust the start day of the week?

Setting Saturday as the first day of the week is an example.

https://stackblitz.com/edit/angular-vth9pa?file=src/app/app.component.ts

 

Hetali
Telerik team
 answered on 19 Jan 2023
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?