DateRange Picker Plugin Demo

Your Email (required)

Style-1 With Dropdown

Style with Dropdown and Date Format: MM-DD-YYYY

Style-1-2 Without Dropdown

Style Without Dropdown and Short Calendar Label Text - Date Format: DD MMMM, YYYY

Style-2 All `Past Days Disable`

Style Without Dropdown and All Past/Previous Days Disable

Style-3 Show `Alert Box` for Selected date

On Clck Apply button will Show Alert Box for Selected date

Style-4 Set `minDate` - Active Date from the `Next Week`

Style Without Dropdown and Set minDate - Date Active from the Next Week

Style-5 Format: MMMM DD, YYYY and set minDate

Style With Dropdown and Set minDate - Date Active from the Next Week

Style-6 `Limited Time Offer` - Set minDate and maxDate

Set minDate and maxDate - Date Active for a specific Date Range (December Current Year)

Style-6-2 `Limited Time Offer` - Set minDate and maxDate

Set minDate and maxDate - Date Active for a specific Date Range (20 August - 20 September, 2027)

Style-7 Predefined Ranges

Predefined Ranges as Like: Yesterday, Last 7 Days, Last 30 Days, Next 7 Days, This Month, Last Month

Style-8 All Past Day Disable and `Short Calendar Label Text` with Selected Date Alert

All Past Day Disable and Short Calendar Label Text and On date select will Show Alert Box for Selected date

Style-9 All `Past Day` & `Apply Button Disable`

With Dropdown All Past Day Disable and Apply/Cancel Button Disable

Style-10 All `Past Day & Apply Button Disable` with Selected Date Alert

With Dropdown All Past Day Disable and Apply/Cancel Button Disable On date select will Show Alert Box for Selected date

Style-11 Show `Week Numbers` and Week Start day: `Monday`

Calendar Show Number of the Week

Style-12 Date Limit (Limit maximum number of `selected Date`: here 10 Days)

In this example more than 10 days select will not be possible

Style-13 TimePicker `12Hour`

Calendar with 12 hour Clock

Style-13-2 TimePicker `24Hour`

Calendar with 24 hour Clock

Style-14 Calendar in `French` Date Format: DD/MM/YYYY

For Language Change please check Online Documentation

Style-14-2 Calendar in `French` Date Format: DD MMMM, YYYY

For Language Change please check Online Documentation

Style-15 Default value `Blank` and Week Start day: `Saturday`

Style-16 Set `startHour` and `endHour` Only for `24hours` mode

As like Office Opening Hour. Here Opening Hour: 9 - 17

Style-17 Enabled `Hours` Only for `24hours` mode

As like Opening Hours: 8-14 & 17-22

Style-18 Set Booking active `after 16 hours` from `current time` and Set `startHour` and `endHour`

Time enable after 16 hours from the current time and Here Start Hour: 9 and end Hour: 17

Language Dutch (de)

Date Format: DD.MM.YYYY

Please check Documentation:

Live Demo wp-admin Credential:

Style-1 With Dropdown

Style-1-2 Without Dropdown

Style-2 All Past Days Disable

Style-3 Show Alert Box for Selected date

Style-4 Set minDate - Active Date from the Next Week

Style-5 Format: MMMM DD, YYYY and set minDate

Style-6 Limited Time Offer - Set minDate and maxDate

Style-6-2 Limited Time Offer - Set minDate and maxDate

Style-7 Predefined Ranges

Style-8 All Past Day Disable and Short Calendar Label Text with Selected Date Alert

Style-9 All Past Day & Apply Button Disable

Style-10 All Past Day & Apply Button Disable with Selected Date Alert

Style-11 Show Week Numbers and Week Start day: Monday

Style-12 Date Limit (Limit maximum number of selected Date: here 10 Days)

Style-13 TimePicker 12Hour

Style-13-2 TimePicker 24Hour

Style-14 Calendar in French Date Format: DD/MM/YYYY

Style-14-2 Calendar in French Date Format: DD MMMM, YYYY

Style-15 Default value Blank and Week Start day: Saturday

Style-16 Set startHour and endHour Only for 24hours mode

Style-17 Enabled Hours Only for 24hours mode

Style-18 Set Booking active after 16 hours from current time and Set startHour and endHour