Date Range Picker
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library . This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
or
Get CoreUI PRO →
Example
With timepicker
Date Range Picker Sizing

Set heights using data-coreui-size attribute like data-coreui-size="lg" and data-coreui-size="sm" .

Date Range Picker Disabled

Add the data-coreui-disabled="true" attribute on an input to give it a grayed out appearance and remove pointer events.

Date Range Picker Readonly

Add the data-coreui-input-read-only="true" boolean attribute to prevent modification of the input’s value.

Date Range Picker Disabled dates
Date Range Picker Custom ranges
var options = { locale: 'en-US', calendarDate: new Date(2022, 2, 1), disabledDates: [ [new Date(2022, 2, 4), new Date(2022, 2, 7)], new Date(2022, 2, 16), new Date(2022, 3, 16), [new Date(2022, 4, 2), new Date(2022, 4, 8)] ], maxDate: new Date(2022, 5, 0), minDate: new Date(2022, 1, 1) } var myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), options) var optionsCustomRanges = { locale: 'en-US', ranges: { Today: [new Date(), new Date()], Yesterday: [ new Date(new Date().setDate(new Date().getDate() - 1)), new Date(new Date().setDate(new Date().getDate() - 1)), ], 'Last 7 Days': [ new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date()), ], 'Last 30 Days': [ new Date(new Date().setDate(new Date().getDate() - 29)), new Date(new Date()), ], 'This Month': [ new Date(new Date().setDate(1)), new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), ], 'Last Month': [ new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1), new Date(new Date().getFullYear(), new Date().getMonth(), 0), ] } } var myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)