Date / time picker

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

{/* Date picker example with placeholder */}
const DatePickerExample = () => {
  const [startDate, setStartDate] = useState(new Date())

  return (
    <Form.Group controlId='date-input'>
      <Form.Label>Choose date</Form.Label>
      <InputGroup>
        <Form.Control
          as={DatePicker}
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          placeholderText='Choose date'
          className='rounded pe-5'
        />
        <i className='fi-calendar position-absolute top-50 end-0 translate-middle-y me-3'></i>
      </InputGroup>
    </Form.Group>
  )
}

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

{/* Date and time picker example with custom date format */}
const DateTimePickerExample = () => {
  const [startDate, setStartDate] = useState(new Date())

  return (
    <Form.Group controlId='date-time-input'>
      <Form.Label>Choose date and time</Form.Label>
      <InputGroup>
        <Form.Control
          as={DatePicker}
          showTimeSelect
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          dateFormat='MMMM d, yyyy h:mm aa'
          className='rounded pe-5'
        />
        <i className='fi-calendar position-absolute top-50 end-0 translate-middle-y me-3'></i>
      </InputGroup>
    </Form.Group>
  )
}

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

{/* Date picker example with min and max date set */}
const DateMaxMinPickerExample = () => {
  const [startDate, setStartDate] = useState(null)

  return (
    <Form.Group controlId='date-min-max-input'>
      <Form.Label>Choose date</Form.Label>
      <InputGroup>
        <Form.Control
          as={DatePicker}
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          minDate={new Date('02/01/2022')}
          maxDate={new Date('02/29/2022')}
          placeholderText="Select a date in Feb 2022"
          className='rounded pe-5'
        />
        <i className='fi-calendar position-absolute top-50 end-0 translate-middle-y me-3'></i>
      </InputGroup>
    </Form.Group>
  )
}

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

{/* Date range example */}
const DateRangeExample = () => {
  const [startDate4, setStartDate4] = useState(new Date('03/10/2022'))
  const [endDate, setEndDate] = useState(new Date('03/20/2022'))

  return (
    <Form.Group>
      <Form.Label>Date range</Form.Label>
      <InputGroup className='flex-nowrap'>
        <InputGroup.Text>
          <i className='fi-calendar'></i>
        </InputGroup.Text>
        <Form.Control
          as={DatePicker}
          selected={startDate4}
          onChange={(date) => setStartDate4(date)}
          selectsStart
          startDate={startDate4}
          endDate={endDate}
          placeholderText='To date'
          className='rounded-0'
        />
        <Form.Control
          as={DatePicker}
          selected={endDate}
          onChange={(date) => setEndDate(date)}
          selectsEnd
          startDate={startDate4}
          endDate={endDate}
          minDate={startDate4}
          placeholderText='To date'
          className='rounded-start-0'
        />
      </InputGroup>
    </Form.Group>
  )
}