React, Vue, Svelte and web components

React#

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

const [period, setPeriod] = useState({ start: null, end: null });

<DateRangePicker name="period" value={period} onChange={setPeriod} presets={['last7', 'last30']} maxLength={90} />

Vue 3#

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

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

Svelte#

<script>
  import { dateRangePicker } from '@devix-labs/date-range-picker/svelte';
  let period = { start: null, end: null };
</script>

<input name="period" use:dateRangePicker={{ presets: ['last7'], onChange: (r) => (period = r) }} />

Web component#

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

<form>
  <dx-date-range-picker name="stay" presets="last7,next30" min-length="2" max-length="30" required></dx-date-range-picker>
</form>

It posts stay_start and stay_end, supports required, and resets with the form.

Attributes: locale, calendar, secondary-calendar, min, max, disabled-weekdays, disabled-dates, week-numbers, theme, time-zone, start, end, presets (or none), min-length, max-length.

Laravel#

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