A combined date-and-time picker. Use when a single field must capture both a calendar date and a time of day.
Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.
Instead of customdatetimepicker, use… |
For… |
|---|---|
customdatepicker |
A calendar date only, with no time component |
customtimepicker |
A time of day only, with no associated date |
| Two separate fields | Capturing a date range — use one picker per endpoint |
| Prop | Type | Required? | Description |
|---|---|---|---|
label |
string |
required | Visible label. Must be unique across the form. |
required |
boolean |
required | Always false. The expression controls the runtime value. |
defaultRequired |
boolean |
required | true for required fields, false for optional ones. |
placeholder |
string |
optional | Ghost text shown before a value is selected. Default "Select Date". |
minDate |
object |
optional | Earliest selectable date as { "year": N, "month": N, "day": N }. Not a string or ISO date. Default { year: 1900, month: 1, day: 1 }. |
maxDate |
object |
optional | Latest selectable date as { "year": N, "month": N, "day": N }. Not a string or ISO date. Default currentYear + 10. |
addRemoveTimeMinDate |
string |
optional | Runtime offset applied to minDate. Format: "N:d" where N is days (negative = past, positive = future). e.g. "0:d" = today, "-2:d" = 2 days ago. |
addRemoveTimeMaxDate |
string |
optional | Runtime offset applied to maxDate. Same format as addRemoveTimeMinDate. |
allowedDaysOfTheWeek |
number[] |
optional | Days the user may select. Omit to allow all days. |
startHour |
number |
optional | Earliest selectable hour in 24h format. Default 8. |
endHour |
number |
optional | Latest selectable hour in 24h format. Default 16. |
interval |
number |
optional | Minute interval between time slots. Default 30. |
dateFormat |
string |
optional | Display format, e.g. "DD MM YYYY". Default "DD MM YYYY". |
delimeter |
string |
optional | Date part separator, e.g. "/", "-". Default "-". |
eventCode |
string |
optional | Event code for loading restricted/available dates from the backend. |
eventDatesMaxSize |
string |
optional | Maximum number of event dates to load. Must be a string, e.g. "5". |
tooltip |
string |
optional | Help text shown as an icon tooltip next to the label. |
hint |
string |
optional | Help text rendered below the field, always visible. |
hideField |
boolean |
optional | Hides the field and excludes its value from submission. Toggle via expressions["props.hideField"]. |
className |
string |
optional | CSS class applied to the field wrapper. |
Every customdatetimepicker field must include this exact expression, regardless of whether the field is required or optional.
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
}
defaultRequired: true.defaultRequired: false.{
"key": "APPOINTMENT_DATE_TIME",
"type": "customdatetimepicker",
"props": {
"label": "Appointment Date and Time",
"required": false,
"defaultRequired": false
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {}
}
}
{
"key": "APPOINTMENT_DATE_TIME",
"type": "customdatetimepicker",
"props": {
"label": "Appointment Date and Time",
"placeholder": "Select date and time",
"required": false,
"defaultRequired": true
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Appointment Date and Time is required."
}
}
}
{
"key": "APPOINTMENT_DATE_TIME",
"type": "customdatetimepicker",
"props": {
"label": "Appointment Date and Time",
"placeholder": "Select date and time",
"required": false,
"defaultRequired": true,
"minDate": { "year": 2024, "month": 1, "day": 1 },
"addRemoveTimeMinDate": "1:d",
"allowedDaysOfTheWeek": [1, 2, 3, 4, 5],
"startHour": 8,
"endHour": 17,
"interval": 30,
"dateFormat": "DD MM YYYY",
"delimeter": "-"
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Appointment Date and Time is required."
}
}
}
customdatetimepicker when only a date is needed — use customdatepicker instead.customdatetimepicker when only a time is needed — use customtimepicker instead.props.required: true directly — always use defaultRequired: true with the standard expression.validators: { validation: [...] } instead of validation: { messages: {} } for required messages.allowedDaysOfTheWeek with day names (e.g. "Monday") — it must be an array of numbers.startHour/endHour/interval as strings — they must be numbers.minDate/maxDate as ISO strings — they must be { "year": N, "month": N, "day": N } objects.key is UPPER_SNAKE_CASE and unique across the entire formprops.label is present, unique, and correctly casedsections > formly-group > block > customdatetimepickerrequired: false is set (never true)defaultRequired is setexpressions["props.required"] is present with the exact required expressionvalidation.messages.required is present when defaultRequired: trueminDate/maxDate, if used, are objects not stringsaddRemoveTimeMinDate/addRemoveTimeMaxDate, if used, are "N:d" strings not numbersallowedDaysOfTheWeek, if used, is an array of integersstartHour, endHour, and interval are numbers, not strings