[REACT] Today button
Posted: Mon May 09, 2022 12:32 pm
Hello, I created a today button in my tbar, it changes the day correctly in the grid, but it doesn't change the datepicker value, how can I modify it?
Hello, I created a today button in my tbar, it changes the day correctly in the grid, but it doesn't change the datepicker value, how can I modify it?
You should listen to https://bryntum.com/docs/scheduler/api/Scheduler/view/TimelineBase#event-dateRangeChange on the Scheduler and update your date field accordingly. You can set a https://bryntum.com/docs/scheduler/api/Core/widget/Widget#config-ref on the datefield config to identify it and access it from the scheduler instance like so:
scheduler.on('dateRangeChange', () => {
scheduler.widgetMap.yourRef.value = scheduler.startDate;
}I set dateRangeChange in mi listeners but it doesn't run when I change the date
Works for me, go to https://bryntum.com/examples/scheduler/vertical/
In console add.
scheduler.on('dateRangeChange', () => {
console.log('change')
})Then type
scheduler.startDate = new Date()
It works in your example, but how can I apply it to my code? My listeners are passed to the scheduler component as a state (as shown in your examples), so how and where can I add it?
I tried adding it as any other listener (see screenshot) but it does not work.
Please share more context, I only see you defined method but how did you use that?
Better to attach you runnable app here, so we will debug and fix it right away.
If you are talking about how to get field in the listener, then check docs https://bryntum.com/docs/scheduler/api/Scheduler/view/TimelineBase#event-dateRangeChange
there is a source param, which is scheduler in fact. Then do
source.widgetMap.yourRef.value = scheduler.startDate;
Hello, I created a test case with a runnable app, see attachments
Looks like a bug in wrapper, we will have a look, here is a ticket https://github.com/bryntum/support/issues/4649
Here is a code snippet how to fix Today button
tbar: [
{
type: 'date',
ref : 'startDate', // add reference for widgetMap
value: 'up.startDate',
step: '1d',
format: 'DD/MM/YY',
onChange({ value }) {
const schedulerRef = scheduler.current?.instance;
// Preserve time, only changing "day"
const diff = DateHelper.diff(
DateHelper.clearTime(schedulerRef.startDate),
value,
'days'
);
schedulerRef.startDate = DateHelper.add(
schedulerRef.startDate,
diff,
'days'
);
}
},
{
type: 'button',
text: 'Today',
icon: 'b-fa-calendar',
onAction() {
const schedulerRef = scheduler.current?.instance;
// change value in datefield, it will update startDate of the scheduler
schedulerRef.tbar.widgetMap.startDate.value = getTimeParams().startDate;
schedulerRef.endDate = getTimeParams().endDate;
}
}
]
}Thanks Alex, it works.
Hello alex, I would like to reopen this topic because I found out that it take me back to the current day but not on the current time, how can I solve this?
Thanks.