ns-appointment-picker
#
Introduction
ns-appointment-picker
is used to select a date and time slot for an appointment.
ns-appointment-picker
is used to select a date and time slot for an appointment. The component is comprised of an ns-calendar
to pick the date, and an ns-inputter
to show the available time slots for the selected date.
#
Best practice๐ Do's | ๐ Don'ts |
---|---|
Use this when the customer needs to select a date and a time slot for an appointment | Use to select an appointment slot on a single date. Use ns-inputter radio options instead |
Use ns-inputter to surface the best suitable slots for a customer before presenting the full appointment picker, where appropriate. | Don't force customers to use the appointment picker first if there is very poor appointment availability. Present the next available appointments in an ns-inputter radio first. |
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. |
#
UsageThe main property of ns-appointment-picker
is slotData
. This would typically be set by setting the property through code as it is a fairly complex object.
#
Usage exampleKey | Description |
---|---|
A | ns-calendar - Calendar component |
B | ns-inputter - Inputter component |
#
SpecificationAttribute | Property | Type | Default | Options | Description |
---|---|---|---|---|---|
slot-data | slotData | array | Array of objects representing dates. | ||
value | value | string | Value of the selected appointment. |
Event | Description |
---|---|
change | Dispatched when a specific slot is selected |
#
Slot DataThe slotData
array property should consist of objects containing a date
property and a slots
property.
date: String - eg. 2020-01-28 (28th January 2020) slots: Array of objects with a name and value property
#
Component placementThe ns-appointment-picker component can be used in the following components:
#
Feedback- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
๐ฉ ๐ ๐ฆ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.