# Datepicker

Datepicker controls in Pages are powered by the react-modern-calendar-datepicker plugin.

# How to use

All the datepickers are customized in a way that it suites our theme and design. You can implement it in your dashboard using the code below.

# Importing

import DatePicker from "react-modern-calendar-datepicker";

# Simple date picker

const [simpleDateOne, setSimpleDateOne] = useState(null);
const [simpleDateTwo, setSimpleDateTwo] = useState(null);

<div>
  <div
    className="input-group date col-md-8 p-l-0"
    style={{ width: "75%", zIndex: 17 }}
  >
    <DatePicker
      onChange={(value) => setSimpleDateOne(value)}
      value={simpleDateOne}
      inputPlaceholder=" "
      shouldHighlightWeekends
      calendarPopperPosition="bottom"
      inputClassName="DatePicker-Input"
    />
    <span className="input-group-text input-date-icon">
      <i className="pg-icon">calendar</i>
    </span>
  </div>
  <br />
  <label className="check-in-label">Check In</label>
  <div
    className="input-group date input-date col-md-8 p-l-0"
    style={{ width: "75%", zIndex: 15 }}
  >
    <DatePicker
      onChange={(value) => setSimpleDateTwo(value)}
      value={simpleDateTwo}
      inputName="Check In"
      inputPlaceholder="Pick a date"
      shouldHighlightWeekends
      calendarPopperPosition="bottom"
      inputClassName="DatePicker-Input-Typehead"
    />
    <span className="input-group-text date-icon">
      <i className="pg-icon">calendar</i>
    </span>
  </div>
</div>;

# Date range picker

const [rangeDateOne, setRangeDateOne] = useState(null);
const [rangeDateTwo, setRangeDateTwo] = useState(null);

<div
  className="input-daterange input-group"
  id="datepicker-range"
  style={{ zIndex: 11 }}
>
  <DatePicker
    onChange={(value) => setRangeDateOne(value)}
    value={rangeDateOne}
    inputPlaceholder=" "
    calendarPopperPosition="bottom"
    shouldHighlightWeekends
  />
  <div className="input-group-addon"> to </div>
  <DatePicker
    onChange={(value) => setRangeDateTwo(value)}
    value={rangeDateTwo}
    inputPlaceholder=" "
    calendarPopperPosition="bottom"
    shouldHighlightWeekends
  />
</div>;