top of page

Customise Date Picker

Updated: Nov 3


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)

    });

  });



23 views0 comments

Recent Posts

See All

コメント

5つ星のうち0と評価されています。
まだ評価がありません

評価を追加
bottom of page