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%2F239938597-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FHbkj8mAE5C7ODrOVDnjJ%252Fuploads%252Fgit-blob-97e766caeb882357349136ffa9711f2724d9ee6b%252Fdate-v14.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=244bcc51&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