"peerDependencies": {
    "react": ">= 16.8.6",
    "react-dom": ">= 16.8.6"
  }

import { CalendarPicker, RangePicker } from 'react-minimal-datetime-range';
import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';

<CalendarPicker
  locale={`en-us`} // ['en-us', 'zh-cn','ko-kr']; default is en-us
  show={showCalendarPicker} //default is false
  allowPageClickToClose={true} // default is true
  onClose={() => setShowCalendarPicker(false)}
  defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "YYYY-MM-DD"
  onYearPicked={res => console.log(res)}
  onMonthPicked={res => console.log(res)}
  onDatePicked={res => console.log(res)}
  onResetDate={res => console.log(res)}
  onResetDefaultDate={res => console.log(res)}
  style={{ width: '300px', margin: '10px auto 0' }}
  // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`]} // OPTIONAL. ['YYYY-MM-DD']
  // supportDateRange={[`2022-02-16`, `2022-12-10`]} // "YYYY-MM-DD"
  // defaultTimes={['10:12']} // OPTIONAL
  // enableTimeSelection={true} // OPTIONAL
  // handleChooseHourPick={res => console.log(res)} // OPTIONAL
  // handleChooseMinutePick={res => console.log(res)} // OPTIONAL
/>

<RangePicker
  locale="en-us"// ['en-us', 'zh-cn','ko-kr']; default is en-us
  show={false} // default is false
  disabled={false} // default is false
  allowPageClickToClose={true} // default is true
  onConfirm={res => console.log(res)}
  onClose={() => console.log('onClose')}
  onClear={() => console.log('onClear')}
  style={{ width: '300px', margin: '0 auto' }}
  placeholder={['Start Time', 'End Time']}
  // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`]} // OPTIONAL. ['YYYY-MM-DD']
  showOnlyTime={false} // default is false, only select time
  ////////////////////
  // IMPORTANT DESC //
  ////////////////////
  defaultDates={[year+'-'+month+'-'+date,year+'-'+month+'-'+date]}
  // ['YYYY-MM-DD', 'YYYY-MM-DD']
  // This is the value you choosed every time.
  defaultTimes={[hour+':'+minute,hour+':'+minute]}
  // ['hh:mm', 'hh:mm']
  // This is the value you choosed every time.
  initialDates={[year+'-'+month+'-'+date,year+'-'+month+'-'+date]}
  // ['YYYY-MM-DD', 'YYYY-MM-DD']
  // This is the initial dates.
  // If provied, input will be reset to this value when the clear icon hits,
  // otherwise input will be display placeholder
  initialTimes={[hour+':'+minute,hour+':'+minute]}
  // ['hh:mm', 'hh:mm']
  // This is the initial times.
  // If provied, input will be reset to this value when the clear icon hits,
  // otherwise input will be display placeholder
/>