Kendo Datepicker - Append Month to Year in Navigation Pane

5 posts, 2 answers
  1. Bharat
    Bharat avatar
    7 posts
    Member since:
    Jul 2017

    Posted 26 Mar Link to this post

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

     

     

  2. Answer
    Martin
    Admin
    Martin avatar
    150 posts

    Posted 30 Mar Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Bharat
    Bharat avatar
    7 posts
    Member since:
    Jul 2017

    Posted 30 Mar in reply to Martin Link to this post

    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.

  4. Answer
    Martin
    Admin
    Martin avatar
    150 posts

    Posted 31 Mar Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  5. Bharat
    Bharat avatar
    7 posts
    Member since:
    Jul 2017

    Posted 14 May in reply to Martin Link to this post

    Thanks Martin for your this wonderful answer. Really appreciate your help.
Back to Top