Date Picker

import React, { useState } from 'react';
import { Form } from 'react-bootstrap';
import DateRangePicker from 'react-bootstrap-daterangepicker';
import 'bootstrap-daterangepicker/daterangepicker.css';
import moment from 'moment';

const DatePickerExample = () => {
    const [state, setState] = useState({
        start: moment().subtract(29, 'days'),
        end: moment(),
    });
    const { start, end } = state;
    const handleCallback = (start, end) => {
        setState({ start, end });
    };
    const label = start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY');
    const hideCalender = (ev, picker) => {
        picker.container.find(".calendar-table").hide();
    };

  return (
    <Form>
        <Form.Group className="mb-3">
            <Form.Label>Date Range Picker</Form.Label>
            <DateRangePicker
                initialSettings={{ startDate: '01/01/2022', endDate: '01/15/2022' }}
            >
                <Form.Control type="text" name="daterange" />
            </DateRangePicker>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label>Date Range Picker With Times</Form.Label>
            <DateRangePicker
                initialSettings={{
                    timePicker: true,
                    startDate: moment().startOf('hour').toDate(),
                    endDate: moment().startOf('hour').add(32, 'hour').toDate(),
                    locale: {
                        format: 'M/DD hh:mm A',
                    },
                }}
            >
                <Form.Control type="text" name="datetimes" />
            </DateRangePicker>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label>Single Date Picker</Form.Label>
            <DateRangePicker
                initialSettings={{
                    singleDatePicker: true,
                    showDropdowns: true,
                    startDate: '10/18/1984',
                    minYear: 1901,
                    maxYear: parseInt(moment().format('YYYY'), 10),
                }}
                onCallback={(start) => {
                    const years = moment().diff(start, 'years');
                    alert('You are ' + years + ' years old!');
                }}
            >
                <Form.Control type="text" name="birthday" />
            </DateRangePicker>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label>Limit Selectable Dates</Form.Label>
            <DateRangePicker
                initialSettings={{
                    format: 'MM/DD/YYYY',
                    minDate: '06/01/2018',
                    maxDate: '06/30/2018',
                    buttonClasses: ['btn', 'btn-sm'],
                    "cancelClass": "btn-secondary",
                    dateLimit: {
                        days: 6
                    }
                }}
            >
                <Form.Control className="input-limit-datepicker" type="text" name="daterange" />
            </DateRangePicker>
        </Form.Group>
        <Form.Group className="mb-3">
            <Form.Label>Predefined Date Ranges</Form.Label>
            <DateRangePicker
                initialSettings={{
                    startDate: start.toDate(),
                    endDate: end.toDate(),
                    ranges: {
                        Today: [moment().toDate(), moment().toDate()],
                        Yesterday: [
                            moment().subtract(1, 'days').toDate(),
                            moment().subtract(1, 'days').toDate(),
                        ],
                        'Last 7 Days': [
                            moment().subtract(6, 'days').toDate(),
                            moment().toDate(),
                        ],
                        'Last 30 Days': [
                            moment().subtract(29, 'days').toDate(),
                            moment().toDate(),
                        ],
                        'This Month': [
                            moment().startOf('month').toDate(),
                            moment().endOf('month').toDate(),
                        ],
                        'Last Month': [
                            moment().subtract(1, 'month').startOf('month').toDate(),
                            moment().subtract(1, 'month').endOf('month').toDate(),
                        ],
                    },
                }}
                onCallback={handleCallback}
            >
                <Form.Control as="div" id="reportrange" className="text-truncate">
                    <i className="fa fa-calendar text-light-40" /> 
                    <span /> {label} <i className="fa fa-caret-down text-light-40 font-12 ms-10" />
                </Form.Control>
            </DateRangePicker>
        </Form.Group>
        <Form.Group>
            <Form.Label>Time Select</Form.Label>
            <DateRangePicker
                initialSettings={{
                    timePicker: true,
                    timePicker24Hour: true,
                    timePickerIncrement: 1,
                    timePickerSeconds: true,
                    locale: {
                        format: 'HH:mm:ss'
                    }
                }}
                onShow={hideCalender}
            >
                <Form.Control className="input-timepicker" type="text" name="time" />
            </DateRangePicker>
        </Form.Group>
    </Form>
  );
}

export default DatePickerExample;