How to pass unique ID to multiple Datepicker in REACT?

Active3 hr before
Viewed126 times

10 Answers


I'm using Clay UI Date Picker. I render multiple Date Picker when I select date it applies to all., The issue is with the props (value, onValueChange) in DatePicker. That's why when I select one date it applies to all. How to make it dynamically? – Anonymous Jul 14 at 13:08 , Tried pass id and key as props in ClayDatePicker – Anonymous Jul 14 at 13:04

 Pretag team - issue, fix, solve, resolve

You can set a unique prop in the state for each datepicker by its name attribute using computed property

handleChange = (e, date) => {
   const value = moment(date);
   const chargeId =;
      [chargeId]: value
   }, () => console.log(this.state[chargeId]));

Simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date in single, multiple and range modes.,You can change the appearance of the datepicker to prime or mobile by importing css files from the styles folder.,Ability to further customize the calendar and datepicker by adding one or more plugins.


npm install--save react - multi - date - picker
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} />;
<!DOCTYPE html>
    <meta charset="UTF-8" />
    <title>React Multi Date Picker</title>
    <span>Calendar Example :</span>
    <div id="calendar"></div>

    <span>DatePicker Example :</span>
    <div id="datePicker"></div>

    <span>Plugins Example :</span>
    <div id="datePickerWithPlugin"></div>

    <!-- Ract -->
    <script src=""></script>
    <script src=""></script>

    <!-- DatePicker and dependencies-->
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

    <!-- Optional Plugin -->
    <script src=""></script>

      const { DatePicker, Calendar } = ReactMultiDatePicker;



        React.createElement(DatePicker, {
          plugins: [React.createElement(DatePickerHeader)],
load more v

getDefaultLocale: returns a string showing the currently set default locale, setDefaultLocale (string): sets a registered locale as the default for all datepicker instances,You can also include a time picker by adding the showTimeSelect prop

The package can be installed via npm:

npm install react - datepicker--save

Or via yarn:

yarn add react - datepicker
import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
<DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />
  onSelect={handleDateSelect} //when day is clicked
  onChange={handleDateChange} //only when value has changed
import { registerLocale, setDefaultLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)

load more v

Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.,@material-ui/pickers provides date picker and time picker controls.,Native pickersDatepickersDate & Time pickersTime pickers

<form className={classes.container} noValidate>
      shrink: true,
load more v

 Pretag team - issue, fix, solve, resolve

Here we are using an <input> element with id=date and binding the datepicker() widget to this input text field. The datepicker will automatically be positioned below the input field when a user clicks it. The calendar will be hidden when the user clicks outside. If the user chooses a date, the date will then be displayed in the input field:,Create a new file ’3-datepicker.html’. First use this CSS to hide the calendar display using display: none on .ui-datepicker-calendar element,Create a new file ‘datepicker.html’ in a folder. Here’s how to write the HTML code and call the datepicker() method in the <script> tag.

 Pretag team - issue, fix, solve, resolve

Hi @tyleralves , My solution was to write a closure that returns a function specific to the active react dates instance.,My thoughts were that react-dates would behave much like any other input element. Of course the moment object needs to be passed to the callback, but it seems counter-intuitive to not have the event passed like any other input.,I'm trying to figure out the best way to detect which of the date-range pickers is being changed and handle the event accordingly in the onFocusChange and onDateChange callbacks without writing a separate handler with superficial differences to target the appropriate attribute for each instance of the component.

onFocusChange(event, focusedInput) {
   var newState = object.assign({}, this.state);
   newState[].focusedInput = focusedInput;
load more v

CAUTION: This marking is only fully supported by the <Calendar/> component because it expands its height. Usage with <CalendarList/> might lead to overflow issues.,Use markingType={'multi-dot'} if you want to display more than one dot. Both the <Calendar/> and <CalendarList/> support multiple dots by using dots array in markedDates prop. The property color is mandatory while key and selectedColor are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then color will be used for selected dates.,You can also make the CalendarList scroll horizontally. To do that you need to pass specific props to the CalendarList:

$ git clone git wix / react - native - calendars.git
$ npm install
$ react - native run - ios
load more v

For each input[type="date"] field, a unique-id hidden field is created.,The name attribute of the date field is removed and added to the hidden field.,In addition to the basic date-input field, there are other time-related field types:

Before loading the callback script, we need to verify browser support. A simple way to do this is to feature detect with Modernizr, like in my previous test, using its resource loader to load fallback scripts only if needed:

   nope: [
   callback: function() {
      // do something if test fails
load more v

Other "unique-multiple" queries related to "How to pass unique ID to multiple Datepicker in REACT?"