React Date Picker

https://github.com/wojtekmaj/react-date-picker
Admin
A highly customizable and internationalized date picker component for React applications, offering...
Tokens:2,450
Snippets:30
Trust Score:10
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Creating JavaScript Date Object (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This is an example of creating a standard JavaScript Date object initialized to a specific date. It is used as an example value for the value prop of the date picker, representing the selected date. Note that the month is 0-indexed (0 for January, 11 for December).

```javascript
new Date(2017, 0, 1)
```

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

### Setting Date Boundaries - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript snippet demonstrates how to use the `new Date()` constructor to get the current date. It is shown as an example for setting the `maxDate` or `minDate` props of the React Date Picker component, limiting the selectable date range to the current date.

```JavaScript
new Date()
```

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

### Implementing React-Date-Picker Basic Usage (React/TSX)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Provides a basic example of how to integrate and use the `react-date-picker` component within a React functional component using TypeScript. It shows how to manage the selected date state using `useState` and pass it via the `value` prop, and how to handle changes using the `onChange` prop.

```tsx
import { useState } from 'react';
import DatePicker from 'react-date-picker';

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>(new Date());

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

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

### Getting DOM Element for React Portal (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This snippet demonstrates how to get a specific HTML element from the DOM using its ID. It is used here as an example value for the portalContainer prop, specifying where the date picker's calendar popup should be rendered using React Portals. Requires a standard browser DOM environment.

```javascript
document.getElementById('my-div')
```

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

### Creating Array of Date Strings (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This snippet provides an example of using a JavaScript array containing date strings as the value for the value prop. This format is also accepted by the date picker, representing a date range or multiple dates using string representations.

```javascript
["2017-01-01", "2017-08-01"]
```

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

### Configuring returnValue Prop Format JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Presents the valid string options for the `returnValue` prop, which determines the format of the date value passed to event handlers like `onChange`. Options include returning the `"start"` date, `"end"` date, or a `"range"` as an array.

```JavaScript
"start"
```

```JavaScript
"end"
```

```JavaScript
"range"
```

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

### Handling Calendar Open Event - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript arrow function is an example implementation for the `onCalendarOpen` prop. When the date picker's calendar view is opened, this function executes and shows a browser alert displaying 'Calendar opened', indicating the event was triggered.

```JavaScript
() => alert('Calendar opened')
```

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

### Creating Array of JavaScript Dates (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This example creates a JavaScript array containing two distinct Date objects. It demonstrates how to provide an array of dates as the value prop, typically used to represent a date range, although the component might only fully utilize the first date unless configured otherwise.

```javascript
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
```

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

### Handling Date Change Event - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript arrow function is an example handler for the `onChange` prop, which is called when a valid date is selected by the user. The function receives the selected `value` as an argument and displays it in a browser alert message prefixed with 'New date is: '.

```JavaScript
(value) => alert('New date is: ', value)
```

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

### Setting yearAriaLabel Prop JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Provides an example of setting the `yearAriaLabel` prop with a simple string literal. This prop is used to set the ARIA label attribute for the year input field, improving accessibility for screen reader users.

```JavaScript
"Year"
```

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

### Custom shouldCloseCalendar Logic JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Provides an example of a function assigned to the `shouldCloseCalendar` prop. This function receives a `reason` string and returns `false` to prevent the calendar from closing, specifically demonstrating how to prevent closing on 'outsideAction'.

```JavaScript
({ reason }) => reason !== 'outsideAction'
```

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

### Preventing React Calendar Open on Focus (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This arrow function provides an example for the shouldOpenCalendar prop. It checks the reason for the attempted opening and returns false if the reason is 'focus', preventing the calendar from opening automatically when the input field gains focus.

```javascript
({ reason }) => reason !== 'focus'
```

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

### Handling Calendar Close Event - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript arrow function serves as an example handler for the `onCalendarClose` prop. It defines a simple function that triggers a browser alert with the message 'Calendar closed' when the date picker's calendar view is closed by the user or programmatically.

```JavaScript
() => alert('Calendar closed')
```

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

### Handling Invalid Date Change Event - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript arrow function serves as an example for the `onInvalidChange` prop. It is called when the user attempts to select or enters a date that is considered invalid by the date picker component. The function simply displays a browser alert with the message 'Invalid date'.

```JavaScript
() => alert('Invalid date')
```

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

### Preventing React Calendar Close on Outside Click (JavaScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This arrow function is an example implementation for the shouldCloseCalendar prop. It receives the reason for the attempted closure and returns false specifically when the reason is 'outsideAction', thus preventing the calendar from closing when a click occurs outside its bounds.

```javascript
({ reason }) => reason !== 'outsideAction'
```

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

### Importing React-Date-Picker Default Styles (TypeScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Shows how to import the default CSS styles provided by the `react-date-picker` package. This is necessary if you wish to use the built-in styling as a base for customization or directly.

```ts
import 'react-date-picker/dist/DatePicker.css';
```

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

### Importing Default Styles for React-Date-Picker and React-Calendar

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This snippet shows how to import the default CSS files provided by the `react-date-picker` and `react-calendar` libraries. Importing these files applies the base styling necessary for the components to render correctly with their intended appearance before any custom overrides are applied.

```TypeScript
import 'react-date-picker/dist/DatePicker.css';
import 'react-calendar/dist/Calendar.css';
```

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

### Using Native HTML Date Input (HTML)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Demonstrates the basic syntax for a native HTML date input element. This can be used as an alternative to the React-Date-Picker component for projects not requiring advanced features or supporting legacy browsers. It includes an aria-label for accessibility.

```html
<input aria-label="Date" type="date" />
```

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

### Using Native HTML Date Input Element

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This snippet demonstrates how to use the standard HTML `<input type="date">` element as a native alternative for date selection. It provides basic date picking functionality without external libraries, relying on the browser's built-in implementation.

```JSX
<input aria-label="Date" type="date" />
```

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

### Creating Current Date Object - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Demonstrates how to create a standard JavaScript Date object representing the current date and time. This is commonly used for props like `minDate` or `maxDate` to set boundaries based on the present.

```JavaScript
new Date()
```

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

### Importing React-Calendar Default Styles (TypeScript)

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Shows how to import the default CSS styles for `react-calendar`, which is a dependency of `react-date-picker`. This is needed if you are using the default styling of the date picker component.

```ts
import 'react-calendar/dist/Calendar.css';
```

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

### Providing Value Prop in Various Formats JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Shows the different data types accepted by the `value` prop, including standard JavaScript Date objects, date strings in "YYYY-MM-DD" format, and arrays containing either Dates or strings. Arrays are typically used for date ranges, with the component primarily using the first element.

```JavaScript
new Date(2017, 0, 1)
```

```JavaScript
"2017-01-01"
```

```JavaScript
[new Date(2017, 0, 1), new Date(2017, 7, 1)]
```

```JavaScript
["2017-01-01", "2017-08-01"]
```

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

### Basic Usage of React-Date-Picker Component in React

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This code snippet illustrates how to use the `react-date-picker` component within a React functional component. It demonstrates managing the selected date using the `useState` hook and passing the current value and an update function to the `DatePicker` component's `value` and `onChange` props, respectively.

```TypeScript
import { useState } from 'react';
import DatePicker from 'react-date-picker';

type ValuePiece = Date | null;

type Value = ValuePiece | [ValuePiece, ValuePiece];

function MyApp() {
  const [value, onChange] = useState<Value>(new Date());

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

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

### Setting portalContainer Prop with DOM Element JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Demonstrates how to provide a specific DOM element reference using `document.getElementById` as the value for the `portalContainer` prop, allowing the calendar to be rendered inside this element via a portal. Requires the element to exist in the DOM.

```JavaScript
document.getElementById('my-div')
```

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

### Handling Input Focus Event - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/README.md

This JavaScript arrow function demonstrates a handler for the `onFocus` prop, triggered when any input element within the date picker receives focus. The function receives the native browser `event` object and uses it to display an alert showing the name of the focused input element.

```JavaScript
(event) => alert('Focused input: ', event.target.name)
```

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

### Basic Event Handler - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Presents a simple JavaScript arrow function commonly used for event handler props like `onCalendarOpen`, `onCalendarClose`, or `onInvalidChange`. These functions execute a side effect, like showing an alert, when the corresponding event occurs and typically do not receive arguments.

```JavaScript
() => alert('Calendar closed')
```

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

### Setting yearPlaceholder Prop JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Shows how to set the `yearPlaceholder` prop using a string literal. This prop defines the placeholder text displayed within the year input field when it is empty.

```JavaScript
"yyyy"
```

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

### Custom shouldOpenCalendar Logic JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Illustrates a function used for the `shouldOpenCalendar` prop. This function receives the `reason` for opening and can return `false` to cancel the action, shown here preventing the calendar from opening when the input gains 'focus'.

```JavaScript
({ reason }) => reason !== 'focus'
```

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

### Value Change Handler - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Shows a JavaScript arrow function suitable for the `onChange` prop. This function is called when the user picks a valid date and receives the new date value as its argument. It's typically used to update the component's state with the selected value.

```JavaScript
(value) => alert('New date is: ', value)
```

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

### Input Focus Handler - JavaScript

Source: https://github.com/wojtekmaj/react-date-picker/blob/main/packages/react-date-picker/README.md

Illustrates a JavaScript arrow function for the `onFocus` prop. This function is triggered when an input field within the date picker gains focus. It receives the standard focus event object, allowing access to event details like the target element.

```JavaScript
(event) => alert('Focused input: ', event.target.name)
```
Tokens:
Raw