DatePicker

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 search term
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
CustomValidationMessage	string	❌	❌	Set a custom validation message for when a user does not pick a date.
TargetMapping	string	❌	❌	Used for custom object mapping when creating submit data
StrongLabel	bool	❌	true	Labels associated to inputs are strong
LabelAsH1	bool	❌	false	Display the input's label as a h1 and not a label (if this is set to true, HideTitle in the Page properties should also be set to true)
RestrictFutureDate	bool	❌	false	Prevents users from entering a date in the future
RestrictPastDate	bool	❌	false	Prevents users from entering a date in the past
RestrictCurrentDate	bool	❌	false	Prevents users from entering today's 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
Max	int	❌	❌	The maximum year the user can enter
UpperLimitValidationMessage	string	❌	❌	Set a custom validation message for when a user enters a date greater than today's date 100 years from now or if a max value has been specified, the validation message when a user enters a date greater than today's date in the year stated by the max value
SummaryLabel	string	❌	❌	Change the label associated with this input on the summary

Date picker examples

DS Json for a single date picker on a page:

{
  "Title": "Date picker",
  "HideTitle": true,
  "PageSlug": "date-picker",
  "Elements": [
    {
      "Type": "DatePicker",
      "Properties": {
        "QuestionId": "passportIssued",
        "Label": "When was your passport issued?",
        "LabelAsH1": true
      }
    }
  ]
}

DS Json for date picker:

{
  "Type": "DatePicker",
  "Properties": {
    "QuestionId": "passportIssued",
    "Label": "When was your passport issued?",
    "StrongLabel": true
  }
}

All possible properties example:

{
  "Type": "DatePicker",
  "Properties": {
    "QuestionId": "passportIssued",
    "Label": "When was your passport issued?",
    "StrongLabel": true,
    "Warning": "This thing that you want to do, should be done with care",
    "Hint": "Date picker hint",
    "IAG" : "text to appeared in the inset",
    "Optional": false,
    "CustomValidationMessage": "Check the date and try again",
    "TargeMapping": "customer.Passport",
    "LabelAsH1": "true",
    "RestrictFutureDate": true,
    "RestrictPastDate": false,
    "RestrictCurrentDate": false,
    "Max": 2100,
    "UpperLimitValidationMessage": "Check the year and try again",
    "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 
  }
}