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}