React Date Range Picker Component

1<CDateRangePicker locale="en-US" />
2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" locale="en-US" />

1<CDateRangePicker footer locale="en-US" />
2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" footer locale="en-US" />

1<CDateRangePicker locale="en-US" timepicker />

1<CDateRangePicker locale="en-US" size="lg" />
2<CDateRangePicker locale="en-US" size="sm" />

1<CDateRangePicker disabled locale="en-US" />

1<CDateRangePicker inputReadOnly locale="en-US" />

1const calendarDate = new Date(2022, 2, 1)
2const disabledDates = [
3  [new Date(2022, 2, 4), new Date(2022, 2, 7)], // range of dates that cannot be selected
4  new Date(2022, 2, 16), // single date that cannot be selected
5  new Date(2022, 3, 16), // single date that cannot be selected
6  [new Date(2022, 4, 2), new Date(2022, 4, 8)], // range of dates that cannot be selected
7]
8const maxDate = new Date(2022, 5, 0)
9const minDate = new Date(2022, 1, 1)
10return (
11  <div className="row">
12    <div className="col-lg-5">
13      <CDateRangePicker
14        calendarDate={calendarDate}
15        disabledDates={disabledDates}
16        locale="en-US"
17        maxDate={maxDate}
18        minDate={minDate}
19      />
20    </div>
21  </div>
22)

1const customRanges = {
2  Today: [new Date(), new Date()],
3  Yesterday: [
4    new Date(new Date().setDate(new Date().getDate() - 1)),
5    new Date(new Date().setDate(new Date().getDate() - 1)),
6  ],
7  'Last 7 Days': [
8    new Date(new Date().setDate(new Date().getDate() - 6)),
9    new Date(new Date()),
10  ],
11  'Last 30 Days': [
12    new Date(new Date().setDate(new Date().getDate() - 29)),
13    new Date(new Date()),
14  ],
15  'This Month': [
16    new Date(new Date().setDate(1)),
17    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
18  ],
19  'Last Month': [
20    new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
21    new Date(new Date().getFullYear(), new Date().getMonth(), 0),
22  ],
23}
24return (
25  <div className="row">
26    <div className="col-lg-5">
27      <CDateRangePicker ranges={customRanges} />
28    </div>
29  </div>
30)

1<CDateRangePicker />

1<CDateRangePicker locale="zh-CN" placeholder={["入住日期", "退房日期"]} />

1<CDateRangePicker locale="ja" placeholder={["日付を選択", "終了日"]} />

1<CDateRangePicker locale="ko" placeholder={["날짜 선택", "종료일"]} />

1<CDateRangePicker placeholder={["בחר תאריך", "תאריך סיום"]} locale="he-IL" />

1<CDateRangePicker locale="fa-IR" placeholder={["تاریخ شروع", "تاریخ پایان"]} />