To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
Create consistent cross-browser and cross-device date range picker
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.
1<CDateRangePicker label="Date range" locale="en-US" />2<CDateRangePicker startDate="2022/08/03" endDate="2022/08/17" label="Date range" 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 />
Set heights using size
property like size="lg"
and size="sm"
.
1<CDateRangePicker locale="en-US" size="lg" />2<CDateRangePicker locale="en-US" size="sm" />
Add the disabled
boolean attribute on an input to give it a grayed out appearance and remove pointer events.
1<CDateRangePicker disabled locale="en-US" />
Add the inputReadOnly
boolean attribute to prevent modification of the input's value.
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 selected4 new Date(2022, 2, 16), // single date that cannot be selected5 new Date(2022, 3, 16), // single date that cannot be selected6 [new Date(2022, 4, 2), new Date(2022, 4, 8)], // range of dates that cannot be selected7]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 <CDateRangePicker14 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={["날짜 선택", "종료일"]} />
RTL support is built-in and can be explicitly controlled through the $enable-rtl
variables in scss.
1<CDateRangePicker placeholder={["בחר תאריך", "תאריך סיום"]} locale="he-IL" />