Override the standard date picker

  • 2
  • Question
  • Updated 3 years ago
  • Answered
For many Date fields, I need to override the standard date picker with my own custom date picker. Has anyone done this? If so, sample code?
Photo of Ken Neff

Ken Neff

  • 408 Points 250 badge 2x thumb

Posted 5 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Official Response
Skuid's Datepicker is based on the jQuery UI Datepicker, and as such can be customized using the jQuery UI Datepicker API, globally for all Datepicker instances in a particular Skuid page, or for a particular Datepicker instance.

Example Use Case:
-Show Month picker
-Show Year Picker, showing 85 Years ago to the Present Year

To do this in a particular Skuid Page, add a new JavaScript Resource, of type "Inline", with this as its content:


(function(skuid){

var $ = skuid.$;

// Global datepicker settings override for this page
$.datepicker.setDefaults({
changeMonth: true,
changeYear: true,
yearRange: "-85:-0"
});

})(skuid);


This will affect all Datepickers on the current Skuid Page, as well as in any included Skuid Pages.