Change the format

1 Answer 252 Views
DateInput DateRange
This question is locked. New answers and comments are not allowed.
Chamal
Top achievements
Rank 1
Veteran
Chamal asked on 10 May 2021, 08:01 AM
 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

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 10 May 2021, 10:49 PM | edited on 11 May 2021, 03:09 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Chamal
Top achievements
Rank 1
Veteran
commented on 11 May 2021, 09:39 AM

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
Telerik team
commented on 11 May 2021, 03:11 PM

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
Top achievements
Rank 1
Veteran
commented on 13 May 2021, 03:04 AM | edited

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
Telerik team
commented on 13 May 2021, 08:52 PM

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
Top achievements
Rank 1
Veteran
commented on 14 May 2021, 08:04 AM

Thank you..
Tags
DateInput DateRange
Asked by
Chamal
Top achievements
Rank 1
Veteran
Answers by
Hetali
Telerik team
Share this question
or