Change interval in the time field

I haven’t found this in the forum so I thought I’d add it for reference. Here’s some Javascript code for changing the default interval time in the time field.

Screenshot 2022-04-28 at 10.29.32

`$(document).on(‘knack-view-render.view_xxx’, function(event, view, data) {
$(’#view_xxx-field_yy-time’).timepicker({
interval: 30,
minTime: ‘9:00am’,
maxTime: ‘7:00pm’,
});
});
$(document).on('knack-view-render.view_xxx

‘, function(event, view, data) {
$(’#view_xxx-field_yy-time-to’).timepicker({
interval: 30,
minTime: ‘9:00am’,
maxTime: ‘7:00pm’,
});
});`

3 Likes

Thanks @HarryR - I’ll give it a try….nice one :+1:

Sorry, but I am not familiar with Javascript. I am trying this, but have not been able to make it work. Any help you can provide will be greatly appreciated.

Here are the two fields I would like to apply this code to…

Visit Start Time:
https://builder.knack.com/.../pages/scene_45/views/view_63/form/inputs/rows/0/columns/0/inputs/5

Visit End Time:
https://builder.knack.com/.../pages/scene_45/views/view_63/form/inputs/rows/0/columns/0/inputs/6

This is the code I added to the App Settings/API & Code/JavaScript area.

$(document).on(‘knack-view-render.view_63’, function(event, view, data) {

$(’#view_63-field_5’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

$(document).on(‘knack-view-render.view_63’, function(event, view, data) {

$(’#view_63-field_6’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

Hi Nathaniel, you’re missing the “time” and “time-to” for the timepicker, here’s the code you need:

$(document).on(‘knack-view-render.view_63’, function(event, view, data) {

$(’#view_63-field_5-time’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

$(document).on(‘knack-view-render.view_63’, function(event, view, data) {

$(’#view_63-field_5-time-to’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

And repeat the same for field_6 :slight_smile: Hope that helps!

Thank you very much! :clap:

1 Like