Flatpickr
Lightweight and powerful datetime picker.
Official documentation
For more detailed information and examples, see the official documentation: Flatpickr documentation.
How to use?
To add hs.range-datepicker.js
in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin.
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
Copy-paste the following <script>
near the end of your pages under JS Front to enable it.
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
Basic example
Basic example that highlights today's day.
Range example that shows starting and ending highlighted dates.
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-rp-wrapper=""
.
Attribute | Description |
---|---|
|
If the value is not empty, then indicates the container where the drop-down block with the calendar will be placed. If the value is empty, then the drop-down box will be placed immediately after the closing body tag. |
|
If set to true , then the calendar will behave like a static block in the content. |
|
Type of calendar. Valid values are:
single
|
|
Date format. |
|
The default date (placeholder). |
|
Selected dates. Such dates will be highlighted in styles. |
|
Determines from which day the week begins. |
|
Short names for the days of the week. |
|
Separator which, if data-rp-type="range" is set to indicate 2 dates in the placeholder. |
|
Markup button that shows the next month. |
|
Markup button that shows the previous month. |
|
Performs functions inside when initializing the calendar. By default, a function is assigned that adds the dates specified in the data-rp-event-dates to the dates. |