Hide "All day" and "Repeat" options on Date/Time field?

API & Custom Code Ask Developers
1

Hi,

I am trying to set up basic time tracking for employees, and would like to be able to use the calendar function with the time entries.  I've tried many different ways to set this up but am running into problems.  The best setup would be a single date, with start and end time, and with ability to see the entry on a calendar.  

I am using a DATE/TIME field (with repeat and end times enabled) on a form, but would like to be able to HIDE the "All Day" and "Repeat" checkbox options.  My javascript and CSS skills are not so great, so I'm hoping someone with better coding skills could provide some help.  Would also love to hide the second date field.  Image below shows what I'm trying to do.  Any help is greatly appreciated!  :)

 

2

I would also really like to know. 

3

Did anyone find a solution to this by any chance? Thanks so much!

4

I am no programmer, so this is probably affecting my whole app, but it works to add this to the Custom CSS section. It will hide the repeat checkbox and label.

input.checkbox, span.repeat-label {
display: none;
}

I'm afraid it probably hides all of the checkboxes.

Does anyone know how to narrow this to just the calendar repeat checkbox? Or to only hide it on a specific scene number?

5

Insert the following Javascript into API & Code under your app settings to hide “All day” and “Repeat…” check boxes for a specific form:

// Remember to replace view_1 with your view key

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

// Hide the entire “Repeat” checkbox and label,

// since the checkbox is a child of the label

$(“label:contains(‘Repeat’)”).hide();

});

3 Likes
6

Another way is to insert into your CSS (changing my ‘99’ with your field number):

#kn-input-field_99 > div:nth-child(3)
{visibility:hidden}

I am also trying to extend this functionality to hide the time fields so it only shows the two date fields but it didn’t work repeating the snippet I used for each element:

#kn-input-field_99 > div:nth-child(3)
{visibility:hidden}
#kn-input-field_99 > div:nth-child(9)
{visibility:hidden}
#kn-input-field_99 > div:nth-child(10)
{visibility:hidden}

Any suggestions to achieve this using wither method?
Thanks

7

Here’s how you can hide the “All Day” and “Repeat” option for a specific date field across your whole app (replace xyz with your date field ID):

/* Hide the specified elements for field_xyz*/
#kn-input-field_xyz > div:nth-child(3) > label:nth-child(1),
#kn-input-field_xyz > div:nth-child(3) > label:nth-child(2) {
visibility: hidden;
}

Element 1 is the “All Day” and Element 2 is the “Repeat”

1 Like