Bootstrap 6 Date Range Input

Example

Use an empty container with data-coreui-date-range-input to create a range field. It is two date inputs — start and end — and a separator in one frame, held together by the range the component owns: both ends share the mask and the limits, and an end before the start marks the whole field invalid.

<label class="form-label" id="dateRangeInputStayLabel">Stay</label>
<div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-name="check-in" data-coreui-end-name="check-out" aria-labelledby="dateRangeInputStayLabel"></div>

Date and time

data-coreui-type="datetime" puts the time on both ends, and data-coreui-seconds="true" adds a seconds section. The range compares the two ends by instant, so an end earlier in the day than the start on the same date marks the field invalid.

<label class="form-label" id="dateRangeInputShiftLabel">Shift</label>
<div data-coreui-date-range-input data-coreui-type="datetime" data-coreui-locale="en-US" data-coreui-start-name="shift-start" data-coreui-end-name="shift-end" aria-labelledby="dateRangeInputShiftLabel"></div>

With form field

Wrap the control in .form-field to lay it out with its label and description, and to get validation feedback in the right place.

<div class="form-field">
  <span class="form-label" id="dateRangeInputStayLabel2">Stay</span>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-name="check-in" data-coreui-end-name="check-out" aria-labelledby="dateRangeInputStayLabel2"></div>
  <div class="form-text">Check-out has to be on or after check-in.</div>
</div>

Formats

Set an explicit mask for both ends with the data-coreui-format attribute. The parser is the date input’s, so dayjs/moment tokens (DD, MM, YYYY) and date-fns/Unicode tokens (dd, MM, yyyy) both work, and any other character becomes a literal separator.

<div class="mb-4">
  <label class="form-label" id="dateRangeInputDdMMYyyyLabel">dd.MM.yyyy</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="dd.MM.yyyy" aria-labelledby="dateRangeInputDdMMYyyyLabel"></div>
</div>
<div>
  <label class="form-label" id="dateRangeInputYYYYMMDDLabel">YYYY-MM-DD</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="YYYY-MM-DD" aria-labelledby="dateRangeInputYYYYMMDDLabel"></div>
</div>

A mask that leaves out sections works here too — a month-and-year range reports the first day of each month:

<label class="form-label" id="dateRangeInputReportingPeriodLabel">Reporting period</label>
<div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="MM.yyyy" aria-labelledby="dateRangeInputReportingPeriodLabel"></div>

Month names

Use the MMM or MMMM tokens for text month sections in both ends; typing letters matches a month by prefix. Pass all twelve names through monthNames to override the locale-derived, date-context grammatical form.

<div class="mb-4">
  <label class="form-label" id="dateRangeInputDDMMMMYYYYLabel">DD MMMM YYYY</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="DD MMMM YYYY" aria-labelledby="dateRangeInputDDMMMMYYYYLabel"></div>
</div>
<div>
  <label class="form-label" id="dateRangeInputStandalonePolishMonthNamesLabel">Standalone Polish month names</label>
  <div data-coreui-date-range-input data-coreui-locale="pl-PL" data-coreui-format="DD MMMM YYYY"
       data-coreui-month-names='["styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień", "październik", "listopad", "grudzień"]' aria-labelledby="dateRangeInputStandalonePolishMonthNamesLabel"></div>
</div>

Locale

Without an explicit format, both masks follow the locale set via data-coreui-locale.

<div class="mb-4">
  <label class="form-label" id="dateRangeInputEnUSLabel">en-US</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" aria-labelledby="dateRangeInputEnUSLabel"></div>
</div>
<div class="mb-4">
  <label class="form-label" id="dateRangeInputPlPLLabel">pl-PL</label>
  <div data-coreui-date-range-input data-coreui-locale="pl-PL" data-coreui-day-placeholder="DD" data-coreui-month-placeholder="MM" data-coreui-year-placeholder="RRRR" aria-labelledby="dateRangeInputPlPLLabel"></div>
</div>
<div>
  <label class="form-label" id="dateRangeInputJaJPLabel">ja-JP</label>
  <div data-coreui-date-range-input data-coreui-locale="ja-JP" aria-labelledby="dateRangeInputJaJPLabel"></div>
</div>

Initial value

Seed either end with data-coreui-start-date and data-coreui-end-date; a string is parsed like a typed value.

<label class="form-label" id="dateRangeInputStayLabel3">Stay</label>
<div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-date="2026-07-14" data-coreui-end-date="2026-07-20" aria-labelledby="dateRangeInputStayLabel3"></div>

Min and max dates

minDate and maxDate constrain both ends. A completed date outside the range gets the .is-invalid class on its own field and that end reports null until the value is corrected.

<label class="form-label" id="dateRangeInputDatesInJuly2026Label">Dates in July 2026</label>
<div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="dd.MM.yyyy" data-coreui-min-date="2026-07-01" data-coreui-max-date="2026-07-31" aria-labelledby="dateRangeInputDatesInJuly2026Label"></div>

Disabled dates

Beyond a simple range, disabledDates excludes specific dates from both ends — single Dates, [start, end] ranges, or a matcher function. As in the date input, a completed date that hits a disabled entry gets .is-invalid and that end reports null.

In this example July 4–7 and July 16 can’t be entered — try typing one of them:

<label class="form-label" id="dateRangeInputStayLabel4">Stay</label>
<div id="myDateRangeInputDisabledDates" aria-labelledby="dateRangeInputStayLabel4"></div>

const myDateRangeInputDisabledDates = document.getElementById('myDateRangeInputDisabledDates')

const optionsDateRangeInputDisabledDates = {
  locale: 'en-US',
  format: 'dd.MM.yyyy',
  startDate: new Date(2026, 6, 10),
  disabledDates: [
    [new Date(2026, 6, 4), new Date(2026, 6, 7)],
    new Date(2026, 6, 16)
  ],
  minDate: new Date(2026, 6, 1),
  maxDate: new Date(2026, 6, 31)
}

new coreui.DateRangeInput(myDateRangeInputDisabledDates, optionsDateRangeInputDisabledDates)

Disabling weekends

Pass a function to disable dates by rule — here Saturdays and Sundays, on both ends:

<label class="form-label" id="dateRangeInputBusinessDaysLabel">Business days</label>
<div id="myDateRangeInputDisabledDates2" aria-labelledby="dateRangeInputBusinessDaysLabel"></div>

const myDateRangeInputDisabledDates2 = document.getElementById('myDateRangeInputDisabledDates2')

const optionsDateRangeInputDisabledDates2 = {
  disabledDates(date) {
    const day = date.getDay()
    return day === 0 || day === 6
  },
  format: 'dd.MM.yyyy',
  locale: 'en-US'
}

new coreui.DateRangeInput(myDateRangeInputDisabledDates2, optionsDateRangeInputDisabledDates2)

Custom formats

The token parser covers dayjs, moment, date-fns, and luxon format strings, so you can reuse the format string from the date library you already work with — the library itself isn’t required to render or edit the masks. Pair it with inputDateParse when you want that library to also parse text pasted into either end.

<label class="form-label" id="dateRangeInputStayLabel5">Stay</label>
<div id="myDateRangeInputCustomFormats" aria-labelledby="dateRangeInputStayLabel5"></div>

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>

const myDateRangeInputCustomFormats = document.getElementById('myDateRangeInputCustomFormats')

dayjs.extend(window.dayjs_plugin_customParseFormat)
const optionsDateRangeInputCustomFormats = {
  locale: 'en-US',
  startDate: new Date(2026, 6, 14),
  endDate: new Date(2026, 6, 20),
  format: 'MMMM DD, YYYY',
  inputDateParse: value => dayjs(value, 'MMMM DD, YYYY', 'en').toDate()
}

new coreui.DateRangeInput(myDateRangeInputCustomFormats, optionsDateRangeInputCustomFormats)

Validation

The frame shows the state of the range and each field shows its own, the way the form plugin does for a native field. Each end keeps its value in a <textarea> laid invisibly over its field, which takes part in native constraint validation: a required end that is empty, incomplete or holds a rejected date blocks the submit, and the browser, or the form plugin, puts focus on its first empty section.

The state comes from these places, in this order:

• The order: an end before the start is a state of the range, not of either date, so .is-invalid lands on the frame and both fields stay editable. Every section of both fields carries aria-invalid="true" until the order is fixed, and neither field is drawn valid meanwhile, whatever else is set. isRangeValid() reports it.
• The limits: a completed date outside minDate/maxDate/disabledDates makes its own field invalid, which the frame picks up, and that field’s value field submits no date until it is corrected. A date before year 1 counts as before minDate even without that option; when the field loses the focus, its year becomes 1.
• The validationState option: 'valid', 'invalid' or a state you added to $form-validation-states, a verdict on the whole range that lands on the frame and on both ends.
• An .is-invalid or .is-valid class written on the frame in the markup, for example by a server that has already checked the range. It is read once, when the component starts.
• A validation that reports a field (a submit, checkValidity() or reportValidity(), which the form plugin and the stepper call as well), and in a form with data-coreui-validate the :user-invalid state of each value field, with data-coreui-validate="valid" also its :user-valid state, as for the date input.

A state you give, with the option or with the class, is a verdict on the range it was given for, so the next change the user makes to either end drops it from both ends and the frame. A change your own code makes, with setRange(), clear() or reset(), keeps it. To set it again, call setValidationState(): it updates the state without rebuilding the fields and replaces a class written on the frame. A class or an aria-invalid written on the frame after the component starts is not read. While the given state is 'invalid', both ends block the submit with the text of the message after the frame, or Invalid value. when there is none, unless the range is disabled or read-only. A native form reset returns both ends to the dates they were created with and drops the state; a reset listener that calls preventDefault() cancels the whole reset.

Sibling .valid-feedback/.invalid-feedback elements work as with any other form control. The error shows when the frame is invalid and when a field inside it is, which is where the state of a single date lands; the success message waits until nothing is invalid. While a field is invalid, the error message describes each of its sections.

<div class="mb-4 form-field">
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="dd.MM.yyyy" data-coreui-start-date="2026-07-20" data-coreui-end-date="2026-07-14"></div>
  <div class="invalid-feedback">Check-out has to be on or after check-in.</div>
</div>
<div class="form-field">
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-format="dd.MM.yyyy" data-coreui-start-date="2026-07-14" data-coreui-end-date="2026-07-20" data-coreui-validation-state="valid"></div>
  <div class="valid-feedback">Looks good!</div>
</div>

<form data-coreui-validate novalidate>
  <div data-coreui-date-range-input data-coreui-start-name="from" data-coreui-end-name="to" data-coreui-required="true"></div>
  <div class="invalid-feedback">Please provide both dates.</div>
  <button type="submit">Submit</button>
</form>

Blocking the submit

A required end that is empty, incomplete or rejected by the limits blocks the submit by itself. An end before the start does not, since both ends hold dates the browser accepts, and neither does an optional end that is empty, incomplete or rejected, which submits no date. Check the range in your submit listener; getStartDate() and getEndDate() return null for an end that is empty, incomplete or rejected, so one condition covers both:

const element = document.querySelector('#stayRange')
const range = coreui.DateRangeInput.getOrCreateInstance(element)

element.closest('form').addEventListener('submit', event => {
  const start = range.getStartDate()
  const end = range.getEndDate()

  if (!start || !end || end < start) {
    event.preventDefault()
  }
})

Floating labels

Each end can carry its own floating label; the text is also that end’s accessible name, so the visible and the spoken label stay one thing.

<div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-floating-label="Check-in" data-coreui-end-floating-label="Check-out"></div>

Add .form-floating-always to the component element to keep both labels always floating with the masks showing.

Sizing

The frame is a .form-control-group, so the standard sizing classes work — set data-coreui-size="lg" or data-coreui-size="sm" and both ends follow.

<div class="mb-4">
  <label class="form-label" id="dateRangeInputLargeLabel">Large</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-size="lg" aria-labelledby="dateRangeInputLargeLabel"></div>
</div>
<div class="mb-4">
  <label class="form-label" id="dateRangeInputDefaultLabel">Default</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" aria-labelledby="dateRangeInputDefaultLabel"></div>
</div>
<div>
  <label class="form-label" id="dateRangeInputSmallLabel">Small</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-size="sm" aria-labelledby="dateRangeInputSmallLabel"></div>
</div>

Disabled and readonly

Add data-coreui-disabled="true" to disable both ends, or data-coreui-readonly="true" to make them focusable but non-editable.

<div class="mb-4">
  <label class="form-label" id="dateRangeInputDisabledLabel">Disabled</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-date="2026-07-14" data-coreui-end-date="2026-07-20" data-coreui-disabled="true" aria-labelledby="dateRangeInputDisabledLabel"></div>
</div>
<div>
  <label class="form-label" id="dateRangeInputReadonlyLabel">Readonly</label>
  <div data-coreui-date-range-input data-coreui-locale="en-US" data-coreui-start-date="2026-07-14" data-coreui-end-date="2026-07-20" data-coreui-readonly="true" aria-labelledby="dateRangeInputReadonlyLabel"></div>
</div>

Composing the markup

The component adopts the parts you write inside its element and generates the rest, so the separator can be a word, your own icon, or nothing you have to configure. A generated part takes its place around the ones you wrote, so writing only the end still gives start, separator, end, in that order on screen and for Tab:

<div data-coreui-date-range-input data-coreui-locale="en-US">
  <div data-coreui-range-start></div>
  <span class="mx-3 fg-2" data-coreui-range-separator>to</span>
  <div data-coreui-range-end></div>
</div>

Accessibility

Each end is a date input with the spinbutton pattern per section, so the range is two labelled groups rather than one opaque control:

• Role attributes: the element itself is a role="group", each end has role="group", every section is a role="spinbutton" with its value attributes.
• Label click: clicking a label that names the field, through aria-labelledby or a <label for> pointing at the element, moves focus to the first empty section of the start date, as clicking the label of an input focuses it.
• Names: the start and end are named separately — ariaStartLabel and ariaEndLabel by default, or the floating label text when one is set. An end you wrote with an aria-label of its own keeps it. An aria-labelledby on the element, pointing at the visible label as the examples on this page do, names the pair, and an aria-describedby on it moves to both fields, after any description a field you wrote carries of its own.
• Separator: hidden from assistive technology, as is any <svg> inside it.
• Roving tabindex: each end is a single tab stop; Tab moves from the start to the end.

Keyboard support

Apart from the shortcuts in the table, a key pressed with Alt, Ctrl or Cmd changes nothing in the field and is not cancelled: arrows, Home and End move no focus and change no section, and a digit or letter is not entered. The key stays free for the browser, assistive technology and the picker around the field, where Alt + Arrow Down opens the calendar. A character that AltGr or Option composes is still entered.

Usage

Via data attributes

Add data-coreui-date-range-input to an empty div. The component renders both fields, the separator, and a value input per end, each submitted with the form once you give it a startName or an endName.

<div data-coreui-date-range-input data-coreui-format="dd.MM.yyyy" data-coreui-start-name="from" data-coreui-end-name="to"></div>

Via JavaScript

const dateRangeInput = new coreui.DateRangeInput(document.querySelector('#myDateRangeInput'), {
  format: 'dd.MM.yyyy',
  startDate: new Date(2026, 6, 14),
  endDate: new Date(2026, 6, 20)
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-coreui-, as in data-coreui-start-name="from".

Methods

const dateRangeInput = coreui.DateRangeInput.getInstance(document.querySelector('#myDateRangeInput'))
dateRangeInput.setRange(new Date(2026, 6, 14), new Date(2026, 6, 20))
dateRangeInput.getStartDate()
dateRangeInput.clear()

Events

setRange(start, end, true) writes both ends before either event fires. The range events come before the errorChange.coreui.date-input of the fields, whether the dates are typed or set that way, so a range an errorChange listener sets replaces the one just reported.

Each event carries the date of its own end; a listener reads the whole range from the instance:

for (const name of ['startDateChange', 'endDateChange']) {
  document.addEventListener(`${name}.coreui.date-range-input`, event => {
    const dateRangeInput = coreui.DateRangeInput.getInstance(event.target)
    // eslint-disable-next-line no-console
    console.log('Range changed:', dateRangeInput.getStartDate(), dateRangeInput.getEndDate())
  })
}

Customizing

CSS variables

The two ends are date inputs, so they carry the form-date-time tokens, and the frame around them carries the form control group ones. The range adds no tokens of its own.

// Redeclaring a --cui-control-* token here would shadow `.form-control`
// on the same element, and with it the validation states.
$form-date-time-tokens: () !default;
$form-date-time-tokens: defaults(
  (
    --cui-form-date-time-placeholder-color: var(--cui-fg-3),
    --cui-form-date-time-section-border-radius: .25rem,
    --cui-form-date-time-section-focus-bg: var(--cui-primary-bg-subtle),
  ),
  $form-date-time-tokens
);