### Install react-multi-date-picker
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Installs the react-multi-date-picker package using npm. This is the first step to integrate the date picker into your React project.
```bash
npm i react-multi-date-picker
```
--------------------------------
### Browser (non-React App) DatePicker Integration
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Provides an example of how to use the react-multi-date-picker in a standard HTML file without a React build setup. It includes CDN links for React, ReactDOM, and the date picker library, along with script tags to render the Calendar and DatePicker components, including one with a plugin.
```html
React Multi Date Picker
Calendar Example :
DatePicker Example :
Plugins Example :
```
--------------------------------
### Using 'ref' prop for programmatic access
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'ref' prop allows you to get a reference to the DatePicker component, enabling programmatic control or access to its methods.
```jsx
import React, { useRef } from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const datePickerRef = useRef();
return (
);
}
```
--------------------------------
### Create Custom Locale
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Users can define custom locales to tailor the date picker's language and formatting. The documentation provides a guide on creating and applying custom locale objects.
```link
https://shahabyazdi.github.io/react-multi-date-picker/locales/#custom-locale
```
--------------------------------
### Basic React DatePicker Usage
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Demonstrates a simple implementation of the DatePicker component in a React application. It shows how to manage the selected date using the useState hook and pass it to the DatePicker component.
```javascript
import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
export default function Example() {
const [value, setValue] = useState(new Date());
return ;
}
```
--------------------------------
### Create Custom Calendar
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The library allows for the creation of custom calendars. Refer to the provided link for detailed instructions on how to implement your own calendar logic and integrate it with the date picker component.
```link
https://shahabyazdi.github.io/react-multi-date-picker/calendars/#custom-calendar
```
--------------------------------
### Using 'formattingIgnoreList' for custom formatting
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'formattingIgnoreList' prop allows you to specify parts of the date format that should not be localized or altered during formatting.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Handling month and year changes with 'onMonthChange' and 'onYearChange'
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Callbacks 'onMonthChange' and 'onYearChange' are provided to react to changes in the currently displayed month or year, respectively.
```jsx
import React, { useState } from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const [currentMonth, setCurrentMonth] = useState(null);
const [currentYear, setCurrentYear] = useState(null);
return (
setCurrentMonth(month.number)}
onYearChange={({ year }) => setCurrentYear(year)}
/>
);
}
```
--------------------------------
### Customizing calendar appearance with 'calendar' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'calendar' prop lets you switch between different calendar systems, such as Gregorian or Jalali. You need to import the corresponding calendar object.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
import gregorian_fa from 'react-date-object/locales/gregorian_fa';
import persian_calendar from 'react-date-object/calendars/persian';
function App() {
return (
);
}
```
--------------------------------
### Handling prop changes with 'onPropsChange'
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'onPropsChange' callback is triggered whenever any of the component's props are updated, providing a way to react to configuration changes.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const handlePropsChange = (newProps) => {
console.log('Props changed:', newProps);
};
return (
);
}
```
--------------------------------
### Using 'locale' prop for internationalization
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'locale' prop allows you to specify the language and formatting conventions for the date picker. You can import different locale objects.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
import gregorian_fa from 'react-date-object/locales/gregorian_fa';
function App() {
return (
);
}
```
--------------------------------
### Using 'mapDays' for custom day rendering
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'mapDays' prop accepts a function that allows you to customize the rendering of individual days, such as applying specific styles or disabling certain dates.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const mapDays = (date) => {
let props = {};
if (date.day === 15) {
props.style = {
backgroundColor: 'red',
color: 'white'
};
}
return props;
};
return (
);
}
```
--------------------------------
### Customizing week days with 'weekDays' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'weekDays' prop allows you to customize the labels for the days of the week, useful for different languages or display preferences.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const customWeekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
return (
);
}
```
--------------------------------
### Customizing months with 'months' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Similar to 'weekDays', the 'months' prop lets you provide custom names for the months, supporting localization or specific naming conventions.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const customMonths = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
return (
);
}
```
--------------------------------
### Customize Calendar Months and Week Days
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
You can customize the names of months and days of the week in both the calendar and input fields by utilizing the `months` and `weekDays` props. This allows for greater flexibility in internationalization and user experience.
```javascript
import React from 'react';
import DatePicker from 'react-multi-date-picker';
function MyDatePicker() {
const customMonths = [
{ name: 'January', short: 'Jan', date: '1' },
// ... other months
];
const customWeekDays = [
{ name: 'Sunday', short: 'Sun', date: '0' },
// ... other days
];
return (
);
}
```
--------------------------------
### Handling date changes with 'onChange' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'onChange' prop is a callback function that is triggered whenever the selected date(s) change. It receives the new date value as an argument.
```jsx
import React, { useState } from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
);
}
```
--------------------------------
### Using the 'value' prop in React Multi Date Picker
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'value' prop accepts a Date object, DateObject, String, Number, or an Array to set the initial date(s) for the picker. It defaults to the current date.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Configuring date formatting with 'format' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'format' prop allows you to specify the display format for dates. The default format is 'YYYY/MM/DD'.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Handling multiple date selections with 'multiple' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Set the 'multiple' prop to true to allow users to select multiple, non-contiguous dates. The 'value' prop should be an array of dates.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Setting minimum and maximum dates with 'minDate' and 'maxDate'
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'minDate' and 'maxDate' props restrict the selectable date range. They accept Date objects, DateObject, Strings, or Numbers.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Handling focused date changes with 'onFocusedDateChange'
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'onFocusedDateChange' prop is a callback function that is invoked when the currently focused date within the calendar changes.
```jsx
import React, { useState } from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const [focusedDate, setFocusedDate] = useState(null);
return (
setFocusedDate(date)}
/>
);
}
```
--------------------------------
### Controlling visibility of other days with 'showOtherDays' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Set 'showOtherDays' to true to display days from the previous or next month in the current view. Defaults to false.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Customizing digits with 'digits' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
The 'digits' prop enables the customization of the digits used in the date display, which can be useful for non-Latin scripts or specific numeral systems.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
const customDigits = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
return (
);
}
```
--------------------------------
### DatePicker Component Props
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
This snippet details the properties that can be passed to the DatePicker component. It includes event handlers like onOpen and onClose, styling properties such as containerClassName and arrowStyle, and behavioral props like scrollSensitive and editable.
```javascript
/*
Props for react-multi-date-picker:
Event Handlers:
- onOpen: Function
- onClose: Function
- onPositionChange: Function
Styling:
- containerClassName: String
- arrowClassName: String
- containerStyle: React.CSSProperties
- arrowStyle: React.CSSProperties
- inputClass: String
Behavioral:
- arrow: Boolean or React.ReactElement (default: true)
- animations: Array (default: false)
- scrollSensitive: Boolean (default: true)
- hideOnScroll: Boolean (default: false)
- calendarPosition: String (default: "bottom-left")
- editable: Boolean (default: true)
- onlyShowInRangeDates: Boolean (default: true)
- fixMainPosition: Boolean (default: false)
- fixRelativePosition: Boolean (default: false)
- offsetY: Number (default: 0)
- offsetX: Number (default: 0)
Input Attributes:
- name: String
- id: String
- title: String
- required: Boolean
- placeholder: String
- render: React.ReactElement or Function
- inputMode: String
*/
```
--------------------------------
### Setting date range with 'range' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Set the 'range' prop to true to enable date range selection. The 'value' prop should then be an array of two dates.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Enabling only month picker with 'onlyMonthPicker' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Set 'onlyMonthPicker' to true to restrict the picker to only display and allow selection of months.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Enabling only year picker with 'onlyYearPicker' prop
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
Set 'onlyYearPicker' to true to restrict the picker to only display and allow selection of years.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
--------------------------------
### Disabling specific picker types with 'disableYearPicker' and 'disableMonthPicker'
Source: https://github.com/shahabyazdi/react-multi-date-picker/blob/master/README.md
You can prevent users from accessing the year or month pickers by setting 'disableYearPicker' or 'disableMonthPicker' to true.
```jsx
import React from 'react';
import MultiDatePicker from 'react-multi-date-picker';
function App() {
return (
);
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.