Sign up to Knack for Free - Affiliate Link
Use the code below to customise the Start and End Times on the calendar picker, as well as the intervals. You can also hide the All Day and Repeat options, and update the calendar to display months and years!
Add to JavaScript
// Change Start and End times and Interval// Event listener for when the view with ID "view_8" is rendered
$(document).on('knack-view-render.view_8', function (event, view, data) {
// Initialise the timepicker for the start time input field
$('#view_8-field_475-time').timepicker({
step: 30, // Set the time stepping to 30 minutes
minTime: '9:00am', // Set the minimum selectable time to 9:00 AM
maxTime: '7:00pm', // Set the maximum selectable time to 7:00 PM
});
});
// Event listener for when the view with ID "view_8" is rendered
$(document).on('knack-view-render.view_8', function (event, view, data) {
// Initialise the timepicker for the end time input field
$('#view_8-field_475-time-to').timepicker({
step: 10, // Set the time stepping to 10 minutes
minTime: '7:00am', // Set the minimum selectable time to 7:00 AM
maxTime: '7:00pm', // Set the maximum selectable time to 7:00 PM
});
});
Add to CSS
/* Hide All Day & Repeat */#view_8 #kn-input-field_475 > div:nth-child(3) > label:nth-child(1), /* Selects the first label inside the third div of field_475 in view_8 */
#view_8 #kn-input-field_475 > div:nth-child(3) > label:nth-child(2) { /* Selects the second label inside the third div of field_475 in view_8 */
visibility: hidden; /* Hide the specified labels without removing the space they occupy */
}
Add to JavaScript
// Date picker to allow for Month and Year
// Event listener for when any page is rendered in the Knack application
$(document).on('knack-page-render.any', function (event, scene) {
// Set default options for the jQuery datepicker
$.datepicker.setDefaults({
changeMonth: true, // Allow the user to change the month in the datepicker
changeYear: true, // Allow the user to change the year in the datepicker
yearRange: 'c-10:c+40' // Set the range of years available for selection (10 years before current year to 40 years after)
});
});
Comments