Umbraco Forms
CMSCloudHeartcoreDXP
15.latest
15.latest
  • Umbraco Forms Documentation
  • Legacy Documentation
  • Release Notes
  • Installation
    • Installing Umbraco Forms
    • Licensing
  • Upgrading
    • Upgrading Umbraco Forms
    • Version Specific Upgrade Notes
  • Editor
    • Creating a Form - The basics
      • Form Settings
      • Form Advanced Options
      • Form Information
      • Overview Of The Field Types
        • Date
        • File Upload
        • reCAPTCHA V2
        • reCAPTCHA V3
      • Setting-up Conditional Logic on Fields
    • Attaching Workflows
      • Workflow Types
    • Viewing And Exporting Entries
    • Defining And Attaching Prevalue Sources
      • Prevalue Source Types Overview
  • Developer
    • Property Editors
    • Preparing Your Frontend
    • Rendering Forms
    • Rendering Forms Scripts
    • Themes
    • Custom Markup
    • Email Templates
    • Working With Record Data
    • Umbraco Forms in the Database
    • Extending
      • Adding A Type To The Provider Model
        • Setting Types
      • Adding A Field Type To Umbraco Forms
        • Excluding a built-in field
      • Adding A Prevalue Source Type To Umbraco Forms
      • Adding A Workflow Type To Umbraco Forms
      • Adding An Export Type To Umbraco Forms
      • Adding a Magic String Format Function
      • Adding A Server-Side Notification Handler To Umbraco Forms
      • Adding a Validation Pattern
      • Customize Default Fields and Workflows For a Form
    • Configuration
      • Forms Provider Type Details
    • Webhooks
    • Security
    • Magic Strings
    • Health Checks
      • Apply keys and indexes
      • Apply keys and indexes for forms in the database
    • Localization
    • Headless/AJAX Forms
    • Block List Labels
    • Field Types
    • Storing Prevalue Text Files With IPreValueTextFileStorage
  • Tutorials
    • Overview
    • Creating a Contact Form
    • Creating a Multi-Page Form
Powered by GitBook
On this page
  • Date Picker
  • Date Picker configuration of the year range

Was this helpful?

Edit on GitHub
Export as PDF
  1. Developer

Field Types

PreviousBlock List LabelsNextStoring Prevalue Text Files With IPreValueTextFileStorage

Last updated 5 months ago

Was this helpful?

Umbraco Forms comes with a number of Field Types to allow you to request certain data in the forms that you design & build. This documentation is to guide specific details about field types that we ship that require some detail in how they work.

Date Picker

The date picker uses a front-end library called to display a UI to pick dates from. We have added the support for the Pikaday date picker to be localized based on the page the form is rendered on. This displays the picked date in the correct locale. In JavaScript, we update a hidden field with a standard date format. This is done to send the date to the server, ensuring the record submission is stored in a standard format. This is to avoid locale mixing up dates.

To achieve this a new Razor partial view is included /Views/Partials/Forms/DatePicker.cshtml. Once on a page with a form that includes a Date Picker, it also includes the MomentJS library to assist with date locale formatting. Additionally, there are appropriate changes to Pikaday.js to support the locales. If you wish to use a different DatePicker component this is the file that you would customize to your needs.

Date Picker configuration of the year range

The DatePicker has one configuration setting to control the number of year shown. The default is 10 years which makes the picker unusable for picking birth dates.

Go to your appsettings.json and add:

  "Umbraco": {
    "CMS": {
        ...
    },
    "Forms": {
      "FieldTypes": {
        "DatePicker": {
          "DatePickerYearRange": 12
        }
      }
     }
    }

You can then change the DatePickerYearRange to a higher number (for example 100).

PikaDay.js