REAL SHOWCASE SOURCEdate-picker-states
1 个文件 · 42 行 · TypeScript
// ===== showcase/src/examples/components/date_picker.ts ===== import { RenderDatePicker, RenderPageHeader, RenderStackPanel, RenderText,} from 'ds-ui' export function createDatePickerExample(): RenderStackPanel { const status = new RenderText('日期值使用 ISO 格式,日期时间使用 T 分隔符') const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'DatePicker 日期时间', description: '日期、日期时间、分段键盘输入、清除和表单状态共享统一弹窗。', })) panel.addChild(new RenderDatePicker({ value: '2026-07-17', clearable: true, prefixText: '就诊日', onChange: value => { status.text = `就诊日期:${value || '未选择'}` }, })) panel.addChild(new RenderDatePicker({ value: '2026-07-17T09:30', showTime: true, timePrecision: 'minute', clearable: true, prefixText: '预约', onChange: value => { status.text = `预约时间:${value || '未选择'}` }, })) panel.addChild(new RenderDatePicker({ value: '', placeholder: '请选择出院日期', status: 'error', helperText: '出院日期不能早于入院日期', })) panel.addChild(new RenderDatePicker({ value: '2026-07-18', readonly: true, suffixText: '只读' })) panel.addChild(new RenderDatePicker({ value: '2026-07-19', disabled: true, suffixText: '禁用' })) panel.addChild(status) panel.padding = 24 return panel}