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)}      
/>