DatePicker

Calendar in a popover

A date field: a button showing the chosen date, Calendar in a popover below it. The model is an ISO string, or [start, end] with range; locale only shapes the text shown (the model stays ISO), min / max pass through to the calendar. Picking a day closes the popover and returns focus to the field; Esc does the same without picking.

On touch devices (pointer: coarse) single mode renders the platform's <input type="date"> instead — the OS picker is better on a phone than any popover — decided after mount so server and client agree; nativeOnTouch="false" forces the popover everywhere. Inside a BlessField the field's label names it. For a calendar that lives in the page rather than a field, use BlessCalendar directly.

Basic

Release date

Stay

States

2019年9月

月火水木金土日

<script setup lang="ts">
import { ref } from "vue";
import { BlessDatePicker, BlessLabel } from "blessing-ui";
const picked = ref<string>();
const stay = ref<[string, string]>();
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <div class="col">
      <BlessLabel for="d-dp">Release date</BlessLabel>
      <BlessDatePicker id="d-dp" v-model="picked" locale="en-US" />
      <small>{{ picked }}</small>
    </div>
    <div class="col">
      <BlessLabel for="d-dr">Stay</BlessLabel>
      <BlessDatePicker
        id="d-dr"
        v-model="stay"
        range
        placeholder="Check-in – check-out"
        locale="en-US"
      />
    </div>
    <div class="col">
      <BlessLabel>States</BlessLabel>
      <BlessDatePicker model-value="2019-09-25" invalid size="sm" />
      <BlessDatePicker disabled />
    </div>
  </div>
</template>

Not inside <p>

The floating panel is a <div>. HTML closes a <p> when it meets a <div>, so a trigger placed inside a paragraph renders differently on the server and the client. Wrap with <span>/<div> instead.

Usage

import { BlessDatePicker } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
range	boolean	—
min	string	—
max	string	—
placeholder	string	"Select date"
locale	string	"ja-JP"
disabled	boolean	—
invalid	boolean	—
nativeOnTouch	boolean	true	prefer native <input type=date> on coarse pointers (touch)
size	"md" | "sm" | "lg"	"md"
modelValue	string | [string, string]	—

Events

Name	Payload	Description
update:modelValue	[value: string | [string, string] | undefined]