React Multi Date Picker

https://shahabyazdi.github.io/react-multi-date-picker
Admin
React Multi Date Picker is a flexible date picker component for React that supports multiple...
Tokens:67,227
Snippets:538
Trust Score:8.3
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install with npm

Source: https://shahabyazdi.github.io/react-multi-date-picker/installation

Install the react-multi-date-picker package using npm.

```bash
npm i react-multi-date-picker
```

--------------------------------

### Install with yarn

Source: https://shahabyazdi.github.io/react-multi-date-picker/installation

Install the react-multi-date-picker package using yarn.

```bash
yarn add react-multi-date-picker
```

--------------------------------

### Calendar example

Source: https://shahabyazdi.github.io/react-multi-date-picker/installation

A complete example of using the Calendar component with state.

```jsx
import React, { useState } from "react"
import { Calendar } from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <Calendar 
      value={value}
      onChange={setValue}
    />
  )
}
```

--------------------------------

### DatePicker example

Source: https://shahabyazdi.github.io/react-multi-date-picker/installation

A complete example of using the DatePicker component with state.

```jsx
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <DatePicker 
      value={value}
      onChange={setValue}
    />
  )
}
```

--------------------------------

### AnalogTimePicker Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/analog-time-picker

Documentation for the AnalogTimePicker plugin, including its props and usage examples.

```APIDOC
## AnalogTimePicker Plugin

### Description
This plugin adds an analog time picker to the react-multi-date-picker calendar. It can be used in single, multiple, and range modes.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | String | "right" | Position of the time picker relative to the calendar. |
| disabled | Boolean | false | Disables the time picker. |
| hideSeconds | Boolean | false | Hides the seconds field. |
| format | String | "YYYY/MM/DD" | Format for the select added when in multiple or range mode with position right or left. |
| hStep | Number | 1 | Step for hour arrow icons. |
| mStep | Number | 1 | Step for minute arrow icons. |
| sStep | Number | 1 | Step for second arrow icons. |

### Usage Example
```jsx
import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";

const [value, setValue] = useState(new Date());

<DatePicker
  value={value}
  onChange={setValue}
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[<TimePicker />]}
/>
```
```

--------------------------------

### DatePanel Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel

Documentation for the DatePanel plugin, including its props and usage examples.

```APIDOC
## DatePanel Plugin

### Description
This plugin displays the selected dates in a panel. It can be used with the react-multi-date-picker component.

### Props
| Prop | Type | Default |
|------|------|---------|
| position | String | "right" |
| disabled | Boolean | false |
| sort | String | |
| eachDaysInRange | Boolean | false |
| onClickDate | Function | |
| removeButton | Boolean | true |
| header | String | |
| markFocused | Boolean | false |
| focusedClassName | String | |
| formatFunction | Function | |

### Sort
- date
- color

### Important Note About onClickDate
The important thing about the onClickDate property is that if a date is clicked, the value of that date will be sent as an argument in onClickDate, but if the delete button is clicked, onClickDate will still be called but with an **undefined** argument.
```

--------------------------------

### calendarProps & datePickerProps

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/docs/default-props

Guidance on using calendarProps and datePickerProps in plugins, with an example of how to choose between them.

```APIDOC
## calendarProps & datePickerProps

### Description
The value of datePickerProps always takes precedence over the value of calendarProps because DatePicker changes some props of Calendar. To determine whether you should use calendarProps or datePickerProps, follow the example below.

### Example
```jsx
function MyPlugin({ datePickerProps, calendarProps }) {
  const props = datePickerProps || calendarProps

  ...
}
```
```

--------------------------------

### TimePicker Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/time-picker

Documentation for the TimePicker plugin, including its props and usage examples.

```APIDOC
## TimePicker Plugin

### Description
TimePicker is a plugin for react-multi-date-picker that adds a time picker to the date picker. It supports multiple and range modes and can be positioned at the bottom, top, right, or left of the calendar.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | String | "right" | Position of the time picker relative to the calendar. |
| disabled | Boolean | false | Disables the time picker. |
| hideSeconds | Boolean | false | Hides the seconds field. |
| header | Boolean | true | Shows the header. For positions top/bottom, it is always false; for positions right/left, it defaults to true. |
| format | String | "YYYY/MM/DD" | Format for the date select shown when the calendar is in multiple or range mode and the time picker position is right or left. |
| hStep | Number | 1 | Step for the hour field. |
| mStep | Number | 1 | Step for the minute field. |
| sStep | Number | 1 | Step for the second field. |

### Usage Example

```jsx
import React from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";

<DatePicker
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[
    <TimePicker position="bottom" hStep={2} mStep={3} sStep={4}/>,
  ]}
/>
```
```

--------------------------------

### Custom Settings

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/settings

Example usage of the Settings plugin with custom calendars, locales, modes, and disabledList.

```APIDOC
## Custom Settings

### Description
This example demonstrates how to customize the Settings plugin by specifying which calendars, locales, and modes to show, and which items to disable.

### Usage Example
```jsx
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
.
.
.
const [props, setProps] = useState({ multiple: true })
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="left"
      calendars={["gregorian", "persian"]}
      locales={["en", "fa"]}
      modes={["multiple", "range"]}
      disabledList={["other"]}
    />
  ]}
/> 
```

```

--------------------------------

### Range Picker with DatePicker

Source: https://shahabyazdi.github.io/react-multi-date-picker/range

Basic range picker setup. The `range` prop enables selecting a start and end date. The `value` and `onChange` props manage the selected date range as an array of DateObject instances.

```jsx
const [values, setValues] = useState([
  new DateObject().subtract(4, "days"),
  new DateObject().add(4, "days")
])
.
.
.
<DatePicker
  value={values}
  onChange={setValues}
  range
/>
```

--------------------------------

### Settings Bottom

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/settings

Example usage of the Settings plugin with position set to 'bottom' and defaultActive set to 'mode'.

```APIDOC
## Settings Bottom

### Description
This example demonstrates how to use the Settings plugin with the position prop set to 'bottom' and defaultActive set to 'mode'. It also shows integration with the DatePanel plugin.

### Usage Example
```jsx
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
.
.
.
const [props, setProps] = useState({})
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="bottom"
      defaultActive="mode"
    />,
    <DatePanel 
      disabled={!props.multiple && !props.range} 
      position={["fa", "ar"].includes(props.locale?.name?.split?.("_")?.[1]) ? "left" : "right"}
    />
  ]}
/> 
```

```

--------------------------------

### DatePickerHeader Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/header

Documentation for the DatePickerHeader plugin, including its props, sizes, and usage examples.

```APIDOC
## DatePickerHeader Plugin

### Description
Adds a header to the DatePicker component. The header can be positioned on the right (default), left, or top, and can be styled and localized.

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | String | "right" | Position of the header. Possible values: "right", "left", "top". |
| disabled | Boolean | false | Disables the header. |
| size | String | "big" | Size of the header. Possible values: "big", "medium", "small". |
| calendar | Object | Default DatePicker Calendar | Calendar object to use for the header. |
| locale | Object | Default DatePicker Locale | Locale object to use for the header. |

### Sizes
- big
- medium
- small

### Usage Examples

#### Header Right
```jsx
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"

<DatePicker
  plugins={[
    <DatePickerHeader />
  ]}
/>
```

#### Header Left
```jsx
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"

<DatePicker
  plugins={[
    <DatePickerHeader position="left" />
  ]}
/>
```

#### English Calendar with Indian Header
```jsx
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import gregorian_hi from "react-date-object/locales/gregorian_hi" //(gregorian calendar, hindi locale)

<DatePicker
  plugins={[
    <DatePickerHeader 
      locale={gregorian_hi}
      size="medium" 
    />,
  ]}
  calendarPosition="bottom-left"
/> 
```

#### Styling Header
```jsx
import DatePicker from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"

<DatePicker
  plugins={[
    <DatePickerHeader 
      position="top" 
      size="small" 
      style={{ backgroundColor: "steelblue" }} 
    />
  ]}
/>
```
```

--------------------------------

### range_picker_footer Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/range-picker-footer

Documentation for the range_picker_footer plugin, including its props, default names, and usage examples.

```APIDOC
## [PLUGIN] range_picker_footer

### Description
This plugin is developed specifically for the Range Picker and does not work properly in other modes. It displays a footer with selected date information and a close button.

### Import
```javascript
import Footer from "react-multi-date-picker/plugins/range_picker_footer";
```

### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| position | String | "right" | Position of the footer. Can be set to "bottom" for bottom placement. |
| disabled | Boolean | false | Disables the footer. |
| format | String | Farsi & Arabic locale: "DD MMMM"<br>English & Indian locale: "MMMM DD" | Format for displaying dates. |
| names | Object | English locale object | Custom labels for the footer. See below for default values. |

### Default names (English locale)
```javascript
{
  selectedDates: "Selected Dates:",
  from: "From:",
  to: "To:",
  selectDate: "Select Date",
  close: "Close",
  separator: "-",
}
```

### Default names (Farsi locale)
```javascript
{
  selectedDates: "تاریخ انتخابی شما:",
  from: "از:",
  to: "تا:",
  selectDate: "انتخاب کنید",
  close: "بستن",
  separator: "-",
}
```

### Usage Example (Default Range Picker Footer)
```javascript
import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";

const [value, setValue] = useState([
  new DateObject().setDay(15),
  new DateObject().add(1, "month").setDay(15),
]);

<DatePicker
  value={value}
  onChange={setValue}
  range
  numberOfMonths={2}
  plugins={[
    <Footer position="bottom" />
  ]}
/>
```

### Usage Example (Custom Names)
```javascript
import React from "react";
import { Calendar } from "react-multi-date-picker";
import Footer from "react-multi-date-picker/plugins/range_picker_footer";

<Calendar
  range
  numberOfMonths={2}
  plugins={[
    <Footer
      position="bottom"
      format="MMM DD"
      names={{
        selectedDates: "Flight information:",
        from: "Departure date:",
        to: "Return date:",
        selectDate: "select",
        close: "Close",
        separator: ",",
      }}
    />,
  ]}
/>
```
```

--------------------------------

### onChange Validation Example

Source: https://shahabyazdi.github.io/react-multi-date-picker/validation

An example of using the onChange method with the second parameter to validate user input. It checks if the input is from typing, validates the date format, and returns false to prevent invalid dates from being set.

```APIDOC
## onChange Method

### Description
Handles date changes in the DatePicker component. The second parameter provides validation context including isTyping, input, and validatedValue.

### Method
onChange

### Parameters
- **date** (Date) - The selected or typed date value.
- **options** (Object) - Contains validation properties:
  - **isTyping** (boolean) - Indicates if the change was triggered by user typing (true) or calendar selection (false).
  - **input** (HTMLInputElement | HTMLDivElement) - Reference to the input element. For custom inputs, it's a div containing the custom component.
  - **validatedValue** (string) - The value to be displayed in the input field.

### Return Value
- **boolean | void** - Return false to prevent the internal state from being set.

### Example
```jsx
import DatePicker from 'react-multi-date-picker'

const [value, setValue] = useState();

<DatePicker
  value={value}
  onChange={(date, { input, isTyping }) => {
    if (!isTyping) return setValue(date); // user selects the date from the calendar and no needs for validation.

    const strings = input.value.split("/");
    const numbers = strings.map(Number);
    const [year, month, day] = numbers;

    if (input.value && numbers.some((number) => isNaN(number))) {
      return false; //in case user enter something other than digits
    }

    if (month > 12 || month < 0) return false; //month < 0 in case user want to type 01
    if (day < 0 || (date && day > date.day)) return false;
    if (strings.some((val) => val.startsWith("00"))) return false;

    setValue(date);
  }}
/>
```
```

--------------------------------

### Toolbar Plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/toolbar

Documentation for the Toolbar plugin of react-multi-date-picker, including its props and usage examples.

```APIDOC
## Toolbar Plugin

### Description
Adds a toolbar to the DatePicker with buttons for today, deselect, and close actions.

### Props

| Prop | Type | Default |
|------|------|---------|
| position | String | "right" |
| disabled | Boolean | false |
| className | String | |
| sort | Array | ["today", "deselect", "close"] |
| names | Object | en: { today: "Today", deselect: "Deselect", close: "Close" }, fa: { today: "امروز", deselect: "لغو", close: "بستن" } |

### Usage

```jsx
import React, { useState } from "react"
import Toolbar from "react-multi-date-picker/plugins/toolbar"

const [value, setValue] = useState()

<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <Toolbar position="bottom" />
  ]}
/>
```

### Sorting Buttons

```jsx
import React, { useState } from "react"
import Toolbar from "react-multi-date-picker/plugins/toolbar"

const [value, setValue] = useState()

<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <Toolbar 
      position="bottom" 
      sort={["deselect", "close", "today"]} 
    />,
  ]}
/>
```

### Custom Names

```jsx
import React, { useState } from "react"
import Toolbar from "react-multi-date-picker/plugins/toolbar"

const [value, setValue] = useState()

<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <Toolbar
      position="bottom"
      names={{
        today: "select today"
        deselect: "select none"
        close: "close"
      }}
    />,
  ]}
/>
```
```

--------------------------------

### Custom Header Name

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel

Example of using the header prop to set a custom header for the DatePanel.

```APIDOC
## Custom Header Name

### Description
Example of using the header prop to set a custom header for the DatePanel.

### Code
```jsx
import DatePicker from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
.
.
.
<DatePicker
  plugins={[
    <DatePanel header="All Dates" />
  ]}
/>
```
```

--------------------------------

### Date Click Listener

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel

Example of using the onClickDate prop to handle date clicks and deletions.

```APIDOC
## Date Click Listener

### Description
Example of using the onClickDate prop to handle date clicks and deletions.

### Code
```jsx
import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
.
.
.
const [value, setValue] = useState([
  new DateObject(), 
  new DateObject().add(1, "day")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <DatePanel
      removeButton={false}
      onClickDate={dateObject => {
        let mustDelete = window.confirm("are you sure you want to delete this date ?")
      
        if (mustDelete) setValue(
          value.filter(date => date !== dateObject)
        )
      }}
    />
  ]}
/>
```
```

--------------------------------

### Change Start Day of Week with weekStartDayIndex

Source: https://shahabyazdi.github.io/react-multi-date-picker/other-examples

Sets Monday as the first day of the week. The weekStartDayIndex value must be a number between 0 and 6.

```jsx
<DatePicker 
  weekStartDayIndex={1} 
/>
```

--------------------------------

### Using react-multi-date-picker plugins (DatePickerHeader, DatePanel, multiColors, Settings, Toolbar)

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins

Example of using the built-in plugins for react-multi-date-picker: DatePickerHeader, DatePanel, multiColors, Settings, and Toolbar. It sets up a calendar with multiple selected dates colored by category and adjusts plugin positions for RTL locales. Note the source contains a syntax error: `const initialProps {` should be `const initialProps = {`.

```jsx
import React, { useState } from "react"
import { Calendar, DateObject } from "react-multi-date-picker"
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import multiColors from "react-multi-date-picker/plugins/colors"
import Settings from "react-multi-date-picker/plugins/settings"
import Toolbar from "react-multi-date-picker/plugins/toolbar"

const dateObject = new DateObject()

const toDateObject = day => new DateObject(dateObject).setDay(day)

const colors = {
  green: [2, 10, 17].map(toDateObject),
  blue: [5, 6, 14].map(toDateObject),
  red: [13, 19, 25].map(toDateObject),
  yellow: [15, 22, 28].map(toDateObject)
}

Object.keys(colors).forEach(color => {
  colors[color].forEach((date, index) => {
      colors[color][index].color = color
  })
})

const initialProps {
  value: [
    ...colors.green,
    ...colors.blue,
    ...colors.red,
    ...colors.yellow
  ], 
  multiple: true
})

export default function DatePickerPlugins() {
  const [props, setProps] = useState(initialProps)
  const isRTL = ["fa", "ar"].includes(props.locale?.name?.split?.("_")?.[1])

  return (
    <div 
      style={{ 
        display: "flex", 
        justifyContent: "center" 
      }}
    >
      <Calendar
        {...props}
        plugins={[
          <DatePickerHeader 
            position="top" 
            size="medium" 
          />,
          <DatePanel
            position={isRTL ? "left" : "right"}
            sort="date"
            eachDaysInRange={!props.onlyMonthPicker && !props.onlyYearPicker}
          />
          multiColors({ position: isRTL ? "right" : "left" }),
          <Settings 
            position="bottom" 
            defaultActive="locale" 
          />,
          <Toolbar 
            position="bottom" 
          />
        ]}
      />
    </div>
  )
}
```

--------------------------------

### Sort By Date

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel

Example of using the DatePanel plugin with the sort prop set to "date".

```APIDOC
## Sort By Date

### Description
Example of using the DatePanel plugin with the sort prop set to "date".

### Code
```jsx
import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
.
.
.
const [value, setValue] = useState([
  new DateObject(),
  new DateObject().add(2, "days"),
  new DateObject().add(10, "days")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  multiple
  plugins={[
    <DatePanel sort="date" />
  ]}
/>
```
```

--------------------------------

### weekends plugin

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/weekends

Documentation for the weekends plugin of react-multi-date-picker, including its props, default values, and usage examples.

```APIDOC
## weekends()

### Description
A plugin for react-multi-date-picker that highlights weekends in the date picker. It accepts an optional array of weekday numbers to customize which days are considered weekends.

### Usage
Import the plugin and pass it to the `plugins` prop of the `DatePicker` component.

### Parameters
- `weekends` (Array) - Optional - An array of weekday numbers (e.g., [0, 6] for Saturday and Sunday in the Gregorian calendar). If not provided, the default weekends for the selected calendar are used.

### Default Weekends by Calendar
- **gregorian**: [0, 6]
- **persian**: [6]
- **arabic**: [0, 6]
- **indian**: [0]

### Examples

#### Gregorian
```jsx
import DatePicker from "react-multi-date-picker"
import weekends from "react-multi-date-picker/plugins/highlight_weekends"

<DatePicker
  plugins={[weekends()]}
/>
```

#### Persian
```jsx
import DatePicker from "react-multi-date-picker"
import weekends from "react-multi-date-picker/plugins/highlight_weekends"

<DatePicker
  plugins={[weekends()]}
  calendar={persian}
  locale={persian_fa}
/>
```

#### Custom
```jsx
import DatePicker from "react-multi-date-picker"
import weekends from "react-multi-date-picker/plugins/highlight_weekends"

<DatePicker 
  plugins={[weekends([5, 6])]} 
/>
```
```

--------------------------------

### onChange with multiple dates

Source: https://shahabyazdi.github.io/react-multi-date-picker/events

Use the multiple prop to enable selecting multiple dates. The onChange callback receives an array of Date objects; the example alerts the selected dates joined by newlines.

```jsx
<DatePicker
  multiple
  onChange={array => { //Array of Dateobjecs
    alert("selected dates :\n" + array.join(",\n"))
  }}
/>
```

--------------------------------

### Custom Names usage

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/toolbar

Usage of the Toolbar plugin with custom names for the buttons. Note: the source example has missing commas after each property in the names object.

```jsx
import React, { useState } from "react"
import Toolbar from "react-multi-date-picker/plugins/toolbar"
.
.
.
const [value, setValue] = useState()
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <Toolbar
      position="bottom"
      names={{
        today: "select today"
        deselect: "select none"
        close: "close"
      }}
    />,
  ]}
/>
```

--------------------------------

### Other Pickers

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/settings

Example usage of the Settings plugin with disabledList to hide calendar, locale, and mode, and defaultActive set to 'others'.

```APIDOC
## Other Pickers

### Description
This example demonstrates how to use the Settings plugin to show only the 'other pickers' section by disabling calendar, locale, and mode, and setting defaultActive to 'others'.

### Usage Example
```jsx
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import Settings from "react-multi-date-picker/plugins/settings"
.
.
.
const initialProps = { 
  value: new Date(), 
  format: "MM-DD-YYYY", 
}

const [props, setProps] = useState(initialProps)
.
.
.
<DatePicker
  {...props}
  onPropsChange={setProps}
  plugins={[
    <Settings
      position="bottom"
      disabledList={["calendar", "locale", "mode"]}
      defaultActive="others"
      defaultFormat={{
        single: "MM-DD-YYYY",
        onlyMonthPicker: "MMMM YYYY",
        onlyYearPicker: "YYYY",
      }}
    />
  ]}
/> 
```

```

--------------------------------

### Format a DateObject with custom tokens

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Formats the DateObject using a custom token string. The example shows the output for the date 2021/03/02.

```javascript
console.log(date.format("dddd DD MMMM YYYY")) //Tuesday 02 March 2021
```

--------------------------------

### Setting Date Properties with Assignment, set, and Chained Setters

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Shows multiple ways to set date values on a DateObject: direct property assignment, the set method with an object, chained setter methods, and the set method with key-value pairs. The example logs the formatted date after each method.

```javascript
const date = new DateObject()

date.year = 2020
date.month = 3
date.day = 4

console.log(date.format()) //2020/03/04

date.set({ year: 2010, month: 4, day: 7 })

console.log(date.format()) //2010/04/07

console.log(
  date
    .setYear(2000)
    .setMonth(1)
    .setDay(1)
    .format()
) //2000/01/01

console.log(
  date
    .set("year", 1907)
    .set("month", 7)
    .set("day", 7)
    .format()
) //1907/07/07
```

--------------------------------

### style.css for reserved and in-service date styling

Source: https://shahabyazdi.github.io/react-multi-date-picker/validation

CSS for the room reservation example. It colors the selected range background blue (#8fb4f9) when it contains a reserved date and red (#cc0303) when it contains an in-service date, and styles the legend circles and the .un-availble flex container.

```css
.rmdp-range:has(.reserved) {
  background-color: #8fb4f9;
}

.rmdp-range:has(.in-service) {
  background-color: #cc0303;
}

div.reserved {
  background-color: #8fb4f9;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

div.in-service {
  background-color: #cc0303;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.un-availble {
  display: flex;
  align-items: center;
  column-gap: 10px;
}

.un-availble p {
  margin: 0;
}

```

--------------------------------

### Add inline style to input with style prop

Source: https://shahabyazdi.github.io/react-multi-date-picker/classes-%26-styles

Use the style prop to apply inline styles directly to the input element. This example sets background color, height, border radius, font size, and padding.

```jsx
<DatePicker
  style={{
    backgroundColor: "aliceblue",
    height: "24px",
    borderRadius: "8px",
    fontSize: "14px",
    padding: "3px 10px"
  }}
/>
```

--------------------------------

### Customize month and year display with formatMonth and formatYear

Source: https://shahabyazdi.github.io/react-multi-date-picker/header

Customize the displayed month and year text in the header using the formatMonth and formatYear props. The example returns strings like 'Month October' and 'Year 2026'.

```jsx
<Calendar 
  formatMonth={(month, year) => {
    return "Month " + month;
  }}
  formatYear={(year, month) => {
    return "Year " + year;
  }}
/>
```

--------------------------------

### Create DateObject from a string directly

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Creates a DateObject by passing a string directly to the constructor. The string must follow the format 'year month day hour minute second millisecond meridiem' (spaces can be replaced with any character) and is parsed as Gregorian. The example shows formatting with the 'YYYY/MM/DD hh:mm:ss.SSS a' pattern.

```javascript
var date = new DateObject("2020 8 21 11 55 36 100 am");

date.format("YYYY/MM/DD hh:mm:ss.SSS a"); //2020/08/21 11:55:36.100 am

date = new DateObject("2020/08/01");

date.format("YYYY/MM/DD hh:mm:ss.SSS a"); //2020/08/01 12:00:00.000 am
```

--------------------------------

### Get Unix timestamp with toUnix()

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Uses the toUnix() method to get the Unix timestamp in seconds from a DateObject. The example shows that the original timestamp is returned.

```javascript
console.log(date.toUnix()) //1614678083
```

--------------------------------

### Add inline style to container with containerStyle

Source: https://shahabyazdi.github.io/react-multi-date-picker/classes-%26-styles

Use the style prop for the input and containerStyle for the container. Because the container is inline-block, changing the input width requires also changing the container width. This example sets both to 100% and positions the calendar at bottom-center.

```jsx
<DatePicker
  style={{
    width: "100%",
    boxSizing: "border-box",
    height: "26px"
  }}
  containerStyle={{
    width: "100%"
  }}
  calendarPosition="bottom-center"
/> 
```

--------------------------------

### Configure calendarPosition with mainPosition, relativePosition, and offsets

Source: https://shahabyazdi.github.io/react-multi-date-picker/positions

Interactive example for the react-multi-date-picker calendarPosition prop. It provides controls for mainPosition (top/bottom/left/right), relativePosition (start/center/end), fixMainPosition, fixRelativePosition, offsetY, and offsetX, and renders a DatePicker inside a scrollable container. The effect scrolls the container to the center and opens the calendar on mount.

```jsx
const containerRef = useRef()
const datePickerRef = useRef()

const [state, setState] = useState({
  mainPosition: "bottom",
  relativePosition: "center",
  fixMainPosition: false,
  fixRelativePosition: false,
  offsetY: 0,
  offsetX: 0
})

const updateState = (key, value) => setState({ 
  ...state, 
  [key]: value
})

useEffect(() => {
  containerRef.current.scrollTo(
    (containerRef.current.clientWidth),
    (containerRef.current.clientHeight / 2)
  )

  datePickerRef.current.openCalendar()
}, [])

const {
  mainPosition,
  relativePosition,
  fixMainPosition,
  fixRelativePosition,
  offsetY,
  offsetX
} = state
.
.
.
<div>
  <div 
    style={{ 
      display: "flex", 
      justifyContent: "space-around",
      flexWrap: "wrap",
      margin: "10px 0" 
    }}
  >
    <label>
      Main Position:
      <select
        value={mainPosition}
        onChange={e => updateState("mainPosition", e.target.value)}
        className="select"
      >
        <option value="top">top</option>
        <option value="bottom">bottom</option>
        <option value="left">left</option>
        <option value="right">right</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixMainPosition}
        onChange={e => updateState("fixMainPosition", e.target.checked)}
      />
      Fix Main Position
    </label>
    <label>
      Relative Position:
      <select
        value={relativePosition}
        onChange={e => updateState("relativePosition", e.target.value)}
        className="select"
      >
        <option value="start">start</option>
        <option value="center">center</option>
        <option value="end">end</option>
      </select>
    </label>
    <label>
      <input
        type="checkbox"
        value={fixRelativePosition}
        onChange={e => updateState("fixRelativePosition", e.target.checked)}
      />
      Fix Relative Position
    </label>
    <label>
      Offset Y:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetY}
        onChange={e => updateState("offsetY", Number(e.target.value))}
      />
    </label>
    <label>
      Offset X:
      <input
        type="number"
        className="input"
        style={{ width: "30px" }}
        value={offsetX}
        onChange={e => updateState("offsetX", Number(e.target.value))}
      />
    </label>
  </div>
  <div
    ref={containerRef}
    style={{ 
      backgroundColor: "whitesmoke", 
      height: "500px", 
      overflow: "auto", 
      position: "relative",
      borderRadius: "5px",
      boxShadow: "inset 0 0 6px 0 #888" 
    }}
  >
    <div
      style={{ 
        width: "300%", 
        height: "200%", 
        display: "flex", 
        flexDirection: "column", 
        justifyContent: "center" 
      }}
    >
      <DatePicker
        ref={datePickerRef}
        containerStyle={{ //datepicker container style
          width: "180px",
          margin: "auto"
        }}
        style={{ //input style
          width: "100%",
          height: "26px",
          boxSizing: "border-box"
        }}
        calendarPosition={`${mainPosition}-${relativePosition}`}
        fixMainPosition={fixMainPosition}
        fixRelativePosition={fixRelativePosition}
        offsetY={offsetY}
        offsetX={offsetX}
        onClose={() => false}
      />
    </div>
  </div>
</div>
```

--------------------------------

### Destructure weekDay properties

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Destructures the weekDay object to get its name, shortName, number, and index. The example shows the values for Tuesday.

```javascript
const {name, shortName, number, index} = date.weekDay

console.log(name, shortName, number, index); //Tuesday Tue 3 2
```

--------------------------------

### Destructure month properties

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Destructures the month object to get its name, shortName, number, and index. The example shows the values for March.

```javascript
const {name, shortName, number, index} = date.month

console.log(name, shortName, number, index); //March Mar 3 2
```

--------------------------------

### Custom Separator with dateSeparator Prop

Source: https://shahabyazdi.github.io/react-multi-date-picker/range

Customizes the separator between the start and end dates in range mode. The default separator is ' ~ '. This example sets it to " to ".

```jsx
<DatePicker 
  range 
  dateSeparator=" to " 
/>
```

--------------------------------

### Calculate Julian Day Number with DateObject

Source: https://shahabyazdi.github.io/react-multi-date-picker/calendars

Gets the current Julian Day Number using the toJulianDay() method. The example shows the output for July 12, 2021 as 2459407.

```javascript
const julianDay = new DateObject().toJulianDay();

console.log(julianDay); // 2459407 (Monday, July 12 2021)
```

--------------------------------

### colors plugin usage

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/colors

Shows how to import and use the colors plugin with a default color.

```APIDOC
## colors plugin

### Description
Adds color functionality to the date picker. The plugin accepts options for position, disabled, colors, and defaultColor.

### Usage
```js
import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"

const [props, setProps] = useState({
  multiple: true,
  plugins: [colors({ defaultColor: "green" })],
});

<DatePicker
  {...props}
  onPropsChange={setProps}
/>
```

### Options
- **position** (String) - Default: "bottom" - Position of the color picker.
- **disabled** (Boolean) - Default: false - Whether the plugin is disabled.
- **colors** (Array) - Default: ["blue", "red", "green", "yellow"] - List of available colors.
- **defaultColor** (String) - Default: first item of colors - The default color applied to dates.
```

--------------------------------

### Custom highlight with mapDays

Source: https://shahabyazdi.github.io/react-multi-date-picker/map-days

Use mapDays to apply custom highlight classes to specific days. The callback checks date.day values: days 4-7 get 'highlight highlight-green' and days 11-14 get 'highlight highlight-red'. It returns a className property only when a color is set.

```jsx
<DatePicker
  mapDays={({ date }) => {
    let color
    
    if ([4, 5, 6, 7].includes(date.day)) color = "green"
    if ([11, 12, 13, 14].includes(date.day)) color = "red"
    
    if (color) return { className: "highlight highlight-" + color }
  }}
/>
```

--------------------------------

### Create a basic plugin component and pass it to Calendar

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/docs

Defines a simple React component 'MyPlugin' that returns a string, and renders it inside a Calendar using the 'plugins' prop. This is the first step to building a plugin.

```jsx
import React from "react";
import { Calendar } from "react-multi-date-picker";

function MyPlugin() {
  return "my first plugin !";
}

export default function Example() {
  return (
    <Calendar 
      plugins={[<MyPlugin />]} 
    />
  )
}

```

--------------------------------

### Available Plugins

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/usage

Documentation for the available plugins that can be used with the DatePicker component.

```APIDOC
## [PLUGIN] Available Plugins

### Description
List of available plugins that can be used with the DatePicker component. Each plugin is imported from the specified path and can be used as a React Component or function.

### Method
N/A (React components/functions)

### Endpoint
N/A (React components/functions)

### Parameters
#### Plugin Properties
- **position** (string) - Optional - Position of the plugin. Default: "right". Possible values: "top", "bottom", "left", "right".
- **disabled** (boolean) - Optional - Whether the plugin is disabled. Default: false.

### Request Example
```jsx
import DatePickerHeader from "react-multi-date-picker/plugins/date_picker_header"
import DatePanel from "react-multi-date-picker/plugins/date_panel"
import colors from "react-multi-date-picker/plugins/colors"
import Settings from "react-multi-date-picker/plugins/settings"
import weekends from "react-multi-date-picker/plugins/highlight_weekends"
import Toolbar from "react-multi-date-picker/plugins/toolbar"
import TimePicker from "react-multi-date-picker/plugins/time_picker"
import AnalogTimePicker from "react-multi-date-picker/plugins/analog_time_picker"
import RangePickerFooter from "react-multi-date-picker/plugins/range_picker_footer"
```

### Response
#### Success Response
No response body. The plugins are used within the DatePicker component.

#### Response Example
N/A
```

--------------------------------

### colors plugin with DatePanel

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/colors

Shows how to use the colors plugin together with the DatePanel plugin, including setting colors on date objects.

```APIDOC
## colors plugin with DatePanel

### Description
Demonstrates using the colors plugin with the DatePanel plugin, where dates are assigned colors and the panel is sorted by color.

### Usage
```js
import React, { useState } from "react"
import DatePicker, { DateObject } from "react-multi-date-picker"
import colors from "react-multi-date-picker/plugins/colors"
import DatePanel from "react-multi-date-picker/plugins/date_panel";

const yesterday = new DateObject().subtract(1, "day");
const today = new DateObject();
const tomorrow = new DateObject().add(1, "day");

yesterday.color = "red";
today.color = "blue";
tomorrow.color = "red";

const [props, setProps] = useState({
  multiple: true,
  value: [yesterday, today, tomorrow],
  plugins: [
    colors({ colors: ["blue", "red"] }),
    <DatePanel sort="color" />,
  ],
});

<DatePicker 
  {...props} 
  onPropsChange={setProps} 
/>
```

### Options
- **colors** (Array) - Default: ["blue", "red", "green", "yellow"] - List of available colors.
- **position** (String) - Default: "bottom" - Position of the color picker.
- **disabled** (Boolean) - Default: false - Whether the plugin is disabled.
- **defaultColor** (String) - Default: first item of colors - The default color applied to dates.
```

--------------------------------

### Without Remove Button

Source: https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel

Example of using the DatePanel plugin without the remove button.

```APIDOC
## Without Remove Button

### Description
Example of using the DatePanel plugin with the removeButton prop set to false.

### Code
```jsx
import DatePicker, { DateObject } from "react-multi-date-picker"
import DatePanel from "react-multi-date-picker/plugins/date_panel" 
.
.
.
const [value, setValue] = useState([
  new DateObject(), 
  new DateObject().add(1, "day")
])
.
.
.
<DatePicker
  value={value}
  onChange={setValue}
  plugins={[
    <DatePanel
      removeButton={false}
    />
  ]}
/>
```
```

--------------------------------

### Combining Opacity and Transition with Custom CSS

Source: https://shahabyazdi.github.io/react-multi-date-picker/animations

Applies both opacity and transition animations, with transition using a custom CSS transition string and `from` value of 40.

```jsx
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(),
        transition({
          from: 40,
          transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
        }),
      ]} 
    />
  )
}

```

--------------------------------

### Import DatePicker

Source: https://shahabyazdi.github.io/react-multi-date-picker/installation

Import the default DatePicker component.

```javascript
import DatePicker from "react-multi-date-picker"
```

--------------------------------

### Custom (input)

Source: https://shahabyazdi.github.io/react-multi-date-picker/types

Shows how to use a custom input component as the render prop, with onChange to sync calendar changes.

```APIDOC
## Custom (input)

### Description
Use a custom input component as the render prop. Use onChange to see changes in the calendar as the input value changes. Note: In versions before 4, use onValueChange instead of onChange.

### Usage
```jsx
import DatePicker from "react-multi-date-picker"

export default function Example() {
  return (
    <DatePicker
      render={<CustomInput />}
    />
  )
}

function CustomInput({ onFocus, value, onChange }) {
  return (
    <input
      onFocus={onFocus}
      value={value}
      onChange={onChange}
    />
  )
}
```
```

--------------------------------

### new DateObject(options)

Source: https://shahabyazdi.github.io/react-multi-date-picker/date-object

Constructor for creating a DateObject with optional calendar and locale options.

```APIDOC
## [CONSTRUCTOR] new DateObject(options)

### Description
Creates a new DateObject instance. The constructor accepts an options object that can specify a calendar and locale for non-Gregorian calendars.

### Method
Constructor

### Parameters
#### Options Object
- **calendar** (Calendar) - Optional - The calendar system to use (e.g., persian, arabic, indian).
- **locale** (Locale) - Optional - The locale to use for formatting and month/weekday names (e.g., persian_fa, arabic_ar, indian_hi).

### Request Example
```js
const date = new DateObject({ calendar: persian, locale: persian_fa })
```

### Response
#### Success Response
Returns a DateObject instance.

#### Response Example
```js
console.log(date.format()) //۱۴۰۰/۰۴/۱۳
console.log(date.month.name) //تیر
```
```

--------------------------------

### Combining Opacity and Transition Animations

Source: https://shahabyazdi.github.io/react-multi-date-picker/animations

Applies both opacity and transition animations together, with transition customized with `from` and `duration`.

```jsx
import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(), 
        transition({ from: 35, duration: 800 })
      ]} 
    />
  )
}

```
Tokens:
Raw