Adding a Date Picker to your forms

This method is for legacy forms only! If you use block forms you have built-in date pickers already.

Custom Fields can store different values from your subscribers. If you like to create a Birthday campaign for instance you have to set up a date field. By default, there’s no date picker applied to that field as the look wouldn’t match your theme.

To add a date picker to all of your date fields add this small snippet to your website:

add_filter( 'mailster_form', function( $html, $id, $form ) {

    $theme = 'smoothness';   

    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_style( 'jquery-ui', "//code.jquery.com/ui/1.12.1/themes/{$theme}/jquery-ui.css" );
    wp_add_inline_script( 'jquery-ui-datepicker', "jQuery('.mailster-form-{$id}').find('input.datepicker').datepicker();" );
    
    return $html;
}, 10, 3);

This will add a date picker with the “smoothness” theme to your date fields. You can find and use other themes on this jQuery UI homepage to match the look of your website.

Tagged: