DatePicker 日期选择器

Form · Interactive component

Date value selection.

On-demand importwbbb-ui/components/date-picker

Basic Usage

Example code

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbDatePicker } from 'wbbb-ui/components/date-picker'
import 'wbbb-ui/styles/date-picker'

const value = ref('')
</script>

<template>
  <WbbbDatePicker v-model="value" locale="en-US" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
disabled	Prevents user interaction with the component.	boolean	false	No
end	Sets the latest selectable or valid value.	string	''	No
fields	Registers the form fields managed by the component.	'day' \| 'month' \| 'year'	'day'	No
locale	Overrides the locale used for built-in display copy.	WbbbLocaleInput	—	No
modelValue	Provides the current value used by v-model.	string	''	No
placeholder	Sets placeholder text when no value is present.	string	由 locale 决定	No
start	Sets the earliest selectable or valid value.	string	''	No

Events

• update:modelValue
• change

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use start and end to constrain selectable dates. Pass normalized date strings from the business layer for cross-timezone workflows.