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 The same picker, on another calendar system.

Months

Week Numbers

Multiple Collect several dates rather than one.

Typing Type “next friday” or “in 2 weeks” into the field.

Footer

Close On Select

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

createDatePicker(document.querySelector('#target'), {
  locale: 'en-GB',
  calendar: 'gregory',
  months: 1,
  weekNumbers: false,
  multiple: false,
  typing: true,
  footer: true,
  closeOnSelect: true
});

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

<DatePicker
  locale="en-GB"
  calendar="gregory"
  months={1}
  typing
  footer
  closeOnSelect
/>

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

<template>
  <DatePicker
  locale="en-GB"
  calendar="gregory"
  :months="1"
  typing
  footer
  close-on-select
/>
</template>

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

<div use:datePicker={{
  locale: 'en-GB',
  calendar: 'gregory',
  months: 1,
  weekNumbers: false,
  multiple: false,
  typing: true,
  footer: true,
  closeOnSelect: true
}} />

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