Datepicker in text field

In a future version of Quform you will be able to add a Date field as a text field from within the Form Builder, in the mean time it needs to be created manually. This guide will show you how to add a Datepicker to a Single Line Text field with proper date validation.

Step 1

Add a Single Line Text element to the form. Go to the Settings → Advanced tab for this element and add a Regex Validator, enter the code below as the pattern.

!^(1[0-2]|0[1-9])/(3[01]|[12][0-9]|0[1-9])/[0-9]{4}$!

Note: this pattern assumes a US date format of mm/dd/yyyy, for a European date format of dd/mm/yyyy use the pattern below instead.

!^(3[01]|[12][0-9]|0[1-9])/(1[0-2]|0[1-9])/[0-9]{4}$!

Copy the element unique ID to your clipboard while you are there.

Step 2

Add an HTML element to the form (from the “More” tab where you add elements), and enter this code as the content:

1
2
34
5
6
7
8
9
10
11
12

<script>
    jQuery(function ($) {
        $('.iphorm_1_1')            .attr('placeholder', 'mm/dd/yyyy')
            .datepicker({
                dateFormat: 'mm/dd/yy'
            });
 
        var themeUrl = iphormL10n.plugin_url + '/js/jqueryui/themes/smoothness/jquery-ui.min.css';
        $('head').append('<link id="iphorm-jqueryui-theme" rel="stylesheet" href="' + themeUrl + '" type="text/css" />');
    });
</script>

<script>
    jQuery(function ($) {
        $('.iphorm_1_1')
            .attr('placeholder', 'mm/dd/yyyy')
            .datepicker({
                dateFormat: 'mm/dd/yy'
            });

        var themeUrl = iphormL10n.plugin_url + '/js/jqueryui/themes/smoothness/jquery-ui.min.css';
        $('head').append('<link id="iphorm-jqueryui-theme" rel="stylesheet" href="' + themeUrl + '" type="text/css" />');
    });
</script>

• On line 3, replace iphorm_1_1 with the Single Line Text field unique ID from Step 1
• If you want to change the date format, change mm/dd/yyyy on line 4 to the placeholder text that is shown in the field before a date is chosen. On line 6 change mm/dd/yy to the desired date format when the user chooses a date in the datepicker, this is a jQuery UI Datepicker option – see this page for documentation on this.
• If you want to change the Datepicker theme, change the smoothness text to the name of the theme, click Gallery on this page to see the existing themes. You can check the name of the theme within Quform by looking in the folder iphorm-form-builder\js\jqueryui\themes.

Note: for Quform versions before 1.8.0 the line starting with var themeUrl should instead be:

var themeUrl = iphormL10n.plugin_url + '/js/jqueryui/themes/smoothness/jquery-ui-1.8.24.custom.css';

Step 3

For strict validation you can use a Custom validator to validate that the date is a valid date, i.e. so that 31 February cannot be submitted. Add the following code to the wp-content/themes/YOUR_THEME/functions.php file (or create a plugin for it).

1
2
3
4
5
6
7
8
9
10
11
12

function my_date_validator($valid, $value, $element)
{
    list($month, $day, $year) = explode('/', $value);
 
    if (!checkdate($month, $day, $year)) {
        $valid = false;
        $element->addError('This is not a valid date');
    }
 
    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'my_date_validator', 10, 3);

function my_date_validator($valid, $value, $element)
{
    list($month, $day, $year) = explode('/', $value);

    if (!checkdate($month, $day, $year)) {
        $valid = false;
        $element->addError('This is not a valid date');
    }

    return $valid;
}
add_filter('iphorm_element_valid_iphorm_1_1', 'my_date_validator', 10, 3);

• On line 12, replace iphorm_1_1 with the Single Line Text field unique ID from Step 1

Step 4

In Quform, the Datepicker script is only loaded on the page if there is a Date element in any of the active forms. If you do not have any other forms with a Date element in it, you can create a new form with a Date element in it and Save it (you do not need to use the form). Alternatively you can add this code to load the Datepicker script manually.

function my_enqueue_scripts()
 {
 wp_enqueue_script('jquery-ui-datepicker');
 }
 add_action('wp_enqueue_scripts', 'my_enqueue_scripts');