Time detaisl

I am looking for a work around to be able to change what a user can chooser for time on a date/time field.

Right now it literally starts at 12 am and seems to take quite a bit of scrolling to get to the later morning hours.

For example; I would like the time options to start at 8:00 am and end at 7:00 pm.

We never do appointments other than during those hours. Sometimes mistakenly our users are picking the wrong am or pm because of the massive amount of scrolling required.

Hi @KimDion38026

A similar question was raised on the below thread:

Also worth noting that instead of scrolling the time picker you can type 1130 for 11:30am or 1700 for 5pm (as examples) irrespective of the time format, militarily (24 hour) or am/pm.
Knack will convert the input when saved.
This should speed up time input too.

The below code is JavaScript, you need to update the view and field values.

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

1 Like

Thank you very much!!!

Here’s what I put in, but perhaps I have a character out of place as it’s not rendering any change…

/time settings for appts/

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

$(’#view_4692-due_date-time’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

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

$(’#view_4692-due_date-time-to’).timepicker({

interval: 30,

minTime: ‘9:00am’,

maxTime: ‘7:00pm’,

});

});

I should have put the code in as unformatted as the quotes get changed and the code doesn’t work. I have used the below and it works fine. Make sure you add the view and field number. Your code only has the field number. My view is 46 and the field is 49 as shown below.

$(document).on('knack-view-render.view_46', function(event, view, data) {
$('#view_46-field_49-time').timepicker({
interval: 30,
minTime: '9:00am',
maxTime: '7:00pm',
});
});
$(document).on('knack-view-render.view_46', function(event, view, data) {
$('#view_46-field_49-time-to').timepicker({
interval: 30,
minTime: '9:00am',
maxTime: '7:00pm',
});
});

2 Likes

ahhhh thank you so much!

One more question about this… I use this field for multiple dates but in some instances (on certain pages) it’s always a one day appointment. Is there any code I can put in for the view to make it a one day thing instead of start to finish?

That worked perfect!

1 Like

Can you not check the “All Day” box.
I’m not a coder so can’t assist otherwise.
Just sharing code I’ve picked up along my journey :grin:

1 Like

OH Ok I’ll look at that. Thanks again for all your help. :smile:

1 Like

Is the code to achieve this any good to you or are you OK now?
Screenshot 2022-06-10 at 10.59.35

So the all day removes the times. But if you just poputlate the first date, the second date defaults to the first date

Correct, it’s an “All day” option so no times and the start and end dates are the same day :+1: