The Custom Date Picker Widget is a calendar-based input field that allows users to select dates (and optionally time) while enforcing rules such as ranges, allowed weekdays, event availability, and custom formatting.
This widget ensures precise and controlled date entry by combining visual calendar selection with validations. It supports absolute min/max dates, relative date ranges (e.g., today + 5 days), restricted weekdays, custom formats, and event-based availability. With advanced validations like compareDateFields, it can enforce relationships between multiple date fields (e.g., end date must be after start date).
Typical use cases include:
Complete JSON Object
{
"key":"InputKey",
"type":"customdatepicker",
"props":{
"label":"Input Name",
"required":true,
"placeholder":"Input Placeholder",
"addRemoveTimeMinDate": "0:d",
"addRemoveTimeMaxDate": "5:d",
"dateFormat": "DD MM YYYY",
"allowedDaysOfTheWeek": [1,2,3,4,5],
"delimeter": "/",
"minDate":{
"year":2022,
"month":1,
"day":1
},
"maxDate":{
"year":2023,
"month":4,
"day":20
},
"eventCode": "MARRIAGE_DECLARATION_BOOKING_DAYS",
"eventDatesMaxSize": "5"
},
"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"
}
}
}
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: