date range toggle

[Bob]

I have a date range component controlling the contents of a chart widget.

I pre-select dates to the past seven days to show data in the chart widget when the component is initialised.

When the user selects a new date I have  onStartDateSelectorChange() and onEndDateSelectorChange() methods.

How do I close the data range popup calendar from within these methods?

 

When are you going to update this forum to use a decent way of reporting issues so we can copy and paste images, properly format code and use markup like every other forum.  Or is your intention to demonstrate just how easy it is to badly implement your wysiwyg text editor?

[Martin]

Hi Bob,

DateRange component popup can be closed programmatically by using the toggle method of the  <kendo-daterange-popup>. Here is an example where on valueChange of the End date I toggled the popup:

https://stackblitz.com/edit/angular-5jofqm?file=app/app.component.ts

As for the Editor, it is used a version of AJAX Editor which does not include the copy/paste image feature. However, the code can be formatted with the current version but the formatting is not applied automatically.

Generally, we have not enhanced the feature set for quite some time, but we plan to review and consider possible improvements and changes in the near future.

Regards,
Martin
Progress Telerik

[Bob]

Here is my html:

<kendo-daterange #daterange>
    <kendo-dateinput kendoDateRangeStartInput
        format="dd/MMM"
        formatPlaceholder="formatPattern"
        [(value)]="range.start"
        style="width:100px;padding-left:2rem;"
        [navigateCalendarOnFocus]="true"
        (valueChange)="onStartDateSelectorChange($event)"
        autoCorrectOn="change"></kendo-dateinput>
    <kendo-dateinput kendoDateRangeEndInput
        format="dd/MMM"
        formatPlaceholder="formatPattern"
        [(value)]="range.end"
        [max]="maxDate"
        style="width:100px;padding-left:2rem;"
        [navigateCalendarOnFocus]="true"
        (valueChange)="onEndDateSelectorChange($event)"
        autoCorrectOn="change"></kendo-dateinput>
</kendo-daterange>

 

How do I close the popup when I haven't declared one?

[Bob]

I would have edited the above post except it's not possible, this is such a dreadful example of how to not to use Kendo components for a forum.  My code behind is:

  onStartDateSelectorChange(value: Date): void {
    this.range.start = value;
    this.getDataAndSetChartData();
  }
  onEndDateSelectorChange(value: Date): void {
    this.range.end = new Date(moment(value).startOf('day').toString());
    this.getDataAndSetChartData();
  }

 

[Martin]

Hi Bob,

Thank you for the provided code snippets.

Indeed the DateRange component is consists of two Kendo DateInput components that share a common popup <kendo-daterange-popup>. In some scenarios, the popup needs to be customized - aligning, animation, visibility (as in this case), etc. For more details check the following article:

https://www.telerik.com/kendo-angular-ui/components/dateinputs/daterange/popup/

I am afraid that currently, this is the only built-in way that allows us to close the popup programmatically.

Regards,
Martin
Progress Telerik