# 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:

![](https://3552609976-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M50Y01TKemmHpSl6feB%2F-M50Y0ZIgvH_dYi7thL3%2F-M50Y8ht2k9S84ZIBbVh%2Fdate-picker-1.png?generation=1587016419930113\&alt=media)

🏆 **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.