Here’s the definition + description for the Custom DateTime Picker Widget:
The Custom DateTime Picker Widget provides a calendar and time-slot interface where users can select both dates and specific time intervals within allowed ranges.
This widget extends the basic date picker by introducing time slot selection, ensuring users pick valid date and time combinations. It supports:
compareDateFields, it enforces logic like “appointment date must be after submission date”.✅ Use cases:
Complete JSON Object
{
"key": "datepickerUHJVg",
"type": "customdatetimepicker",
"props": {
"label": "Date Time Picker",
"disabled": false,
"required": false,
"placeholder": "Date Time Picker",
"startHour": 8,
"endHour": 16,
"interval": 30,
"delimeter": "/",
"minDate": {
"year": 2022,
"month": 1,
"day": 1
},
"maxDate": {
"year": 2025,
"month": 1,
"day": 1
}
},
"validation": {
"messages": {
"required": "Error message for required",
"invalid": "Invalid date provided",
"maxDate": "Maximum Date Error message",
"minDate": "Minimum Date Error message",
"dayOfWeekIsNotAllowed": "Only week days are allowed",
"unavailableSlots": "No slots available for the selected date"
}
},
"validators": {
"validation": [
{
"name": "genericUtilValidator",
"options": {
"prop1": [
"options",
"formState",
"APPLICANT_TYPE"
],
"comparator": "!==",
"prop2": "INDIVIDUAL",
"validationName": "notIndividual"
}
}
]
},
"expressions": {},
"defaultValue": null,
"expressionProperties": {}
}
\
Allowed Custom Properties
Allowed Validations
validator-(n)
invalid
maxDate
minDate
unavailableSlots
dayOfWeekIsNotAllowed
compareDateFields (read more about this in this link)
How to use the CompareDateFields Validation: