Date
The date picker uses a front-end library called Pikaday to display a UI to pick dates.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F4176286366-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FCjGdZc3v7BTcqZFEVbeM%252Fuploads%252Fgit-blob-88438cf1128675169885dd879d4629fd9b028225%252Fdate-picker.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=af32a36a&sv=1)
Pikaday date picker can be localised based on the page the Form is rendered on.
The date picker displays the picked date in the required locale. Using JavaScript, a hidden field is updated with a standard date format to send to the server for storing record submissions. This avoids the locale mixing up the dates.
To achieve localized date, a Razor partial view is included at /Views/Partials/Forms/Themes/default/DatePicker.cshtml
.
The DatePicker.cshtml includes the moment-with-locales.min.js
library to help with the date locale formatting and the appropriate changes to Pikaday to support the locales. If you wish to use a different DatePicker component, edit the DatePicker.cshtml file as per your needs.
Configure the Year range
The Date picker has a configuration setting to control the number of years shown in the picker. The default value is 10 years.
You can configure the settings in the appSettings.json
file:
Update DatePickerYearRange
to a higher number (for example: 100) to increase the numbers of years available in the Date picker.
Last updated