e-addons

Share

ic Pro Form Extended bwe-ProForm Extend

DateTime Picker Extension

If you’re not happy with the Elementor Pro default date format, you can count on e-addons.

Our Date Picker Extension allows you to assign a different format, language, theme and style to date fields within Elementor forms.

Choose from different date/time format, themes and language to assign to the DateTime Picker field within your form
Field Date Format

DateTime Picker Extension

For every Date Field type you can find  and enable this option in the Form > Content > Form Fields > Your Field > e-addons Tab.

Date Format
You can define your custom format compatible with FlatPickr datepicker script (used by default).
The date will be display and also submitted in this format.

NOTE: for a more secure control on the inserted date you can use it in combination with Pattern.
This is the regex compatible with the default date format: “[0-9]{4}-[0-9]{2}-[0-9]{2}”

Inline Calendar

Display a full width calendar always visible, for a simple date selection.

Hide Date Input
Optionally you can hide the main input date, because the selected date is highly evidenced on the calendar

elementor datetime inline calendar
elementor datetime range

Date Range

Create 2 separate Date Fields, then set on From field the related  Date Range Field (“To”) to generate the Range.

Add N days difference

Add N difference days between Start and End fields based on Start initial date

elementor date picker add days
date month

Month Selector

Select only the Month instead a specific day, you can choose from:

  • None, the standard behavior with day selection
  • Shorthand Month, the month abbreviation
  • Full Month, the month complete name

Dayweek limitation

Limit the week days available using the abbreviate day name, once per line

elementor date week
function dates

Specific dates and functions

List statically all the wanted available dates in the Options field, with single dates or intervals (separated by pipe), something like:

  • 2021-09-12|2021-09-26
  • 2021-10-11
  • 2022-11-06|2022-11-26
  • 2022-01-01

if mix-max dates are filled the Options dates will be excluded

Enable dynamically dates with a custom function, using the “date” variable, something like:

  • date.getMonth() % 2 === 0 && date.getDate() < 15
  • date.getDate() !== 1 && date.getDate() !== 15

Date Time Internationalization

New options available on:
Elementor > Settings > Integrations  > DatePicker

elementor integration flatpickr datetime

Language
Translate Months and Days of the week
of your current site locale.

Time 24hr
Force the use of the 24hr or set automatically based on your Time Format in WordPress general Settings.

Week Numbers
Enable the option to display the week number in a column left to the calendar.

Mobile Support
When flatpickr detects a mobile browser, it turns the date input into a native date/time/datetime input.
Native datetime selection provides a UX that’s familiar to the user and is superior to most web-based solutions.

Themes
Change the look of the DateTime UI box with native themes provided by Flatpickr.

DEMO

Date Format

Inline Calendar

Enable/Disable Selected dates

24h Time