mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
213 lines
10 KiB
Markdown
213 lines
10 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# DatePicker 日期选择器
|
||
|
||
## 概述
|
||
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
|
||
|
||
## 代码示例
|
||
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/datePicker/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-input-date-picker v-model="value" />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>选个单个日期</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="单选+多选+区间选择" template="ui/templates/datePicker/2.html">
|
||
<template v-slot:demo>
|
||
<Wb-input-date-picker />
|
||
<Wb-input-date-picker model="multiple" />
|
||
<Wb-input-date-picker model="range" />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>可以选择单选single、多选multiple、区间选择range，默认为 single。 </p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="日期面板弹出的朝向" template="ui/templates/datePicker/3.html">
|
||
<template v-slot:demo>
|
||
<Wb-input-date-picker position="bottomLeft" />
|
||
<Wb-input-date-picker position="bottomRight" />
|
||
<Wb-input-date-picker position="topLeft" />
|
||
<Wb-input-date-picker position="topRight" />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置position，可以选择单选bottomLeft、bottomRight、topLeft、topRight，默认为 bottomLeft。 </p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="行内模式" template="ui/templates/datePicker/4.html">
|
||
<template v-slot:demo>
|
||
<div class="flex">
|
||
<date-picker />
|
||
<date-picker format="YYYY-MM-DD HH:mm" model="multiple" />
|
||
<date-picker model="range" />
|
||
</div>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>同样支持v-model、range、format等配置</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="日期类型" template="ui/templates/datePicker/5.html">
|
||
<template v-slot:demo>
|
||
<Wb-input-date-picker format="YYYY" placeholder="请选择年份" />
|
||
<Wb-input-date-picker format="YYYY-MM" placeholder="请选择月份" />
|
||
<Wb-input-date-picker placeholder="请选择日期"/>
|
||
<Wb-input-date-picker format="YYYY-MM-DD HH:mm" placeholder="请选择时间" />
|
||
<Wb-input-date-picker format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>通过 format 控制日期类型： </p>
|
||
<p>YYYY 年份、YYYY-MM 月份、YYYY-MM-DD 日期、 YYYY-MM-DD HH:mm 时间精确到分钟、YYYY-MM-DD HH:mm:ss 时间精确到秒。</p>
|
||
<p>默认为 YYYY-MM-DD。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="禁用部分时间" template="ui/templates/datePicker/6.html">
|
||
<template v-slot:demo>
|
||
<div class="mt-20 first">可选择的时间范围为：2020-7-1 到 2020-8-31</div>
|
||
<Wb-input-date-picker :min-date="new Date(2020, 7, 1)" :max-date="new Date(2020, 8, 31)" />
|
||
<div class="mt-20">选择的时间范围不超过3天：</div>
|
||
<Wb-input-date-picker max-range="3D" model="range" />
|
||
<div class="mt-20">今天不能被选择：</div>
|
||
<Wb-input-date-picker :disable="[new Date()]" />
|
||
<div class="mt-20">只能选择今天：</div>
|
||
<Wb-input-date-picker :enable="[new Date()]" />
|
||
<div class="mt-20">禁止每个月 3 号：</div>
|
||
<Wb-input-date-picker :disabled-date="disabledDate" />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>可以通过多种方式实现时间禁用。</p>
|
||
<p>minDate可选的最小时间，maxDate可选的最大时间。</p>
|
||
<p>maxRange：需要配合range使用，设置可选时间范围，格式为 2D（2天）、2M（2个月）、2Y（2年）</p>
|
||
<p>disable和enable: 子项可以是时间（Date对象）、函数、对象的数组。</p>
|
||
<p>以disable举例：</p>
|
||
<p>当子项是Date对象时，禁用此日期；</p>
|
||
<p>当子项是函数时，参数为日期，通过函数执行结果判断是否禁用；</p>
|
||
<p>当子项是{from, to} 格式的对象时，表示从from日期到to日期都禁用</p>
|
||
<p>disabledDate: 禁用函数，参数为日期，通过函数执行结果判断是否禁用</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="禁用和只读" template="ui/templates/datePicker/7.html">
|
||
<template v-slot:demo>
|
||
<Wb-input-date-picker :value="new Date()" disabled />
|
||
<Wb-input-date-picker :value="new Date()" readonly />
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>设置readonly 只读</p>
|
||
<p>设置disabled 禁用</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</row>
|
||
</ClientOnly>
|
||
|
||
<style lang="scss">
|
||
.code-box-demo{
|
||
.ui-date-picker{
|
||
display: block;
|
||
margin-top: 20px;
|
||
width: 50%;
|
||
}
|
||
.ui-calendars{
|
||
font-size: 12px;
|
||
}
|
||
.mt-20 {
|
||
padding-top: 20px;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
&.first{
|
||
padding-top: 0px;
|
||
}
|
||
}
|
||
.ui-date-picker:first-child{
|
||
margin-top: 0px;
|
||
}
|
||
.mt-20 + .ui-date-picker{
|
||
margin-top: 0px;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value: null,
|
||
}
|
||
},
|
||
methods: {
|
||
disabledDate(time) {
|
||
if (time.getDate() === 3) {
|
||
return true;
|
||
}
|
||
false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### InputDatePicker 和 DatePicker 共有的 Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| value | 日期的值，可以使用v-model实现数据的双向绑定 | Date、Array、Number | null |
|
||
| model | 模式，可选值有`single`、`range`、 `multiple` | String | `single` |
|
||
| format | 时间格式：YYYY-MM-DD HH:mm:ss | String | `YYYY-MM-DD` |
|
||
| maxDate | 最大可选时间 | Date | null |
|
||
| minDate | 最小可选时间 | Date | null |
|
||
| maxRange |最大可选区间，格式为 /\d+[DMY]/ | String | null |
|
||
| disable |禁止的时间，格式可以为：[Date, Function, {from: Date, to: Date}] | Array | null |
|
||
| enable |可用的时间，格式可以为：[Date, Function, {from: Date, to: Date}] | Array | null |
|
||
| disabledDate | 禁止时间函数，参数为对应的时间 Date，执行结果为true则禁止 | Function | null |
|
||
| rangeSeparator | 区间选择中间的分割符号,只在 model 为 range 时生效 | String | `～` |
|
||
| showConfirm | 是否显示确认按钮，在多选强制为true，其他情况默认为 false | Boolean | - |
|
||
| onlyMonth | 是否只选择月份(兼容老的API，尽量使用 format代替)| Boolean | false |
|
||
| enableTime | 是否显示时间(兼容老的API，尽量使用 format代替)| Boolean | false |
|
||
| enableSeconds | 是否显示秒(兼容老的API，尽量使用 format代替) | Boolean | false |
|
||
|
||
|
||
### InputDatePicker Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| placeholder | 未选择时间时的提示语 | String | `请选择日期` |
|
||
| icon | 输入框左边的 icon | String | `calendar` |
|
||
| clearable | 是否显示清除 icon | Boolean | false |
|
||
| position | 弹窗的位置，会根据窗口大小自适应，可选值`bottomLeft` `bottomRight` `topLeft` `topRight` | String | `bottomLeft` |
|
||
| readonly | 是否只读 | Boolean | false |
|
||
| disabled | 是否禁用 | Boolean | false |
|
||
|
||
### InputDatePicker Events
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| on-input | 输入时触发 | (value) => void |
|
||
| on-change | 值改变时触发 | (value) => void |
|
||
| on-enter | 焦点在input, 按下enter键触发 | (event) => void |
|
||
| on-focus | 获取焦点时触发 | (event) => void |
|
||
| on-blur | 失去焦点时触发 | (event) => void |
|
||
| on-blur | 失去焦点时触发 | (event) => void |
|
||
|
||
### DatePicker Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| inline | 是否脱离文档流，ture则用relative定位，false则用absolute定位 | Boolean | true |
|
||
|
||
### DatePicker Events
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| on-change | 值改变时触发 | (value) => void |
|
||
| on-finish | 选择结束触发 | () => void | |