Date Picker

Properties

It provides a UI to select the date.

Features

Date Picker (deprecated)

Status

Default Value

"fieldUi": { "fieldType": "datepicker", "label": …}

General

The following formats of date are Tested:

• yyyy-MM-dd

• MM/dd/yyyy

• dd/MM/yyyy

Select a date range

• Date picker by default has a wide range. For example, you can add a date in the year 5555.

• You can specify startYear and endYear to configure the year range.

  "options": { "startYear": 1969, "endYear": 2050 },

Set date Locale

You can set dateLocale in global settings "dateLocale": "en-US"

Available date locales are:

• zh-CN, Chinese Simplified

• nl, Dutch (Netherlands)

• en-CA,

• en-US (default),

• fi, Finnish

• fr, French

• de, German

• it, Italian

• ja, Japanese

• ru, Russian

Datepicker Enhancement

Status

Default Value

"fieldUi": { "fieldType": "datepicker", "label": …}

General

Datepicker field now can accept all the options supported by react-datepicker.

"fieldUi": {
  "fieldType": "datepicker",
  "label": "Date of Birth",
  "format": {
    "options": {
      "datePattern": "yyyy-MM-dd",
      "minYear": 1970,
      "showMonthDropdown": true,
      "showYearDropdown": true,
      "dropdownMode": "select"      }}}

Mui Date Picker

Status

Default Value

General

The datepicker is a new fieldType for Mui, which is available across browsers, including Safari.

"fields": [{
  "id": "...",
  "fieldName": "Birthdate",
  "fieldUi": {
    "fieldType": "datepicker",
    "label": "Birthdate",
    "placeholderText": "mm/dd/yyyy",
    "format": {
      "options": {
        "datePattern": "MM/dd/yyyy"        
      }
      
    }
    
  }
}...

• datePattern specifies the date format in the input field. datePattern uses the date-fns format

  https://date-fns.org/v2.16.1/docs/format

• datePattern can be set in the global settings

• disableFuture and disablePast are supported by the datepicker.

"format": {
  "options": {
    "datePattern": "MM/dd/yyyy",
    "disableFuture": true
    
  }
}

Invalid Date Error Message

Status

Default Value

General

Mui datepicker only

{
  "fieldName": "Birthdate",
  "fieldUi": {
    "fieldType": "datepicker",
    "messages": {
      "invalidDateText": "Invalid birthdate"    }
  }
}

Enable/Disable Date picker Calendar dates

Status

Default Value

General

We can use the in-built validations like $date, $age, or write our own custom validation logic to enable/disable calendar dates.