Customization Options for the Datepicker - Code Parrots

Knowledge Base

Customization Options for the Datepicker

Article Last Updated: March 4, 2021

As of version 6.3.19 of the Easy Forms plugin, we added greater control over the datepicker. The datepicker will display for any date or birthday fields. For more information about these fields, please see our other knowledge base article.

We use the jQuery UI datepicker; the documentation for that can be found here. We do not expose all of the options so if you think we’re missing one you want then let us know and we can try to add it.

Below is the list of jQuery UI datepicker options that we let you customize with filters:

  • RTL – if the calendar should go right to left – default comes from your WordPress language
  • Month Names – the month names (e.g. “January”) – default comes from your WordPress language
  • Month Names Short – the shortened month names (e.g. “Jan”) – default comes from your WordPress language
  • Day Names – the day names (e.g. “Monday”) – default comes from your WordPress language
  • Day Names Short – the shortened day names (e.g. “Mon”) – default comes from your WordPress language
  • Day Names Min – the letter version for the day names (e.g. “M”) – default comes from your WordPress language
  • First Day – the day of the week the calendar starts from – default comes from your “Week Starts On” option in the General Settings page of your WordPress dashboard
  • Change Month – allows the user to change the month via a dropdown – default is to disallow
  • Change Year – allows the user to change the year via a dropdown – default is to disallow
  • Minimum Date – allows you to restrict the days chosen starting from a date (e.g. cannot pick a date earlier than 5/15/2017) – default is no restriction
  • Maximum Date – allows you to restrict the days chosen ending with a date (e.g. cannot pick a date later than 5/25/2017) – default is no restriction
  • Default Date – allows you to set a date that is highlighted when the calendar is opened – there is no default
  • Number of Months – allows you to control the number of months that are shown at a time – default is one month at a time
  • Show Other Months – allows you to control whether days from other months should fill out the calendar (e.g. the last few days of the previous month and the first few days of the next month). These dates are not selectable – default is to not show these days
  • Select Other Months – this is used in conjunction with show other months; it makes the days from the other months selectable – default is false
  • Show Animation – you can choose an animation for displaying the calendar (e.g. fade in, slide down) – default is no animation
  • Show Button Panel – allows you to show the button panel, which has a button for “Done” and a button for “Today” – default is to not show this panel

There is also one more item you can customize, beforeShowDay, but that one is more complicated so we’ll deal with it below.

Here is an example of how to change the options:

add_filter( 'yikes-mailchimp-datepicker-options', 'yikes_mailchimp_customize_datepicker_options', 10, 2 );

function yikes_mailchimp_customize_datepicker_options( $options, $form_id ) {
    if ( $form_id === 12 ) {
        $options['show_button_panel'] = 1;
        $options['show_anim'] = 'show'; // Example values: 'show', 'slideDown', 'fadeIn'
        $options['show_other_months'] = 1;
        $options['select_other_months'] = 1;
        $options['default_date'] = '07/29/2017';
        $options['max_date'] = '10';
        $options['min_date'] = '-10';
        $options['change_year'] = true;
        $options['change_month'] = true;
        $options['before_show_day'] = "";
    }
        return $options;
}

In this example, we’re changing a host of options, and adding all these changes only to the form with an ID of 12.

There is one more powerful option that you can add, but it’s a bit trickier. This is the showBeforeDay option. It can control whether a given day on the calendar is allowed to be selected or not, and can also add a specific class to the day as well as a tooltip message when the day is hovered over. You’ll need to set a global JavaScript variable assigned to a function. The global variable must be named yikes_mc_before_show_day like in this example here:

add_action( 'yikes-mailchimp-after-form', 'yikes_mailchimp_customize_datepicker', 10, 1 );

function yikes_mailchimp_customize_datepicker( $form_id ) {
    if ( $form_id === 12 ) {
        ?>
            <script type="text/javascript">
                yikes_mc_before_show_day = function( date ){
                    var date_string = date.toString();
                    if ( date_string.includes( 'Mon' ) ) {
                         return Array( true, 'monday-class', 'tooltip-allowed' );
                    } else {
                        return Array( false, 'not-monday-class', 'tooltip-not-allowed' );
                    }
                }
            </script>
        <?php    
    }
}

In this example, we’re restricting every day that’s not Monday. We’re also adding a class, monday-class, to mondays and a tooltip (which will display on hover) of “tooltip-allowed.” For the other days of the week, they will have the not-monday-class class as well as a tooltip-not-allowed tooltip. The resulting calendar looks like:

✕