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"
});

Last updated