DateRangeField
Widget

A compound field for editing a start/end date pair. The two Date values are stored together in the value property as an object with startDate and endDate keys. A dropdown picker with dual month calendars lets the user select the range visually. By default the picker edits the value live; enable confirmable to require explicit OK/Cancel confirmation. Clicking or arrow-keying in the picker adjusts whichever date field currently has focus. Calendar cells can be customized via cellRenderer.

By default, the picker displays below the fields and edits the value "live":

The confirmable config instructs the picker to display on top of the field with OK and Cancel buttons:

const dateRange = new DateRangeField({
    label : 'Project dates',
    value : {
        startDate : new Date(2025, 0, 1),
        endDate   : new Date(2025, 5, 30)
    },
    appendTo : document.body
});

Useful configs and properties

Config	Description
value	An object with `startDate` and `endDate` properties
confirmable	Show OK/Cancel buttons on the picker
picker	Configuration for the date range picker dropdown

Configs

Configs are options you supply in a configuration object when creating an instance of this class

confirmable : Boolean/ConfirmationBarConfig

Enables OK/Cancel button bar to accept date range changes. A value of true shows the OK and Cancel buttons.

See confirmable

Has a corresponding runtime confirmable property.
keepTime : Boolean/Date/Stringfalse
A flag which indicates what time should be used for selected date. false by default which means time is reset to midnight.

Possible options are:
- false to reset time to midnight
- true to keep original time value
- '17:00' a string which is parsed automatically
- new Date(2020, 0, 1, 17) a date object to copy time from
- 'entered' to keep time value entered by user (in case format includes time info)
max : String/Date

Max value

Has a corresponding runtime max property.
min : String/Date

Min value

Has a corresponding runtime min property.
pickTime : Booleanfalse

internal

Set to true to include time fields to allow the user to pick the time of day. When this config is set, keepTime is no longer used.
picker : DateRangePickerConfig/MultiDatePickerConfig
A config object used to configure the datePicker.
```
dateField = new DateRangeField({
     picker    : {
         multiSelect : true
     }
 });
```
pickerCls : String

internal

An optional extra CSS class to add to the picker container element.

Has a corresponding runtime pickerCls property.
weekStartDay : Number

The week start day in the picker, 0 meaning Sunday, 6 meaning Saturday. Uses localized value per default.

Properties

Properties are getters/setters or publicly accessible variables on this class

isDateRangeField : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of DateRangeField class, or subclass thereof.

confirmable : Boolean/ConfirmationBarConfig

Enables OK/Cancel button bar to accept date range changes. A value of true shows the OK and Cancel buttons.

See confirmable

Has a corresponding confirmable config.
max : String/Date

Get/set max value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

Has a corresponding max config.
min : String/Date

Get/set min value, which can be a Date or a string. If a string is specified, it will be converted using the specified format.

Has a corresponding min config.
pickerCls : String

internal

An optional extra CSS class to add to the picker container element.

Has a corresponding pickerCls config.
isDateRangeField : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of DateRangeField class, or subclass thereof.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-date-range-field-gap	Gap between the start and end date fields

DateRangeField
Widget

Useful configs and properties

See also

Configs

Properties

CSS variables

Source path

Inheritance tree6

Mixins10

Contents

DateRangeField Widget

Useful configs and properties

See also

Configs

Properties

CSS variables

Source path

Inheritance tree6

Mixins10

Contents

DateRangeField
Widget