Date Range Picker

Date Range Picker for WireBootstrap

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-daterangepicker

Date 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.

JavaScript

<input id="date-range" class="form-control">
<script>
    new wire.daterangepicker().render("#date-range", {});
</script>

Web Components

<wire-daterangepicker wr-config="" css="form-control"></wire-daterangepicker>

React

<WireComponent component="wire.daterangepicker" config={}>
    <input id="date-range" class="form-control">
</WireComponent>

Vue

<input 
    wire-component="wire.daterangepicker" 
    v-wire-config="" 
    class="form-control">

Angular

<input 
    wire-component="wire.daterangepicker" 
    [config]="" 
    class="form-control">