Override the standard date picker

Ken NeffKen Neff Member
edited June 29 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

Comments

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

    Thanks,
    Rajendra
  • Zach McElrathZach McElrath Skuad
    edited December 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 2016
    Thanks Zach!
  • Zach McElrathZach McElrath Skuad
    edited December 2016
    I just made a few changes to the Snippet, but I'm done now.
  • Sam BeckerSam Becker Member ✭✭
    edited February 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 Member ✭✭
    edited May 4
    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 Skuid Mod, Admin 🛠️ 
    edited May 4
    Thanks for sharing this, Conlan!
  • Kaede HollandKaede Holland Member ✭✭
    edited June 25
    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.  
  • Anna WiersemaAnna Wiersema Skuid Mod, Admin 🛠️ 
    • 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.

  • Kaede HollandKaede Holland Member ✭✭


    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 😝)

  • Anna WiersemaAnna Wiersema Skuid Mod, Admin 🛠️ 

    Thanks for sharing, Kaede. It looks like this datepicker code isn't compatible with v2, but it does work with v1 inside and outside of Lightning.

    Specifically the bit that v2 doesn't like is the

    $.datepicker.setDefaults({

    beforeShowDay: onlyWeekends,

    });

Sign In or Register to comment.