➡️ Instructions
To start using the plugin is very simple and fast. Follow the instructions described below.

  👉 Place an element on your page that you want the date range selector to appear when clicked. In our example we created a group simulating an input field, but you are free to do it however you want. Define for this element an "ID Attribute".

  👉 Now put the element "Fantastic - Date Range Picker" on your page and in your settings panel you will have to fill in the following data:

     ● Element ID: Here you must provide the "ID Attribute" of the previously created element.
     ● Data (Start): Here you must provide the start value of the range selector. If no date is provided, the start date will be the same as the current date.
     ● Date (End): Here you must provide the end value of the range selector. If no date is provided, the start date will be the same as the current date.
     ● Open: Choose here the direction in which the range selector should open. You can choose between 3 options: left, right and center
     ● Label Today: Provide the text of the "Today" option here. Default: Today
     ● Label Yesterday: Provide the "Yesterday" option text here. Default: Yesterday
     ● Label Last 7 Days: Provide here the text of the "Last 7 Days" option. Default: Last 7 Days
     ● Label Last 30 Days: Provide the text of the "30 Days" option here. Default: 30 Days
     ● Label This Month: Provide the text of the "This Month" option here. Default: This Month
     ● Label Custom Range: Provide the text of the "Custom Range" option here. Default: Custom Range
     ● Label Button (Apply): Provide the "Apply" button text here. Default: Apply
     ● Label Button (Cancel): Provide the "Cancel" button text here. Default: Cancel

  👉 That's it, your date range selector will now be working perfectly!

➡️ States

Use element statuses to create the unique layout of your date range. The element has the following status:

  👉 StartDate: This status always starts the value with the value defined in the "Data (Start)" field. But it will always be updated when the user selects another date range.
  👉 EndDate: This status always starts the value with the value defined in the "Date (End)" field. But it will always be updated when the user selects another date range.
  👉 isOpen: This status has only "yes/no" values. If the date range selector is closed its value is "no" if it is open its value is "yes".