Date Picker – Symphonix

Properties

It provides a UI to select the date.

Features

Date Picker (deprecated)

Status

Release Available	Status	Framework Name
2.8	Deprecated	TBC

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

Release Available	Status	Framework Name
2.8.1	Current	TBC

Default Value

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

General

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

Code JSON

"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

Release Available	Status	Framework Name
3.5	Current	Mui

Default Value

General

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

Code JSON

"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.

Code JSON

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

Invalid Date Error Message

Status

Release Available	Status	Framework Name
3.5	Current	Mui

Default Value

General

Mui datepicker only

Code JSON

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

Enable/Disable Date picker Calendar dates

Status

Release Available	Status	Framework Name
3.7	Current	TBC

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.

Note

The first argument to the custom validation function should always be the date value of the date field.

Enable-Disable Date picker Calendar dates1.png

Enable-Disable Date picker Calendar dates2.png

Enable-Disable Date picker Calendar dates3.png