fbpx

Documentation

General

Form integration

Theme

Sync calendar (Import)

Sync calendar (Export)

How to Manually turn an input field into a Date Picker using CSS Selectors

Click here to learn more about the Automatic integration with Contact Form 7 or Divi.

In this tutorial, we’ll see how we can manually integrate the Date and Time Picker with a text input field by using the CSS Selector.

1. Create a new Event in Input WP

  1. Go to the Input WPAdd New.
  2. Input field Title. Then, select the Type.
  3. Adjust any specific settings for the Date and/or Time Picker.
  4. Once selected, click Publish.

2. Copy the CSS Selector

  1. Go to Input WPIntegration
  2. Copy the CSS Selector → Click Save (You can update the CSS Selector too. Make sure you use the dot “.” before the new name).

3. Paste the CSS Selector

  1. Locate the input field you would like to integrate with.
  2. Paste the CSS Selector into the field’s ID. It should look like class class:CSS-SELECTOR

That’s it! You’ve successfully turned an input field into a date picker.

As of now, this has been tested only with Contact Form 7 and Divi.

Regardless, feel free to explore with other tools.

If you have more questions, use the public forum (for the Basic plugin), or submit your support ticket (for PRO users).