Skip to main content
Skip table of contents

Date picker

The date picker is an out of the box component offered by GoMeddo to it’s customers. The date picker allows users to select a single or range of available dates for their booking.

The component will fetch AvailableTimeSlots for the provided resource and display which days are available or is not available by disabling dates on the calendar overview.

The date picker is built using react-day-picker and date-fns.

Ensure react-day-picker and date-fns package is installed!

The packages can be installed by running the following command through the terminal within your project:

CODE
npm install react-day-picker date-fns

Props

The date picker has fourteen props:

Prop

Description

gm

GoMeddo instance for API calls to salesforce

mode

Defines if a single or range of dates can be selected using the mode enum

resourceId

Id of the resource

dateFormat

Custom date format (date-fns format)

locale

Defines which localisation to be applied (available locales within date-fns)

disablePast

Disables past dats from current date

minDate

Minimum date restriction

maxDate

Maximum date restriction

minDays

Minimum day restriction (this prop only applies when the mode is set to range)

maxDays

Maximum day restriction (this prop only applies when the mode is set to range)

dateNotSelectedPlaceholder

Custom placeholder message when a date is not selected (this prop only applies when the mode is set to range)

loadingIcon

Path to custom loading icon

selectDatePlaceholder

Custom placeholder message on the date overview

handleSelection

Function called when a date or range of dates are selected

CSS Variables

The date picker component has twelve CSS variables:

Name

Description

--accent-color

Changes the accent color of the date picker component

--accent-background-color

Changes the accent background color odf the date picker component

--calendar-background-color

Changes the background color of the calendar overview

--calendar-border-color

Changes the border color of the calendar overview

--today-day-border-color

Changes the border color of the current date

--range-hover-background-color

Changes the background color of the hover effect when selecting a date range

--range-hover-border-color

Changes the border color of the hover effect when selecting a date range

--day-background-color

Changes the background color of days on the calendar overview

--day-border-color

Changes the border color of days on the calendar overview

--calendar-control-background-color

Changes the background color of arrow controls on the calendar overview

--calendar-control-border-color

Changes the border color of arrow controls on the calendar overview

--date-overview-background-color

Changes the background color of the date overview

The element referred as the date overview is the element seen when date picker is loaded. Displaying a calendar icon and the selected date.

Returned Data

The type of data return from the component depends which mod is set.

If the mode is set to single, a string will be returned.

If the mode is set to range, an object is returned containing string data in the following format.

JSON
{
  from: string,
  to: string
}

Each returned string data will be in the specified date format provided through the dataFormat prop. If no date format is specified, the returned data will be in the following format: 'dd/MM/yyyy'

Example use case

CSS
.your-custom-class {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  --accent-color: red;
  --accent-background-color: purple;
  --calendar-border-color: blue;
  --calendar-background-color: grey;
  --day-background-color: brown;
  --day-border-color: green;
  --month-year-border-color: yellow;
  --month-year-background-color: orange;
  --calendar-control-background-color: violet;
  --calendar-control-border-color: pink;
  --date-overview-background-color: lime;
}

JSX
import GoMeddo from "@gomeddo/sdk";
import DatePicker from './components/DatePicker.tsx';
import {DatePickerMode} from "./enums/DatePickerMode.ts";
import '/path/to/your/css';

const gm = new GoMeddo(<Your api key>);

const handleSelection = (date: string | object | undefined) => {
    console.log(date);
}

<DatePicker gm={gm}
            mode={DatePickerMode.SINGLE} //or DatePickerMode.RANGE
            className={'your-custom-class'}
            resourceId={'<resource id>'}
            handleSelection={handleSelection}
            dateFormat={'MM/dd/yyyy'}
            minDate={new Date()}
            maxDate={new Date(2025, 11, 1)}      
/>

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.