daterange component confusion

[Bob]

I'm a little confused by the date range component.  I implement it as follows:

<kendo-daterange #daterange>
    <kendo-dateinput kendoDateRangeStartInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"
        [(value)]="range.start" [navigateCalendarOnFocus]="true" autoCorrectOn="change"></kendo-dateinput>
    <kendo-dateinput kendoDateRangeEndInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"
        [(value)]="range.end" [navigateCalendarOnFocus]="true" autoCorrectOn="change"
        [max]="maxDate"></kendo-dateinput>
</kendo-daterange>

which is great (though it would be much better to have the formatting handled by a library such as moment.js).  The popup appears and I can change dates which is also great.

But to actually apply the the changes to the the range object and call an API I have no event????  I have looked at several methods such as implementing a date range popup and then putting an apply button in the header (there is no footer component which seems strange) and also using the valueChanged event to activate an external component such as a button to apply the date changes and call the API.

Surely the date range component should have a button to apply the date changes and call a method in the component which can then call the API with the new date range.

My question is simple, am I missing something?  My date range is driving a chart, the image attached should go some way to explaining.

[Svet]

Hi Bob,

Thank you for the demonstrated markup.

However, I am not sure, that I understand the issue.

We can use the (valueChange) event of the DateInput components in order to track when the date range has been changed. This event can be used to subsequently call any required function call. Check the following example demonstrating this approach:
https://stackblitz.com/edit/angular-wmmxd3?file=app/app.component.ts

Let me know in case I am missing something or any further assistance is required.

Regards,
Svetlin
Progress Telerik

[Bob]

Hi Svetlin,

I would like to see an example of a date range component where the user can select the input for range.startdate or range.enddate and then make changes to the start or end date and, when finished, make a single call to the component with the new start and end dates.  At the moment I am faced with a call to the API every time this happens in start or end: (valueChange)="onValChange()".

I think the best way to do this is to implement an "Apply" button on the popup footer activated when either range.startdate or range.enddate changes.  But there is no popup footer in the template if I am not mistaken.  I have also attempted to implement a toggle for a "Refresh" button external to the component by toggling the refresh value using (valueChange)="onValChange()".

I just want to seamlessly select a start and end date and send the results to a method in the component which will refresh a chart widget.  Implementing this simple functionality using the date range component is causing me headaches and I am now ready to draw a line under my use of this component and revert to previous.  If you can help I would be immensely grateful.

I also note that my API makes use of moment.js and the casting to json dates in the component seems to cause problems with the display when I select the start date or end date input, when I click on one the other is immediately transformed to placeholder content.  I'm not sure what's going on here either which also makes me think I should now move back to standard.  Please help.

I will understand if this is a big ask and you haven't got the time but I'm at the stage where I'm asking myself whether I should continue or quit, the date range component is just taking too long to implement.

Hope this makes sense and sorry to trouble you but if you can help, be my guest!!!!

[Svet]

Hi Bob,

Indeed, the DateRange component does not provide templates where we can define our own custom elements. But we can create a custom "Refresh" button outside of the DateRange component. When clicking it we can get the values for the start and end dates as demonstrated in the following example:
https://stackblitz.com/edit/angular-wmmxd3-biyaw2?file=app/app.component.ts

About moment.js, it is a third party library, that has its own documentation and dedicated support. In general, we can pass only valid JavaScript Date objects to the DateInputs used to select the start and end date. If you could provide an isolated example demonstrating the undesired behavior I could have a look and try to locate the root of the issue. 

I hope this provides some more information for this case.

Regards,
Svetlin
Progress Telerik

[Bob]

Hi Svetlin,

Indeed, once I understood that you have not yet finished the daterange component with a "refresh" button ;-) I persevered with the external component.  It is worth noting that the range object should be set during initialisation:

ngOnInit() {
    let days = Number(abp.setting.get('App.NuageTenantManagement.TargetForReviewingCarePlansInDays')) * 1.5;
    this.range.start = new Date(moment().subtract(days, 'days').toString());
    this.range.end = new Date('12/31/9999');

    this.setUp();
}

I was setting these values in my method for the API call after return of data and this threw the start and end inputs back to the default format when either was focused.  Having done this the rest was a breeze.  I insert some code in the hope it can give others any pointers.

    setUp() {
        this.buildChart();
        this.getDataAndSetChartData(moment(this.range.start), moment(this.range.end), true);
        this.isLoading = false;
    }

    onDateSelectorChange(value: Date): void {
        this.newDateSelected = true;
    }

    refresh() {
        this.getDataAndSetChartData(moment(this.range.start), moment(this.range.end), false);
    }

    getDataAndSetChartData(startdate: moment.Moment, enddate: moment.Moment, isSetUp: boolean) {
.... code removed for brevity.

The onDateSelectorChange method is used to display a refresh button.  The html is below should anyone wish to implement the daterange component to update a chart or grid and any other list with a start and end date.  The classes are from Metronic with which it works very well.

<span #DashboardDateRangePicker class="m-subheader__daterange dashboard-report-range">
    <span class="m-subheader__daterange-label">
        <span class="m-subheader__daterange-title"></span>
        <span class="m-subheader__daterange-date m--font-brand">
            <kendo-daterange #daterange>
                <kendo-dateinput kendoDateRangeStartInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"
                    (valueChange)="onDateSelectorChange()" [(value)]="range.start"
                    [navigateCalendarOnFocus]="true" autoCorrectOn="change"></kendo-dateinput>
                <kendo-dateinput kendoDateRangeEndInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"
                    (valueChange)="onDateSelectorChange()" [(value)]="range.end"
                    [navigateCalendarOnFocus]="true" autoCorrectOn="change" [max]="maxDate"></kendo-dateinput>
            </kendo-daterange>
        </span>
    </span>
</span>

[Svet]

Hi Bob,

I am glad, that the discussion helped you to move forward.

I am not sure, what you mean with the following line:

"... you should really get the formatting sorted out on this forum.  Why not just stick it all on github and give your licensed users access to source."

The forum is open to all licensed users and there are no strict formatting rules. About the source code, we can follow the steps from the following article:
https://www.telerik.com/kendo-angular-ui/components/installation/source-code/ 
in order to get the source code of any Kendo Ui for Angular package.

Let me know in case I did not understand correctly or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik