Date Range Picker
Date Range Picker can be attached to any webpage element to pop up one or two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".
Date Range Picker for WireBootstrap brings Date Range Picker into the WireBootstrap framework providing a powerful way of filtering data by dates in applications developed with Bootstrap themes.
Installation
The Date Range Picker for WireBootstrap library is located in wire-daterangepicker.js. This and other other related files can be installed from the NPM package registry at@wirebootstrap/wire-daterangepicker.
npm install @wirebootstrap/wire-daterangepickerDate Range Picker for WireBootstrap will load daterangepicker.js from a CDN if it's not found on the page.
Date Range Picker for WireBootstrap will load daterangepicker.min.css from a CDN if it not found on the page.
Moment.js
Date Range Picker has a dependency on moment.js. If not found on the page, the component will load moment.js from a CDN.
Class
Date Range Picker for WireBootstrap extends the wire.ui.component class. As such, it inherits all the base functionality of that class.
To create a new instance of the Date Range Picker for WireBootstrap component, use the wire.daterangepicker class.
const myPicker = new wire.daterangepicker();Render
Render the component using an HTML input element.
<input id="date-range" class="form-control">
<script>
new wire.daterangepicker().render("#date-range", {});
</script><wire-daterangepicker wr-config="" css="form-control"></wire-daterangepicker><WireComponent component="wire.daterangepicker" config={}>
<input id="date-range" class="form-control">
</WireComponent><input
wire-component="wire.daterangepicker"
v-wire-config=""
class="form-control"><input
wire-component="wire.daterangepicker"
[config]=""
class="form-control">Last updated
Was this helpful?