Appointment picker

Overview

Appointment picker is used to select a date and time slot for an appointment.

✨ This is an auto-generated AI summary of the ns-appointment-picker's documentation. It may not be accurate. ✨

The appointment-picker comprises a calendar to select a date and a radio-button type inputter to show the available time slots for the selected date.

Examples

Configure

Guidance

Implementation

Placement

The ns-appointment-picker component can be used in the following components:

<form> wrapped in <ns-form>
<ns-form-group>

Specification

Attributes

`slot-data`

Property: slotData
Description: An array of time slots available for an appointment.
Type: object
Default: []

`validation`

Property: validation
Type: string[]
Default: [isRequired]

`disableNative`

Property: disableNative
Type: boolean
Default: true

`showMessage`

Property: showMessage
Type: boolean
Default: true

`name`

Property: name
Description: The name of the appointment picker to reference in form data.
Type: string

`value`

Property: value
Description: The value of the selected appointment time slot.
Type: string
Default

`labelID`

Property: labelID
Type: string
Default

`heading`

Property: heading
Type: string
Default

`type`

Property: type
Type: string
Default: standard

Events

Name	Description
`change`	Dispatched when a time slot is selected. It holds the value of the selected time slot.

Specification notes

`slot-data`

The slot-data attribute should consist of array of objects containing a date and a slots property.

date: String - eg. 2020-01-28 (28th January 2020). slots: Array of objects with a name and value pair.

const slots = [
  {
    name: "9am to 12pm",
    value: "0900-1200",
  },
  {
    name: "10am to 2pm",
    value: "1000-1400",
  },
  {
    name: "12am to 5pm",
    value: "1200-1700",
  },
];

const slotData = [
  { date: "2020-01-28", slots: slots },
  { date: "2020-01-29", slots: slots },
];

Last updated: Mar 27, 2024