Kendo Datepicker - Append Month to Year in Navigation Pane

[Bharat]

I want to Append month to year (2020) in Kendo Datepicker on left navigation pane. So the final output should be Jan-2020.

 

 

[Martin Bechev]

Hi Bharat,

Thank you for the provided screenshot.

The described layout is by design so that the end-user is notified which year is beginning while scrolling, the first month naturally being January. The full name of the month is also displayed in the Calendar header.

To customize the displayed months in the left-hand side scrollable navigation section, the developer can utilize the Calendar templates, more specifically - the NavigatonItemTemplate:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/templates/

https://www.telerik.com/kendo-angular-ui/components/dateinputs/api/NavigationItemTemplateDirective/

This will allow for replacing each year with lets say Jan + the year, or Jan only:

https://stackblitz.com/edit/angular-wtpq3q-bhbbrr?file=app/app.component.ts

I hope this helps.

Regards,
Martin
Progress Telerik

[Bharat]

Hi Martin,

Thanks a lot for your help. This worked like a charm in single page with Kendo date picker.

I want to make this Date picker behavior uniform in all pages and there are few pages where kendo-grid is used with date filter and below is html for it.

</kendo-grid-column "other details">

<ng-template kendoGridFilterMenuTemplate let-filter let-col="column"
                        let-filterService="filterService">
                        <kendo-grid-date-filter-menu [extra]="false" [column]="col" [filter]="filter"
                            [filterService]="filterService" format="{{column.format||'dd/MM/yyyy'}}">
                        </kendo-grid-date-filter-menu>
                    </ng-template>
                </kendo-grid-column>

I tried incorporating changes provided by you in Kendo grid but facing difficult doing it.

Could you  please advise on this? Please let me know if you need any further information on this.

[Martin Bechev]

Hi Bharat,

Indeed there is no straight forward approach to change the layout of the built-in date picker filter, rather than a custom one needs to be implemented in a kendoGridFilterCellTemplate and manually handle the filtering functionality:

 

 <kendo-grid-column
        field="FirstOrderedOn"
           >
        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
          <my-datepicker-filter [filter]="filter" [field]="column.field">
          </my-datepicker-filter>
        </ng-template>
      </kendo-grid-column>

 

<my-datepicker-filter> is a custom component where Kendo Angular DatePicker component is defined with the discussed template for the navigation part.

In order to function as the default date filter, the operators need to be added as well, utilizing FilterCellOperatorsComponent. Please check the following StackBlitz that demonstrates the suggested approach in more details:

https://stackblitz.com/edit/angular-6hvpwb-7sp341?file=app%2Fcustom-datepicker.component.ts

I understand that the logic of the example gets more complex with the only aim to change the DatePicker navigation, but this is the way to go.

Let me know if I can assist any further.

Regards,
Martin
Progress Telerik

[Bharat]

Thanks Martin for your this wonderful answer. Really appreciate your help.