This is a migrated thread and some comments may be shown as answers.

date range toggle

4 Answers 13 Views
DateRange
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Veteran
Iron
Bob asked on 10 Jun 2020, 10:32 AM

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?

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 12 Jun 2020, 08:14 AM

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

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.
0
Bob
Top achievements
Rank 2
Veteran
Iron
answered on 12 Jun 2020, 10:59 AM

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?

0
Bob
Top achievements
Rank 2
Veteran
Iron
answered on 12 Jun 2020, 11:13 AM

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();
  }

 

0
Martin
Telerik team
answered on 16 Jun 2020, 06:27 AM

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

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.
Tags
DateRange
Asked by
Bob
Top achievements
Rank 2
Veteran
Iron
Answers by
Martin
Telerik team
Bob
Top achievements
Rank 2
Veteran
Iron
Share this question
or