- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

### TODO:

- 增加多选日期功能
- 是否需要周选择器?

## DatePicker 日期选择器

用于选择或输入日期

### 选择日

以「日」为基本单位，基础的日期选择控件

默认
无清除按钮
禁用日期
基本单位由selectMode属性指定，通过clearable指定是否需要清除安按钮，disabledDate设置日期的禁用状态

        import { BeDatePicker } from '@brewer/beerui'
        let value = ''
        let value0 = ''
        let value1 = ''
        const disabledDate = (time) => {
          return time.getTime() > Date.now()
        }

        <div class="flex column align-center">
          <span class="demonstration">默认</span>
          <BeDatePicker bind:value={value} placeholder='选择日期' selectMode="date" />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">无清除按钮</span>
          <BeDatePicker bind:value={value0} placeholder='选择日期' clearable={false} selectMode="date" />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">禁用日期</span>
          <BeDatePicker bind:value={value1} placeholder='选择日期' {disabledDate} clearable={false} selectMode="date" />
        </div>

显示代码

### 其他日期单位

通过扩展基础的日期选择，可以选择日期时间、月、年

日期时间
月
年

        import { BeDatePicker } from '@brewer/beerui'
        let value2 = ''
        let value3 = ''
        let value4 = ''

        <div class="flex column align-center">
          <span class="demonstration">日期时间</span>
          <BeDatePicker bind:value={value2} placeholder='选择日期时间' selectMode="datetime" />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">月</span>
          <BeDatePicker bind:value={value3} placeholder='选择月' selectMode="month" />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">月</span>
          <BeDatePicker bind:value={value4} placeholder='选择年' selectMode="year" />
        </div>

显示代码

### 选择日期范围

可在一个选择器中便捷地选择一个时间范围

默认
至
月份范围
至
时间日期范围
至
年份范围
至

        import { BeDatePicker } from '@brewer/beerui'
        let value5 = ''
        let value10 = ''
        let value11 = ''
        let value6 = ''

        <div class="flex column align-center">
          <span class="demonstration">默认</span>
          <BeDatePicker bind:value={value5} selectMode="daterange"  />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">时间日期范围</span>
          <BeDatePicker bind:value={value10} selectMode="datetimerange"  />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">月份范围</span>
          <BeDatePicker bind:value={value6} selectMode="monthrange"  />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">年份范围</span>
          <BeDatePicker bind:value={value11} selectMode="yearrange" />
        </div>

显示代码

### 时间选择

可在一个选择器中便捷地选择一个时间

默认
显示时分
禁用选项
可通过format指定显示时间,通过selectableRange设置禁用范围

        import { BeTimePicker } from '@brewer/beerui'
        let value7 = ''
        let value8 = ''
        let value9 = ''
        const selectableRange = '18:30:00 - 20:30:00'

         <div class="flex column align-center">
          <span class="demonstration">默认</span>
          <BeTimePicker bind:value={value7}/>
        </div>
        <div class="flex column align-center">
          <span class="demonstration">显示时分</span>
          <BeTimePicker bind:value={value8}  format="HH:mm" />
        </div>
        <div class="flex column align-center">
          <span class="demonstration">禁用选项</span>
          <BeTimePicker bind:value={value9} {selectableRange} />
        </div>

显示代码

### Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
value / bind:value | 绑定值 | date(DatePicker) / array(DateRangePicker) | - | -
clearable | 是否显示清除按钮 | boolean | - | true
disabled | 禁用 | boolean | - | false
readonly | 完全只读 | boolean | - | true
selectMode | 显示类型 | string | year/month/date datetime/datetimerange/ daterange/monthrange/yearrange | 0
format | 显示在输入框中的格式 | string | 年:yyyy 月:MM 日:dd 时:HH 分:mm 秒:ss | yyyy-MM-dd
valueFormat | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年:yyyy 月:MM 日:dd 时:HH 分:mm 秒:ss | Date 对象
placeholder | 非范围选择时的占位内容 | string | - | 选择日期/选择时间
startPlaceholder | 范围选择时开始日期的占位内容 | string | - | 开始时间
endPlaceholder | 范围选择时结束日期的占位内容 | string | - | 结束时间
separator | 选择范围时的分隔符 | string | - | 至
disabledDate(含有日期时生效) | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | -
selectableRange(含有时间选择时生效) | 可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] | string / array | - | -

### Events

事件名称 | 说明 | 回调参数
--- | --- | ---
change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 value-format 控制