To source

Datepicker

A date selection component combining an input field with a calendar popover.

The Datepicker provides an intuitive way for users to select dates through a text input paired with a calendar popover. It combines the Input component with the a-calendar element to create a seamless date selection experience.

<script setup lang="ts">
import "@sv/elements/popover";
import { ref } from "vue";
import Input from "./Input.vue";

const emit = defineEmits<{
  change: [value: CustomEvent<{ date: Date }>];
}>();

const value = ref<string>();

function handleChange(ev: Event) {
  const target = ev.target as HTMLElement & { value?: string };
  value.value = target.value;
  requestAnimationFrame(() => {
    (ev.target as HTMLElement).dispatchEvent(new CustomEvent("exit"));
  });
}
</script>

<template>
  <a-popover-trigger class="relative z-10">
    <div slot="trigger">
      <Input placeholder="Select a date" :value="value" />
    </div>

    <a-popover class="group" placements="bottom">
      <div class="w-[max-content] p-3 opacity-0 transition-opacity duration-100 group-[&[enabled]]:opacity-100">
        <div class="min-w-[100px] scale-95 rounded-md bg-white p-1 shadow-lg transition-all duration-150 group-[&[enabled]]:scale-100">
          <a-calendar @change="handleChange" />
        </div>
      </div>
    </a-popover>
  </a-popover-trigger>
</template>

Examples with context

List Filter

Use a datepicker to filter lists by date ranges, making it easy for users to narrow down results to a specific time period.

Forms

Integrate the datepicker into forms where date input is required, such as booking systems or event scheduling.

Accessibility

  • The calendar popover can be navigated using keyboard arrow keys
  • Pressing Enter or Space selects the focused date
  • The calendar supports custom locales via the locale attribute