Override the standard date picker

  • 2
  • Question
  • Updated 9 months 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 6 years ago

  • 2
Photo of Thaddeus Ward

Thaddeus Ward

  • 736 Points 500 badge 2x thumb
I have the same need. Specifically we need to allow people to navigate to past years much more easily, such as in the case of adding a birth date.
Photo of ktyler

ktyler

  • 9,334 Points 5k badge 2x thumb
Thaddeus,
For a date in the past you can just type the date into the field... ignoring the date picker. For most dates in the past like that you know which date you want... so the advantages of the calendar (seeing which day is a friday, etc) are not as important. Once you enter a date in the past, if you click again on that date the date picker will open to the past month and year of your date.
Photo of Thaddeus Ward

Thaddeus Ward

  • 736 Points 500 badge 2x thumb
Unfortunately, our portal users don't seem to get this. They want to stick with the mouse.
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,346 Points 50k 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.







Photo of Rajendra Rathore

Rajendra Rathore

  • 1,490 Points 1k badge 2x thumb
Hi Zach,

I try that code in my skuid page and its work perfectly .

But that will apply for all date pickers. Can you please let me know how can i override date picker for only single instance of a picker instead of globally override all date picker in  a page ?

Thanks,
Rajendra
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,346 Points 50k badge 2x thumb
To override a single datepicker, you will need to use a Custom Field Renderer Snippet. Here's how that's done:

Add a new JavaScript Resource with location "Inline (Snippet)", named "DatepickerOverride" or something like that, with the following Body:

var field = arguments[0],	
     value = arguments[1];
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (field.mode==='edit'){
var dateInput = field.element.find('input.hasDatepicker');
dateInput.datepicker( "option", "changeMonth", true );
dateInput.datepicker( "option", "changeYear", true );
dateInput.datepicker( "option", "yearRange", "-85:-0" );
dateInput.datepicker("refresh");
}

Then in your Field Editor / Table, change the field / columns' properties to set "Field Renderer" to "Custom (Run a Snippet)", and then for "Render Snippet" put "DatepickerOverride".
(Edited)
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,490 Points 1k badge 2x thumb
Thanks Zach!
Photo of Zach McElrath

Zach McElrath, Employee

  • 54,346 Points 50k badge 2x thumb
I just made a few changes to the Snippet, but I'm done now.
Photo of Sam Becker

Sam Becker

  • 524 Points 500 badge 2x thumb
Thanks for this! I'm trying to make my datepicker inline instead of a pop-up, but since this isn't really an option of the datepicker and instead how it is rendered. How would I change that?