Date / time picker

A lightweight and powerful date / time picker component.

The date and time picker functionality is implemented using the DatePicker React component. Ensure to import all required component's files:

import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

Date picker

Choose date (m/d/yyyy default format)

Choose date (MMMM d, yyyy format)

Choose date (MMM do, yyyy format)

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function DatePickerDemo() {
  const [startDate1, setStartDate1] = useState<Date | null>(null)
  const [startDate2, setStartDate2] = useState<Date | null>(null)
  const [startDate3, setStartDate3] = useState<Date | null>(null)

  return (
    <>
      {/* Default date format: m/d/Y */}
      <FormLabel htmlFor="date-1">
        Choose date <span className="text-body-secondary fs-xs fw-normal">(m/d/yyyy default format)</span>
      </FormLabel>
      <div className="position-relative mb-3">
        <DatePicker
          selected={startDate1}
          onChange={(date) => setStartDate1(date)}
          className="form-control form-icon-end"
          id="date-1"
          placeholderText="Choose date"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>

      {/* Date format: MMMM d, Y */}
      <FormLabel htmlFor="date-2">
        Choose date <span className="text-body-secondary fs-xs fw-normal">(MMMM d, yyyy format)</span>
      </FormLabel>
      <div className="position-relative mb-3">
        <DatePicker
          selected={startDate2}
          onChange={(date) => setStartDate2(date)}
          dateFormat="MMMM d, yyyy"
          className="form-control form-icon-end"
          id="date-2"
          placeholderText="Choose date"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>

      {/* Date format: MMM do, Y */}
      <FormLabel htmlFor="date-3">
        Choose date <span className="text-body-secondary fs-xs fw-normal">(MMM do, yyyy format)</span>
      </FormLabel>
      <div className="position-relative">
        <DatePicker
          selected={startDate3}
          onChange={(date) => setStartDate3(date)}
          dateFormat="MMM do, yyyy"
          className="form-control form-icon-end"
          id="date-3"
          placeholderText="Choose date"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>
    </>
  )
}

Clearable input

Choose date

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function DatePickerClearableDemo() {
  const [startDate, setStartDate] = useState<Date | null>(new Date())

  return (
    <>
      <FormLabel htmlFor="clearableInput">Choose date</FormLabel>
      <div className="position-relative">
        <i className="ci-calendar position-absolute top-50 start-0 translate-middle-y z-1 ms-3"/>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          isClearable
          className="form-control form-icon-start"
          id="clearableInput"
          placeholderText="Choose date"
          popperPlacement="bottom-start"
        />
      </div>
    </>
  )
}

Date and time picker

Time select example

Time input example

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function DateTimePickerDemo() {
  const [startDate1, setStartDate1] = useState<Date | null>(null)
  const [startDate2, setStartDate2] = useState<Date | null>(null)

  return (
    <>
      {/* Time select example with 12-hour time format */}
      <FormLabel htmlFor="timeSelect">Time select example</FormLabel>
      <div className="position-relative mb-3">
        <DatePicker
          selected={startDate1}
          onChange={(date) => setStartDate1(date)}
          showTimeSelect
          dateFormat="MMM d, yyyy hh:mm aa"
          className="form-control form-icon-end"
          id="timeSelect"
          placeholderText="Choose date and time"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>

      {/* Time input example with 24-hour time format */}
      <FormLabel htmlFor="timeInput">Time input example</FormLabel>
      <div className="position-relative">
        <DatePicker
          selected={startDate2}
          onChange={(date) => setStartDate2(date)}
          showTimeInput
          dateFormat="MMM d, yyyy HH:mm"
          className="form-control form-icon-end"
          id="timeInput"
          placeholderText="Choose date and time"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>
    </>
  )
}

Min and max dates

Choose date

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function DatePickerMinMaxDemo() {
  const [startDate, setStartDate1 = useState<Date | null>(null)

  return (
    <>
      <FormLabel htmlFor="minMaxDates">Choose date</FormLabel>
      <div className="position-relative">
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          minDate={new Date('01/01/2025')}
          maxDate={new Date('01/31/2025')}
          className="form-control form-icon-end"
          id="minMaxDates"
          placeholderText="Select a date in Jan 2025"
          popperPlacement="bottom-start"
        />
        <i className="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"/>
      </div>
    </>
  )
}

Date range

'use client'

import { useState } from 'react'
import FormLabel from 'react-bootstrap/FormLabel'
import InputGroup from 'react-bootstrap/InputGroup'
import InputGroupText from 'react-bootstrap/InputGroupText'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'

export default function DateRangePickerDemo() {
  const [startDate, setStartDate] = useState<Date | null>(null)
  const [endDate, setEndDate] = useState<Date | null>(null)

  return (
    <>
      <FormLabel>Date range</FormLabel>
      <InputGroup className="flex-nowrap">
        <InputGroupText>
          <i className="ci-calendar fs-base"/>
        </InputGroupText>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          selectsStart
          startDate={startDate}
          endDate={endDate}
          minDate={new Date()}
          className="form-control rounded-0"
          placeholderText="From date"
          popperPlacement="bottom-start"
        />
        <DatePicker
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          selectsEnd
          startDate={startDate}
          endDate={endDate}
          minDate={new Date()}
          className="form-control rounded-start-0"
          placeholderText="To date"
          popperPlacement="bottom-start"
        />
      </InputGroup>
    </>
  )
}