Skip to main content
Kinetic Community

Adjusting Settings on the Out of the Box Calendar-Date Picker

How to adjust settings, such as min or max date on the out of the box calendar/date picker in Kinetic Request CE.

You may wish to adjust the settings on the out of the box calendar/date picker. Various options include:

  • Setting a minimum date
  • Setting a maximum date
  • Setting the picker to default to a date other than today (This does not default the field)
  • Excluding certain dates
  • Excluding certain days of the week
  • Setting a different day as the "start of the week"
  • Allowing only certain times (for a date/time field), for example only the top of the hour

This is done by entering the following code (that references the date field) into an on load event (Custom Action) on the page:

// Find the field element (for date fields, this returns the hidden input element that stores the actual data)
var dateFieldElement = K('field[DateFieldName]').element();
// Get the visible input which has the calendar widget
// You have to use the application version of jQuery since that's where the calendar widget lives
var dateFieldCalendarInput = KD.noConflict.$(dateFieldElement).next("input");

// Get the instance of the calendar widget from its jQuery data object and set the options you want
dateFieldCalendarInput.data("xdsoft_datetimepicker").setOptions({
    //settings you want to change here, from documentation found on http://xdsoft.net/jqplugins/datetimepicker
})

There are a few important notes: 

  • The date format used in Kinetic Request CE date picker is MM/DD/YYYY and it is important that it remain that way (for functionality). This means you will want to set the dates using that format when setting min/max/allowed/excluded dates. See examples below.
  • There have been some issues experienced attempting to use disableWeekDays, so an alternative is presented in the examples below that should provide the same result.
  • There have been some issues experienced with certain formats of the defaultDate. The specific date or date function formats should work (see example below for date function example).
  • The examples below can all be combined and are only split apart for clarity. Min and Max days have been combined to show one example of combined config options.

Some examples are as follows:

Setting default date to next week:

// Find the field element (for date fields, this returns the hidden input element that stores the actual data)
var dateFieldElement = K('field[Start Date]').element();

// Get the visible input which has the calendar widget
// You have to use the application version of jQuery since that's where the calendar widget lives
var dateFieldCalendarInput = KD.noConflict.$(enddateFieldElement).next("input");

//Setup default day to use
var defaultDay = new Date();
defaultDay.setDate(tomorrow.getDate() + 7);

// Get the instance of the calendar widget from its jQuery data object and set the options you want
enddateFieldCalendarInput.data("xdsoft_datetimepicker").setOptions({
   defaultDate: defaultDay
})

Setting min date to yesterday & max day 5 days from now:

// Find the field element (for date fields, this returns the hidden input element that stores the actual data)
var dateFieldElement = K('field[Beginning Date]').element();

// Get the visible input which has the calendar widget
// You have to use the application version of jQuery since that's where the calendar widget lives
var dateFieldCalendarInput = KD.noConflict.$(dateFieldElement).next("input");

// Get the instance of the calendar widget from its jQuery data object and set the options you want
dateFieldCalendarInput.data("xdsoft_datetimepicker").setOptions({
    minDate: "-01/01/1970",
    maxDate: "+01/05/1970"
})

Disabling weekends:

function disableWeekend(date) {

    var day = date.getDay();
    // If day == 0 or 6 then it is a Weekend
    if (day == 0 || day == 6) {

    return [false] ; 

    } else { 

    return [true] ;
    }
  }
  
  // Find the field element (for date fields, this returns the hidden input element that stores the actual data)
var dateFieldElement = K('field[Beginning Date]').element();

// Get the visible input which has the calendar widget
// You have to use the application version of jQuery since that's where the calendar widget lives
var dateFieldCalendarInput = KD.noConflict.$(dateFieldElement).next("input");

// Get the instance of the calendar widget from its jQuery data object and set the options you want
dateFieldCalendarInput.data("xdsoft_datetimepicker").setOptions({
    beforeShowDay: disableWeekend,
})

Setting Monday to be start of the week:

// Find the field element (for date fields, this returns the hidden input element that stores the actual data)
var dateFieldElement = K('field[Beginning Date]').element();

// Get the visible input which has the calendar widget
// You have to use the application version of jQuery since that's where the calendar widget lives
var dateFieldCalendarInput = KD.noConflict.$(dateFieldElement).next("input");

// Get the instance of the calendar widget from its jQuery data object and set the options you want
dateFieldCalendarInput.data("xdsoft_datetimepicker").setOptions({
    dayOfWeekStart: 1,
})