> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/pro-pack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/pro-pack/date-range-picker/configuration.md).

# 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](/pro-pack/date-range-picker/data-binding.md) for details. |
| daterangepicker |             | Optional. The [native configuration](https://www.daterangepicker.com/#options) 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](#undefined) 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.

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

## Event Field

Most components bind to external data.  When raising [data events](https://docs.wirebootstrap.com/wirebootstrap/working-with-components/configuration/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.

```javascript
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.

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