> For the complete documentation index, see [llms.txt](https://kb.moomoo.agency/uni-cpo-4-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.moomoo.agency/uni-cpo-4-documentation/usage/options/date-picker.md).

# Date Picker

Adds a possibility to use Date Picker as a form field for your form. It can be of two types: *single date* and *dates range.* For instance, this is how it looks like in *dates range* mode:

![](/files/-M50Y8ht2k9S84ZIBbVh)

🏆 **PRO FUNCTIONALITY**: In addition to the main variable that holds a formatted date (or starting and ending dates splited by dash sign), this Option also has these special vars:

```
{option_slug_start}
{option_slug_end}
{option_slug_duration}
```

The first two variables hold formatted dates. *Start* is for starting date and *end* is for ending date (it is empty when the Option is in *single date* mode). *Duration* variable holds the number of days between starting and ending dates chosen.

**Some tips and tricks:**

1\) In order to set default range for datepicker in range mode use value like "2019-04-05 - 2019-04-09" in "Default (initial) value" setting. Important: preserve all the spaces and date format, use my value as a sample!

2\) If you want to set min/max date to smth like "4 days ahead of today" then try putting smth like this "new Date().fp\_incr(4)" into min or max value settings. Exactly this code sets the date 4 days ahead of today. Change "4" to another integer value to adjust number of days.