Allow the user to choose the date of a given item with a clean, useful dropdown.

For proper styling, use the input in conjunction with the flatpickr class on the input itself. The rest is handled through the JS and data-bind

<input class="input flatpickr flatpickr-input form-control" placeholder="Select a date..." type="text" readonly="readonly">

To utilize, Insert a datepicker-specific atom partial called "DatepickerAtom" via an Html Helper Extension method.

@Html.DatepickerAtom(DatePickerTypeEnum.Date, "my-date-picker", "$root.date", calendarIcon: true)

Datepicker Atom requires you specify a type via a "DatepickerTypeEnum" specification like "DatepickerTypeEnum.Date". You will also need to provide an Id and the Knockout property for the date, however, all other parameters are optional. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.DatepickerAtom(DatePickerTypeEnum.Date, "my-date-picker", "$root.date", calendarIcon: true)