Overview

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

Summarise it!

✨ 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

Do

• Use it when the customer needs to select a date and a time slot for an appointment.
• Use <ns-inputter> to surface the best suitable slots for a customer before presenting the full appointment picker, where appropriate.
• Use <ns-alert> alongside <ns-appointment-picker> to surface any important notifications regarding a customer booking.
• Use multiple appointment pickers in <ns-tabs> so users can easily access different types of bookings.

Don't

• Use it to select an appointment slot on a single date - use <ns-inputter> radio options instead.
• Force customers to use the appointment picker first if there is very little availability. Present the next available appointments in a <ns-inputter> radio first.

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 },
];

Figma

Please note: The ns-appointment-picker Figma component configuration instructions are available only to members of the British Gas workspace who have access to the Nucleus Figma UI Kit.

Configuration instructions

(Opens in Figma).