DatePicker

The DatePicker component provides users with an intuitive interface for selecting dates within a specified range.

+page.svelte

<script lang="ts">import DatePicker from "$lib/datepicker/DatePicker.svelte";
let value;
const today = /* @__PURE__ */ new Date();
</script>

<div class="mt-4 flex items-center justify-center">
	<DatePicker
		bind:selectedDate={value}
		minDate={new Date(today.getFullYear(), today.getMonth() - 1, 1)}
		maxDate={new Date(today.getFullYear(), today.getMonth() + 1, 0)}
	/>
</div>

Sample

Example Code

<script lang="ts">import { DatePicker } from "@grampro/svelte-block";
const today = /* @__PURE__ */ new Date();
</script>

<DatePicker />

<div class="mt-4 mb-4">With Min and Max</div>

<DatePicker
  minDate={new Date(today.getFullYear(), today.getMonth(), 1)}
  maxDate={new Date()}
/>

Props