Opening Hours

Opening hours input

Displays a form to input opening hours for a business.

Example

Mon
From
To
Closed
Tue
From
To
Closed
Wed
From
To
Thu
From
To
Fri
From
To
Sat
From
To
Closed
Sun
From
To


JSON representation
[
  {
    "day": 0,
    "open": "09:00",
    "close": "17:00"
  },
  {
    "day": 1,
    "open": "09:00",
    "close": "17:00"
  },
  {
    "day": 5,
    "open": "10:00",
    "close": "18:00"
  }
]

The input is a controlled component, so you need to provide a value and an onChange handler.

import React, { useState } from 'react';
import { OpeningHoursInput } from '@nearst/ui';
 
const [value, setValue] = useState([]);
 
<OpeningHoursInput value={value} onChange={setValue} />;

The value is an array of objects, each representing a day of the week. Each object has the following properties:

  • day: The day of the week, as a number (0 = Monday, 1 = Tuesday, etc.)
  • open: The opening time, as a string in the format HH:mm
  • close: The closing time, as a string in the format HH:mm

Here’s an example of a valid value:

[
	{
		"day": 0,
		"open": "09:00",
		"close": "17:00"
	},
	{
		"day": 1,
		"open": "09:00",
		"close": "17:00"
	},
	{
		"day": 5,
		"open": "10:00",
		"close": "18:00"
	}
]
ModalPage