Date Picker

The Date picker component can be used to select a date or time or both date and time from the user.

Schema

[
    {
        "name": "birthday",
        "meta": {
            "displayName": "Birthday",
            "description": "Enter the date that you were born",
            "displayType": "date",
            "value": "2024-02-14",
            "validation": { "required": true },
            "readOnly": false,
            "htmlProps": {
                "format": "YYYY-MM-DD",
                "disabled": false,
                "views": ["year", "month", "day"],
                "allowDynamic": true
            }
        }
    }
]

Examples

Sample 1: Date Picker

{
    "name": "date-picker",
    "meta": {
        "displayName": "Enter Birthday",
        "description": "Please enter birthday",
        "displayType": "date",
        "value": "2024-02-14",
        "validation": { "required": true },
        "readOnly": false,
        "htmlProps": {
            "format": "YYYY-MM-DD", // Other formats: YYYY-MM-DD, MM-DD-YYYY, DD-MM-YYYY, MM/DD/YYYY, DD/MM/YYYY.
            "disabled": false,
            "views": ["year", "month", "day"]
        }
    }
}

Enter Birthday

​

Please enter birthday

---

---

Form Data:

{}

Sample 2: Time Picker

{
    "name": "time-picker",
    "meta": {
        "displayName": "Enter Start Time",
        "description": "Please enter start time",
        "displayType": "time",
        "value": "23:59:59",
        "validation": { "required": false },
        "readOnly": false,
        "htmlProps": {
            "format": "HH:mm:ss", // Other formats: HH:mm, HH:mm:ss, HH:mm:ss.SSS, HH:mm:ss.SSSZ, HH:mm:ssZ, HH:mmZ
            "disabled": false,
            "views": ["hours", "minutes", "seconds"],
            "timeSteps": { "hours": 1, "minutes": 5, "seconds": 5 }
        }
    }
}

Enter Start Time (Optional)

​

Please enter start time

---

---

Form Data:

{}

Sample 3: Date and Time Picker

{
    "name": "datetime-picker",
    "meta": {
        "displayName": "Enter Date with Start Time",
        "description": "Please enter date and start time",
        "displayType": "datetime",
        "value": "2024-02-14",
        "validation": { "required": false },
        "readOnly": false,
        "htmlProps": {
            "format": "YYYY-MM-DD HH:mm:ss", // Other formats: YYYY-MM-DD HH:mm, YYYY-MM-DD HH:mm:ss, YYYY-MM-DD HH:mm:ss.SSS, YYYY-MM-DD HH:mm:ss.SSSZ, YYYY-MM-DD HH:mm:ssZ, YYYY-MM-DD HH:mmZ.
            "disabled": false,
            "views": undefined,
            "timeSteps": { "hours": 1, "minutes": 5, "seconds": 5 }
        }
    }
}

Enter Date with Start Time (Optional)

​

Please enter date and start time

---

---

Form Data:

{}

Field properties

Name	Description	Type
format	Format of the date when rendered in the input(s). Defaults to localized format based on the used views.	string
views	The view to show in the corresponding datepicker mode (i.e., "year", "month", "day", etc). Defaults to undefined	string[]
timeSteps	The time steps between two time unit options. For example, if timeStep.minutes = 8, then the available minute options will be [0, 8, 16, 24, 32, 40, 48, 56]. Only applicable to displayTypes: datetime and time	Object
displayType	The type of control, which defines how the input is presented (e.g., "date", "time", "datetime", etc.).	string
displayName	The display name of the control, shown as a label or header.	string
disabled	A boolean indicating if the control is disabled.	boolean
readOnly	A boolean indicating if the control is readonly.	boolean

Field Properties - Validation Details

The validation settings within the Textarea component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

Property	Description
required	Boolean value that specifies whether entering data into the field is mandatory.
minLength	Specifies the minimum number of characters allowed in the input.
maxLength	Specifies the maximum number of characters allowed in the input.
min	Specifies the minimum value allowed for number inputs, with support for dynamic values.
max	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
pattern	A regex pattern that the input must match to be considered valid.
validate	A function for custom validation logic, which can return a boolean or an error message.
matchIsValidTel	Boolean value that specifies whether or not to validate the input as a phone number.

Example Usage of Validation Properties

{
    "name": "datetime-picker",
    "meta": {
        "displayName": "Enter Date with Start Time",
        "description": "Please enter date and start time",
        "displayType": "datetime",
        "value": "2024-02-14",
        "validation": {
            "required": true,
            "minLength": 10,
            "maxLength": 300,
            "min": 10,
            "max": 300,
            "pattern": "/^[a-zA-Z0-9 .,'-]+$/"
        },
        "readOnly": false,
        "htmlProps": {
            "format": "YYYY-MM-DD HH:mm:ss", // Other formats: YYYY-MM-DD HH:mm, YYYY-MM-DD HH:mm:ss, YYYY-MM-DD HH:mm:ss.SSS, YYYY-MM-DD HH:mm:ss.SSSZ, YYYY-MM-DD HH:mm:ssZ, YYYY-MM-DD HH:mmZ.
            "disabled": false,
            "timeSteps": { "hours": 1, "minutes": 5, "seconds": 5 }
        }
    }
}