I'm trying to make a timesheet with a time in and a time out. I have 2 date/time fields, one that collects the time when a form is started, and the other collects the time when the form is submitted.
I want the minutes value for both fields to be limited to a multiple of 15. (EX. it will always be 8:00, 8:15, 8:30, 8:45, or 9:00)
I'm encountering a problem where the date/time that's collected isn't a multiple of 15, but it still increments by 15. (EX. It will start on 16 then it will increment up to 31)
I also have a text field to calculates the difference between those times using a method learned here which I'm trying not to break: include hours and minutes when calculating difference b... (teamforms.app)
Hi Carlos,
The date/time component uses the open source flatpickr library. This means you can use any options available in the flatpickr documentation. This includes an option called minuteIncrement which will allow you to change the behaviour so that the time interval goes up in 15-minute increments.
Open the settings for you Date/Time component and navigate to the "data" tab
Within the data tab you should see the Flatpickr options property
Paste the following JSON option in to this property
{
"minuteIncrement":15
}
Update:
I just realised that the above solution does not fully solve the issue as it does not prevent the user from manually typing minutes which are not multiples of 15. To fix this you can also add the following JavaScript to the "On Change" property of your date/time components. This will automatically round the time to the nearest 15 minute interval if a user manually types in the minutes.
Navigate to the logic tab of the date/time component
Find and expand the "On Change" property and paste in the following JavaScript code.
const date = moment(instance.getValue())
const minutes = date.minutes()
if(minutes % 15 !== 0) {
const roundedMinutes = Math.round(minutes / 15) * 15
date.minute(roundedMinutes).second(0)
instance.setValue(date.format())
}
This is a screen shot of the final outcome:
Hi Carlos,
The date/time component uses the open source flatpickr library. This means you can use any options available in the flatpickr documentation. This includes an option called minuteIncrement which will allow you to change the behaviour so that the time interval goes up in 15-minute increments.
Open the settings for you Date/Time component and navigate to the "data" tab
Within the data tab you should see the Flatpickr options property
Paste the following JSON option in to this property
{
"minuteIncrement":15
}
Update:
I just realised that the above solution does not fully solve the issue as it does not prevent the user from manually typing minutes which are not multiples of 15. To fix this you can also add the following JavaScript to the "On Change" property of your date/time components. This will automatically round the time to the nearest 15 minute interval if a user manually types in the minutes.
Navigate to the logic tab of the date/time component
Find and expand the "On Change" property and paste in the following JavaScript code.
const date = moment(instance.getValue())
const minutes = date.minutes()
if(minutes % 15 !== 0) {
const roundedMinutes = Math.round(minutes / 15) * 15
date.minute(roundedMinutes).second(0)
instance.setValue(date.format())
}
This is a screen shot of the final outcome: