# Time detaisl

**URL:** <https://forums.knack.com/t/time-detaisl/12643>\
**Category:** Ask Developers\
**Created:** [June 6, 2022, 6:59pm UTC](https://forums.knack.com/t/time-detaisl/12643 "2022-06-06T18:59:59Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 6, 2022, 6:59pm UTC](https://forums.knack.com/t/time-detaisl/12643/1 "2022-06-06T18:59:59Z")

</div>

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.

 ![Screen Shot 2022-06-06 at 12.59.42 PM](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/a/a2ff6f473acdbf3d918552e09750854d6eff3b5e.png)

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 6, 2022, 9:13pm UTC](https://forums.knack.com/t/time-detaisl/12643/2 "2022-06-06T21:13:34Z")

</div>

Hi @KimDion38026

A similar question was raised on the below thread:

> [@Change interval in the time field](https://forums.knack.com/t/change-interval-in-the-time-field/12465):
>
> 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’).timepick…

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’,  
});  
});

---

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 6, 2022, 9:34pm UTC](https://forums.knack.com/t/time-detaisl/12643/3 "2022-06-06T21:34:51Z")

</div>

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’,

});

});

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 7, 2022, 3:03pm UTC](https://forums.knack.com/t/time-detaisl/12643/4 "2022-06-07T15:03:26Z")

</div>

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.

```auto
$(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',
});
});

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/2/273375c1cdda34c03a83de05305b92d88c8bafd2.png)

---

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 7, 2022, 3:32pm UTC](https://forums.knack.com/t/time-detaisl/12643/5 "2022-06-07T15:32:10Z")

</div>

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?

 ![Screen Shot 2022-06-07 at 9.30.31 AM](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/5/5a42d30adb0a52b8a374047af3cd2544710cdd0f.png)

---

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 7, 2022, 3:36pm UTC](https://forums.knack.com/t/time-detaisl/12643/6 "2022-06-07T15:36:08Z")

</div>

> [@CarlHolmes](#):
>
> ```auto
> $(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',
> });
> });
> 
> ```

That worked perfect!

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 7, 2022, 3:57pm UTC](https://forums.knack.com/t/time-detaisl/12643/7 "2022-06-07T15:57:26Z")

</div>

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 😁

---

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 7, 2022, 4:08pm UTC](https://forums.knack.com/t/time-detaisl/12643/8 "2022-06-07T16:08:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JohnG](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@JohnG](https://forums.knack.com/u/JohnG)\
**Post date:** [June 10, 2022, 10:03am UTC](https://forums.knack.com/t/time-detaisl/12643/9 "2022-06-10T10:03:23Z")

</div>

Is the code to achieve this any good to you or are you OK now?  
 ![Screenshot 2022-06-10 at 10.59.35](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/7/7c2eecbd83518b8d09d65d7ff15753c5abf781d9.png)

---

<div class="post-metadata">

**Author:** ![KimDion38026](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@KimDion38026](https://forums.knack.com/u/KimDion38026)\
**Post date:** [June 13, 2022, 3:45pm UTC](https://forums.knack.com/t/time-detaisl/12643/10 "2022-06-13T15:45:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CarlHolmes](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/carlholmes/32/2814_2.png) [@CarlHolmes](https://forums.knack.com/u/CarlHolmes)\
**Post date:** [June 13, 2022, 9:11pm UTC](https://forums.knack.com/t/time-detaisl/12643/11 "2022-06-13T21:11:37Z")

</div>

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