Join the Team Forms community

Updated 4 months ago

limit date/time field 'minutes' to multiples of 15

At a glance
The community member is trying to create a timesheet with a time in and time out field, where the minutes value should be limited to a multiple of 15 (e.g. 8:00, 8:15, 8:30, etc.). However, they are encountering an issue where the date/time collected is not a multiple of 15, but it still increments by 15. The community member also has a text field to calculate the difference between the time in and time out, which they are trying not to break. In the comments, another community member provides a solution. They suggest using the minuteIncrement option in the open-source flatpickr library, which is used by the date/time component, to set the time interval to 15-minute increments. However, they note that this solution does not prevent the user from manually typing in minutes that are not multiples of 15. To fix this, they provide additional JavaScript code that can be added to the "On Change" property of the date/time components, which will automatically round the time to the nearest 15-minute interval if the user manually types in the minutes. <answer>The community member is trying to create a timesheet with a time in and time out field, where the minutes value should be limited to a multiple of 15. Another community member provides a solution using the flatpickr

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)




Marked as solution

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.

  1. Open the settings for you Date/Time component and navigate to the "data" tab

  2. Within the data tab you should see the Flatpickr options property

  3. Paste the following JSON option in to this property

Plain Text
{
  "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.

  1. Navigate to the logic tab of the date/time component

  2. Find and expand the "On Change" property and paste in the following JavaScript code.

JavaScript
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:

View full solution
E
1 comment

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.

  1. Open the settings for you Date/Time component and navigate to the "data" tab

  2. Within the data tab you should see the Flatpickr options property

  3. Paste the following JSON option in to this property

Plain Text
{
  "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.

  1. Navigate to the logic tab of the date/time component

  2. Find and expand the "On Change" property and paste in the following JavaScript code.

JavaScript
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: