React, Vue, Svelte and more

Every wrapper is a thin layer over the same DOM picker, so behaviour is identical everywhere.

React#

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

function Filters() {
  const [due, setDue] = useState(null);
  const [period, setPeriod] = useState({ start: null, end: null });
  return (
    <>
      <DatePicker name="due" value={due} onChange={setDue} min="2026-01-01" disabled={[{ weekdays: [6, 7] }]} />
      <DateRangePicker name="period" value={period} onChange={setPeriod} presets={['last7', 'last30']} />
    </>
  );
}

• Values: value is an ISO string, or { start, end } for ranges.
• Props: any other prop is passed to the <input>. disabled={true} disables the field; an array is treated as the picker's rule list.
• Server rendering: safe. The picker mounts in an effect.

Vue 3#

<script setup>
import { DatePicker, DateRangePicker } from '@devix-labs/date-picker/vue';
import '@devix-labs/date-picker/styles.css';
const due = ref(null);
const period = ref({ start: null, end: null });
</script>

<template>
  <DatePicker v-model="due" name="due" :options="{ min: '2026-01-01' }" />
  <DateRangePicker v-model="period" name="period" :options="{ presets: ['last7', 'thisMonth'] }" />
</template>

Svelte#

<script>
  import { datePicker, dateRangePicker } from '@devix-labs/date-picker/svelte';
  let due = null;
</script>

<input name="due" use:datePicker={{ min: '2026-01-01', onChange: (v) => (due = v) }} />

Web components#

<script type="module" src="https://www.devix.pk/cdn/oss/date-picker@1.2.0/element.js"></script>
<link rel="stylesheet" href="https://www.devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.css">

<form>
  <dx-date-picker name="due" min="2026-01-01" disabled-weekdays="6,7" required></dx-date-picker>
  <dx-date-range-picker name="stay" presets="last7,last30" max-length="30"></dx-date-range-picker>
</form>

Both elements are form-associated: they submit their values, take part in validation and required, and restore themselves on form reset. The range element submits stay_start and stay_end.

Attributes: locale, calendar, secondary-calendar, min, max, disabled-weekdays, disabled-dates, week-numbers, theme, time-zone, value / start / end, label, input-id.

One script tag#

<script src="https://www.devix.pk/cdn/oss/date-picker@1.2.0/date-picker.min.js"></script>
<script>
  DevixDatePicker.createDatePicker(document.querySelector('#due'));
</script>

jQuery#

$('#due').datePicker({ min: '2026-01-01' });
$('#due').datePicker('getValue');
$('#stay').dateRangePicker({ presets: ['last7'] });

Laravel#

The hidden input posts ISO dates, so validation is ordinary:

$request->validate([
    'due' => ['required', 'date_format:Y-m-d', 'after_or_equal:today'],
    'period_start' => ['required', 'date_format:Y-m-d'],
    'period_end' => ['required', 'date_format:Y-m-d', 'after_or_equal:period_start'],
]);