Date & Time picker event

[iannet]

Hello everyone, I am using the Date and time picker from Weweb with the display set to show the calendar only. I am trying to find a way to trigger a collection fetch when the user click on the next month or previous month arrow.

I could not find a way to fetch the collection, until the user click on a date from the new month.

The Date and Time picker does not seem to emit an event when changing the month view, but only when you click on a date.

Any idea, how should I proceed ?

Thanks

[Miguel]

Unfortunately, there isn’t a straightforward method to achieve this with the calendar element alone. Below is a solution using CSS and custom JavaScript:

1. Like the picture attached, set a container and add two div

• calendar container - [the calendar element - left box - right box]
• make the box position Absolute, left = 0 for the left, and right = 0 for the right box + width/height 35px

2. Create a variable and bind it to the ‘Init value’ of the calendar, (string format, ex ‘2025-06-08’)

3. Add on click workflow on both boxes and add change variable action and change the variable you created with custom JS + add the collection you wanted fetch… code is below for the custom JS

This will ensure that clicking the arrow will have the same functionally (even thought you are not clicking the calendar arrow) and also call the onClick workflow.

Left Box

// get current date string 
let dateString = variables['5b038f8d-79f6-43d7-9b84-a10e4a48ba98'];


let [year, month, day] = dateString.split('-');
month = Number(month) - 1; 
day = Number(day);

// create a Date object 
let dateObject = new Date(year, month, day);

// adjust the month ( - 1)
dateObject.setMonth(dateObject.getMonth() - 1);

// format the updated date back into 'yyyy-mm-dd' format
let updatedDateString = formatDate(dateObject);

return updatedDateString

// format Date object fucntion
function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, '0'); 
    let day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

Right Box

// get current date string 
let dateString = variables['5b038f8d-79f6-43d7-9b84-a10e4a48ba98'];


let [year, month, day] = dateString.split('-');
month = Number(month) - 1; 
day = Number(day);

// create a Date object 
let dateObject = new Date(year, month, day);

// adjust the month ( + 1)
dateObject.setMonth(dateObject.getMonth() + 1);

// format the updated date back into 'yyyy-mm-dd' format
let updatedDateString = formatDate(dateObject);

return updatedDateString

// format Date object fucntion
function formatDate(date) {
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, '0'); 
    let day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}