Configuration

Use the following configuration options to bind the Date Range Picker for WireBootstrap component.

Properties

Name	Default	Description
datamap		Optional. Used to bind data to the component. See Data Binding for details.
daterangepicker		Optional. The native configuration pass-through for Date Range Picker.
endDate	Today	End date selected when the component opens. Only valid for the range layout.
eventField		Optional. Field name to use for the data event when a range or single selection is made
eventFormat		Optional. Date format to use for the data event value
excludeWeekends	false	Prevents weekend days from being selected in the calendar
layout	range	Determines the way in which the component looks and behaves. See Layout for details.
startDate	Yesterday	Start date selected when the component opens

The following example renders the Date Range Picker for WireBootstrap component with one calendar using a single select date.

 const singleDate = new wire.daterangepicker().render('#single-date', {
    daterangepicker: {
        singleDatePicker: true
    }
});

Event Field

Most components bind to external data. When raising data events, they send out the subset of the bound data that caused the event, most notable of which is often the field that was selected. Other components on the page are then able to react to the data selection and refresh their data if necessary.

Date Range Picker for WireBootstrap does not bind to external data. However, it does generate a data event when a date or date range is selected. The configuration's eventField setting specifies the field name to be sent out in the data event.

The following example is an excerpt from a page in a WireBootstrap theme project. When a date range is selected, the field associated with the selected range that goes out in the data event will be OrderDay. Other components with OrderDay in their bound data may choose to refresh their data based on this selection.

const rangeDate = new wire.daterangepicker().render('#range-date', {
    eventField: "OrderDay"
});

Layout

The layout property determines what time selections can be made. Valid values are range (default), day, month, and year. Each will only allow selection for the specified time value(s).

The example below limits selections to months of a year. The date selected will be the end of the selected month.

const rangeDate = new wire.daterangepicker().render('#month-date', {
    layout: "month"
});