DateInput - smbc-digital/form-builder GitHub Wiki

Refer to Stockport Design System for styling information and reference images

DSL properties

Property	Type	Required	Default Value	Description
QuestionId	string	✔️	❌	Unique question id allowed charatcers are [a-zA-Z] only
Label	string	✔️	❌	Label associated with the question
StrongLabel	bool	❌	true	Display 'Day/Month/Year' labels strongly
LabelAsH1	bool	❌	false	Display Label as h1 not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
Warning	string	❌	❌	Warning which appears above the input NOTE: Only use one of Warning, Hint or IAG
Hint	string	❌	❌	Hint which appears above the input NOTE: Only use one of Warning, Hint or IAG
IAG	string	❌	❌	Inset text to appear below the Label. NOTE: Only use one of Warning, Hint or IAG
Optional	bool	❌	false
OptionalIf	Condition	❌	❌	A condition that can be used to determine if the element is optional by comparing it to an earlier answer
RestrictFutureDate	bool	❌	false	Prevents user from entering a date in the future
RestrictPastDate	bool	❌	false	Prevents user from entering a date in the past
RestrictCurrentDate	bool	❌	false	Prevents user from entering todays date
IsDateBefore	string	❌	❌	Allows user the specify the question id of another field to validate against, the date provided in the current element must be BEFORE the date in the referenced element, the specified field must be of type DatePicker or DateInput
IsDateBeforeAbsolute	string	❌	❌	Allows user the specify a date (dd/mm/yyyy) to validate against, the date provided in the current element must be BEFORE the specified date
IsDateBeforeValidationMessage	string	❌	✔️	Allows user the specify a custom message for IsDateBefore and IsDateBeforeAbsolute validations
IsDateAfter	string	❌	❌	Allows user the specify the question id of another field to validate against, the date provided in the current element must be AFTER the date in the referenced element, the specified field must be of type DatePicker or DateInput
IsDateEqualityAllowed	boolean	❌	false	Allows the user to enable dates to be equal for IsDateBefore and IsDateAfter validations
IsDateAfterAbsolute	string	❌	❌	Allows user the specify a date (dd/mm/yyyy) to validate against, the date provided in the current element must be AFTER the specified date
IsDateAfterValidationMessage	string	❌	✔️	Allows user the specify a custom message for IsDateAfter and IsDateAfterAbsolute validations
CustomValidationMessage	string	❌	❌	Set a custom validation message for when user doesn't enter a date
ValidationMessageInvalidDate	string	❌	❌	Set a custom validation message for when a user enters an invalid date
ValidationMessageRestrictFutureDate	string	❌	❌	Set a custom validation message for when a user enters a date in the future
ValidationMessageRestrictPastDate	string	❌	❌	Set a custom validation message for when a user enters a date in the past
ValidationMessageRestrictCurrentDate	string	❌	❌	Set a custom validation message for when a user enters todays date
UpperLimitValidationMessage	string	❌	❌	Set a custom validation message for when a user enters a year greater than the set upper limit
TargetMapping	string	❌	❌	Used for custom object mapping when creating submit data (more info about target mapping)
SummaryLabel	string	❌	❌	Change the label associated with this input on the summary
OutsideRange	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' to allow user to input date after that date range from current date
WithinRange	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' to allow user to input date within that date range from current date
IsFutureDateAfterRelative	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' followed by 'ex' or 'in' depending of if the date needs to be inclusive or exclusive. e.g. "2-d-ex" would restrict a user entering a date that is within 2 days of the current date going forward. Including the current date
IsFutureDateBeforeRelative	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' followed by 'ex' or 'in' depending of if the date needs to be inclusive or exclusive. e.g. "2-d-ex" would restrict a user entering a date that is after 2 days of the current date going forward. Including the current date.
IsPastDateBeforeRelative	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' followed by 'ex' or 'in' depending of if the date needs to be inclusive or exclusive. e.g. "2-d-ex" would restrict a user entering a date that is within 2 days of the current date going backwards. Including the current date.
IsPastDateAfterRelative	string	❌	❌	Set x days/ months / years follow by '-d' or '-m' or '-y' followed by 'ex' or 'in' depending of if the date needs to be inclusive or exclusive. e.g. "2-d-ex" would restrict a user entering a date that is older than 2 days of the current date going backwards. Including the current date.
ValidationMessageIsPastDateAfterRelative	string	❌	❌	Validation message for IsPastDateAfterRelative

Date input examples

DS Json for date input:

    {
        "Type": "DateInput",
        "Properties": {
            "QuestionId": "passportIssued",
            "Label": "When was your passport issued?",
            "Hint": "For example, 12 11 2007",
            "RestrictFutureDate": true,
            "RestrictCurrentDate": true,
            "CustomValidationMessage": "A date is required, please enter a date",
            "ValidationMessageRestrictFutureDate": "Date in the future not allowed, please enter a date in the past",
            "ValidationMessageRestrictCurrentDate": "Today's date not allowed, please enter a date in the past",
            "UpperLimitValidationMessage": "Year upper limit set to 2120",
            "IsDateBefore": "anOtherQuestion",
            "IsDateBeforeAbsolute": "01/01/2020",
            "IsDateBeforeValidationMessage": "Please make sure that the provided date is before the date passport was issued",
            "IsDateAfter": "anOtherQuestion",
            "IsDateBeforeAbsolute": "01/01/2020",
            "IsDateAfterValidationMessage": "Please make sure that the provided date is before the date passport was issued",
            "IsDateEqualityAllowed": true,
            "IsFutureDateAfterRelative":"2-d-ex",
            "ValidationMessageIsFutureDateAfterRelative":"Date is too soon"
        }
    }