Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Locale The whole panel, not only the dates — fifteen languages ship with the package.

Calendar

Months

Min Length Nights, at the least. 0 for no rule.

Max Length 0 for no rule.

Confirm Hold the range until Apply, rather than closing on the second date.

Week Numbers

Typing

import { createDateRangePicker } from '@devix-labs/date-range-picker';
import '@devix-labs/date-range-picker/styles.css';

createDateRangePicker(document.querySelector('#target'), {
  locale: 'en-GB',
  calendar: 'gregory',
  months: 2,
  minLength: 0,
  maxLength: 0,
  confirm: false,
  weekNumbers: false,
  typing: true
});

import { DateRangePicker } from '@devix-labs/date-range-picker/react';
import '@devix-labs/date-range-picker/styles.css';

<DateRangePicker
  locale="en-GB"
  calendar="gregory"
  months={2}
  minLength={0}
  maxLength={0}
  typing
/>

<script setup>
import { DateRangePicker } from '@devix-labs/date-range-picker/vue';
import '@devix-labs/date-range-picker/styles.css';
</script>

<template>
  <DateRangePicker
  locale="en-GB"
  calendar="gregory"
  :months="2"
  :min-length="0"
  :max-length="0"
  typing
/>
</template>

<script>
  import { dateRangePicker } from '@devix-labs/date-range-picker/svelte';
  import '@devix-labs/date-range-picker/styles.css';
</script>

<div use:dateRangePicker={{
  locale: 'en-GB',
  calendar: 'gregory',
  months: 2,
  minLength: 0,
  maxLength: 0,
  confirm: false,
  weekNumbers: false,
  typing: true
}} />

Every option here is in the documentation, along with the ones that are not worth a control.