Premium support for our pure JavaScript UI components


Post by cubrilo »

Hi,

I am using scheduler toolbar and I have datepicker to change the date of scheduler and also buttons next and previous date to navigate the dates. I need to update the datepicker on next or prev button click. I am looking at the documentation for something like scheduler.toolbar.getWidgets() or something similar but can't find anything to access the widgets.


Post by mats »

Every Container (such as a Toolbar) has a https://bryntum.com/docs/scheduler/#Core/widget/Container#property-widgetMap which you can use to access child widgets. Just assign a 'ref' to your button / datepicker. https://bryntum.com/docs/scheduler/#Core/widget/Widget#config-ref


Post by cubrilo »

I actually tried to use that, but I get only the generic Widget calls on the date picker. The only way I manage to change the date is if I do this:

scheduler.tbar.widgetMap['schedulerDatepicker'].input.value = new Date()

and then I have to also take care of the formatting? Isn't there some function which can handle this? Also about the localization, I would like to pass the locale for formatting to the date picker and let it just handle it. Is this possible? Or I must use the locale manager?


Post by saki »

You shouldn't need to go down to the input. The following code illustrates the approach (you can test it in basic scheduler demo):

const scheduler = new Scheduler({
    tbar : [{
        type : 'date',
        text : 'Date Picker',
        ref  : 'myDatePicker'
    }],
    // ... etc.
});

setTimeout(() => {
    scheduler.tbar.widgetMap.myDatePicker.value = new Date();
}, 2000);

Post by cubrilo »

I tried in the time ranges demo, by adding the datepicker and updating it on the next button

{
                    type    : 'button',
                    icon    : 'b-fa-angle-right',
                    tooltip : 'View next day',
                    onAction() {
                        const startDate = DateHelper.clearTime(scheduler.startDate)
                        axiosMock.get().then(res => {
                            scheduler.shiftNext();
                            scheduler.tbar.widgetMap.schedulerDatepicker.value = DateHelper.add(startDate, 1, 'day');
                        })
                    }
                }

and by using the

const axiosMock = {
    get: () => {
        return Promise.resolve({
            data: { result: 'api call successful' }
        });
    }
};

and it works fine but when i tried in the application I get the following error:

Error: Uncaught (in promise): TypeError: can't access property "getTime", date is undefined

This is the code that I am calling:

{
                    type: 'button',
                    icon: 'b-fa-angle-right',
                    tooltip: 'View next day',
                    onAction() {
                        const startDate: Date = DateHelper.add(DateHelper.clearTime(scheduler.startDate), 1, 'day');
                        const endDate: Date = DateHelper.add(DateHelper.clearTime(scheduler.endDate), 2, 'day');
                        refreshService(startDate, endDate).then(
                            updatedProject => {
                                refreshCalendar(scheduler, updatedProject, startDate, endDate);
                                scheduler.tbar.widgetMap.schedulerDatepicker.value = startDate;
                            }
                        );
                    }
                }

And everything works fine on scheduler but breaks on the datepicker update. Do you have any idea what might be the issue?


Post by saki »

I cannot guess what is the problem from the code you posted – it looks good.

Can you make it into a runnable showcase? We would run and debug it.


Post Reply