Change the format

[Chamal]

 Is it possible to open kendo date range picker from a single input field in angular 8 and it should be a convert to text format ex. (Jan 8th - Feb 08th, 2021 ) Please refer the attached image

[Hetali]

Hi Chamnal,

In order to show the DateRange in a single input field, use the following custom method:

1. Define the single input field i.e. the TextBox which will open a Popup using the focus event.

<input #anchor kendoTextBox (focus)="openMVC()"/>

<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
</kendo-popup>

public show = false;

public toggle(show?: boolean): void {
  this.show = show !== undefined ? show : !this.show;
}

public openMVC() {
  this.toggle(true);
}

2. Add the Kendo UI MultiViewCalendar component in the Kendo UI Popup and set the value of the TextBox as the Date Range.

<input #anchor kendoTextBox 
  value="{{ intl.formatDate(range.start, 'MMM dd, yyyy') }} - {{ range.end | date }}"
/>

<kendo-popup #popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
  <div>
    <kendo-multiviewcalendar
      kendoDateRangeSelection
      [(selectionRange)]="range"
    >
    </kendo-multiviewcalendar>
  </div>
</kendo-popup>

3. To close the Popup when user clicks outside the Popup or presses the ESC key, take a look at this article.

4. To show one month at a time, set the views property of the Kendo UI MultiViewCalendar to 1.

<kendo-multiviewcalendar
  kendoDateRangeSelection
  [views]="1"
></kendo-multiviewcalendar>

In this StackBlitz example, the Kendo UI DateRange is shown in a single TextBox with the defined date format and the Calendar shows only one month. The Calendar is not scrollable, but the user can use the navigation buttons on the top-right corner.

Please note that this custom approach is not fully tested and may require further modification.

I hope this helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Chamal]

Thank you for your answer and, I need to change it's like I have attached an image, it should be a vertical can you provide a solution for that one

[Hetali]

Hi Chamnal, 

I have updated the answer with the additional changes. Please refer to the 4th step and let me know if it helps.

Thanks,
Hetali

[Chamal]

Thank you, Is it possible to catch the end date value as a function when the user selecting end date, because I need to pass both values after the user selected end date. and also I need to show the date picker as 2 months as a vertical with a scroll bar, can you help me

[Hetali]

Hi Chamnal,

You can use the valueChange event to call the custom function.

Currently we don't have a built-in feature to show two months vertically with a scroll bar. To see this feature added in the future, please vote and follow this feature request in our Kendo UI for Angular Feedback Portal. Based on the votes, feasibility, etc the feature will be considered and added to our roadmap.

Thanks,
Hetali

[Chamal]

Thank you..