Override the standard date picker

edited June 29, 2020 in Questions
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?

Best Answer


  • edited October 29, 2013
    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.
  • edited June 26, 2020
    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.
  • edited October 29, 2013
    Unfortunately, our portal users don't seem to get this. They want to stick with the mouse.
  • edited October 7, 2016
    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 ?

  • edited December 21, 2016
    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 October 7, 2016
    Thanks Zach!
  • edited December 21, 2016
    I just made a few changes to the Snippet, but I'm done now.
  • Sam BeckerSam Becker ✭✭
    edited February 28, 2019
    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?
  • Conlan O'RourkeConlan O'Rourke ✭✭✭✭
    edited May 4, 2020
    I would like to add a helpful UI/UX addition to this solution is to change the CSS of the unselectable dates (for example greying out the unselectable dates). See the CSS we used successfully below:

    .ui-datepicker-unselectable .ui-state-disabled> .ui-datepicker.ui-widget-content td a, .ui-datepicker.ui-widget-content td span{  background: #d8d8d8;  color: #7f7f7f;  border: none;  cursor: not-allowed; } 

  • Anna WiersemaAnna Wiersema 🛠️ 
    edited May 4, 2020
    Thanks for sharing this, Conlan!
  • Kaede HollandKaede Holland ✭✭✭✭
    edited June 25, 2020
    Wondering how to accomplish an override of datepickers on a skuid page being rendered in lightning using the Skuid Page lightning component? Seems like the Inline Javascript Resource solution (from Zach's post, similar to one I'm working with in my org) is not compatible/will not load properly.  
    • Hey Kaede, can you share the snippet you're using? There are a few in this post and I want to make sure I'm looking at the right one.
    • When you say it's not loading, what exactly is happening? Are you getting an error message?

    Lightning is stricter when it comes to Javascript, so that may be one of the issues at play here.

  • Here's the snippet I copied over into the v2 page I'm building.

    When I preview the page, it is completely blank. Here are the console details:

    When I remove the snippet, the page loads fine (but doesn't work the way I need it to - because I need the date picker to work differently 😝)

  • Hi Kaede, I just wanted to give you an update here: the specific reason that the code isn't working in v2 is that Skuid v2 fields don't use the jQuery UI datepicker.

    I've gone ahead and created a new idea for date picker customization in v2. You can view this idea and vote it up here: https://community.skuid.com/discussion/8015275/date-picker-customization-in-v2

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!