Date Picker

A date picker allows respondents to select a date using a calendar popup or by entering a value manually in an input field. This example demonstrates how to integrate a third-party date picker as a custom SurveyJS question type. Each platform uses a different MIT-licensed date picker component: React Date Picker, Angular Material Datepicker, or Vue Datepicker.

Despite using different libraries, all three implementations share the same question model and behavior, so a single survey JSON definition works across platforms without modification. The integration approach follows the common pattern described in the Form Library tutorials linked at the end of this page.

This demo defines a custom question type that:

• Renders a third-party date picker inside a SurveyJS form
• Supports configuration of display format, placeholder, minimum/maximum selectable dates, and clearing behavior
• Stores the selected value as a normalized yyyy-MM-dd string in survey results (for example, 2026-06-08)

{
  "elements": [
    {
      "type": "third-party-datepicker",
      "name": "deliveryDate",
      "title": "Preferred delivery date",
      "isRequired": true,
      "dateFormat": "MM/dd/yyyy",
      "placeholder": "Select a date",
      "allowClear": true,
      "minDate": "2026-06-01",
      "maxDate": "2026-12-31"
    }
  ]
}

After completion, the resulting data contains:

{
  "deliveryDate": "2026-06-08"
}

The display format (MM/dd/yyyy → 06/08/2026) affects only how the value is shown in the UI; it does not affect the stored data format.

The date picker extends the standard Question class with the following properties:

Angular Material does not support per-control format strings. Date display is configured globally via the MAT_DATE_FORMATS injection token. The Angular demo uses a global format matching MM/dd/yyyy (e.g., 06/08/2026) and ignores the dateFormat property. To change formatting, update the DATEPICKER_DATE_FORMATS constant in the Angular implementation.

For step-by-step instructions on integrating third-party components (model definition, serialization, rendering, and registration), see:

• Integrate Third-Party React Components
• Integrate Third-Party Angular Components
• Integrate Third-Party Vue 3 Components