mip-date-picker 日期选择组件

日期选择组件,提供简单日期选择和日期范围选择两种模式,需要结合 mip-form 使用。

标题内容
类型通用
支持布局responsive, fixed-height, fill, container, fixed
所需脚本https://c.mipcdn.com/static/v2/mip-date-picker/mip-date-picker.js
https://c.mipcdn.com/static/v2/mip-form/mip-form.js

示例

date-picker: 仅选择日期模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>date-pick: 下拉模式</p> <mip-form> <mip-date-picker mode="date-picker" id="date-picker" input-selector="[name=date-picker-overlay]" on="activate:MIP.setData({activate: '触发 activate 事件'}) deactivate:MIP.setData({deactivate: '触发 deactivate 事件'}) select:MIP.setData({selectedDate: event.date})"> <input type="text" name="date-picker-overlay"> </mip-date-picker> </mip-form> <p>activate 事件:<span m-text="activate"></span></p> <p>deactivate 事件:<span m-text="deactivate"></span></p> <p>select 事件:<span m-text="selectedDate"></span></p> <button on="tap:date-picker.clear">清空日期</button> <button on="tap:date-picker.setDate({date: '2019-10-15'})">设置日期</button> <button on="tap:date-picker.today">选择今天</button>

range-picker: 选择日期范围模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>range-pick: 下拉模式</p> <mip-form> <mip-date-picker mode="range-picker" id="range-picker" start-input-selector="[name=range-picker-overlay-start]" end-input-selector="[name=range-picker-overlay-end]" on="activate:MIP.setData({activate: '触发 range-picker activate 事件'}) deactivate:MIP.setData({deactivate: '触发 range-picker deactivate 事件'}) select:MIP.setData({start: event.start, end: event.end})"> <input type="text" name="range-picker-overlay-start"> <input type="text" name="range-picker-overlay-end"> </mip-date-picker> </mip-form> <p>activate 事件:<span m-text="activate"></span></p> <p>deactivate 事件:<span m-text="deactivate"></span></p> <p>select 事件: <p>起始日期:<span m-text="start"></span></p> <p>起始日期:<span m-text="end"></span></p> </p> <button on="tap:range-picker.clear">清空日期</button> <p>设置日期: {start: '2019-10-15', end: '2019-10-23'}</p> <button on="tap:range-picker.setDates({start: '2019-10-15', end: '2019-10-23'})">设置日期</button>

属性

mode

说明:选择器模式。date-picker | range-picker: 日期选择或范围选择

必选项:是

类型 :字符串

默认值:无

display

说明:显示样式,overlay | static。 overlay:点击 input 之后显示,input 失焦后收起。static:始终显示

必选项:否

类型 :字符串

默认值:overlay

format

说明:指定日期格式化模式,用于 input 框中日期的格式化显示,以及用户在 input 框中输入日期时的校验,校验时只有符合 format 格式的才会在日历中自动高亮用户输入的日期。如:yyyy-MM-ddMM-dd-yyyydd-MM-yyyy,其中分隔符可以选择 -/。注意:format 只包含 年月日,不包含 时分秒,即 format 只能为 yyyy-MM-ddMM-dd-yyyydd-MM-yyyyyyyy/MM/ddMM/dd/yyyydd/MM/yyyy 6 种格式之一,其他格式不允许。

必选项:否

类型 :字符串

默认值:yyyy-MM-dd

minDate

说明:选择器提供日期可选范围设置,minDate 是日期可选范围的最小值,可以只提供最小值,此时最大值为当前年份减 100 年

必选项:否

类型 :字符串,可以转化为 Date 对象的合法格式,比如:2019-08-30 或者 2019/08/30 等

默认值:无,即所有日期都可选

maxDate

说明:选择器提供日期可选范围设置,maxDate 是日期可选范围的最大值,可以只提供最大值,此时最大值为当前年份加 100 年

必选项:否

类型 :字符串,可以转化为 Date 对象的合法格式,比如:2019-08-30 或者 2019/08/30 等

默认值:无,即所有日期都可选

selectedDate

说明:默认选中的日期

必选项:否

类型 :字符串,可以转化为 Date 对象的合法格式,比如:2019-08-30 或者 2019/08/30 等

默认值:无

dayOffset

说明:日历默认最左侧为周日,即 日 一 二 三 四 五 六,可以通过 dayOffset 调整是从周几开始,0 为周日,1 为周一,以此类推

必选项:否

类型:数字

默认值:0

openAfterSelect

说明:默认选择日期后关闭选择器,通过指定 open-after-select 可以实现选择日期后不关闭,该属性只要存在即有效,不需要指定值

必选项:否

类型:HTML 属性

默认值:无

openAfterclear

说明:默认清空日期后关闭选择器,通过指定 open-after-clear 可以实现清空日期后不关闭,该属性只要存在即有效,不需要指定值。但是需要指定 open-after-select,否则选择日期后就会关闭,达不到想要的效果

必选项:否

类型:HTML 属性

默认值:无

事件

mip-date-picker 支持以下 event,通过 MIP 的 on 语法进行调用,MIP事件机制可参考文档

事件描述数据
activate日期选择器被打开时触发
deactivate日期选择器关闭时触发
select用户选择日期后触发,range 模式下会在开始日期和结束日期都选择完成后触发数据见下方描述

mode = date-picker 模式下

1
2
3
{ "date": "selectedDate" // 类型为 Date 对象 }

可以结合 MIP 数据绑定机制进行数据的绑定和使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<mip-data> <script type="application/json"> { "selectedDate": null } </script> </mip-data> <mip-form> <mip-date-picker mode="date-picker" on="select:MIP.setData({selectedDate: event.date)" input-selector="[name=date-picker-overlay]"> <input type="text" name="date-picker-overlay"> </mip-date-picker> </mip-form>

mode = range-picker 模式下

注意:日期范围选择器允许用户选择起始日期和结束日期为同一天

1
2
3
4
5
{ "selectedDate": "selectedDate", // 类型为 Date 对象 "start": "startDate", // 类型为 Date 对象 "end": "endDate" // 类型为 Date 对象 }

可以结合 MIP 数据绑定机制进行数据的绑定和使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mip-data> <script type="application/json"> { "start": null, "end": null } </script> </mip-data> <mip-form> <mip-date-picker mode="date-picker" on="select:MIP.setData({start: event.start, end: event.end)" input-selector="[name=date-picker-overlay]"> <input type="text" name="date-picker-overlay"> </mip-date-picker> </mip-form>

行为

clear

清空 date-picker 或者 range-picker 中的数据,清空的 input 框以 id 标识,参考文档,使用如下:

1
<button on="tap:date-picker.clear">清空日期</button>

setDate

设置 date-picker 中的数据,数据格式为可以转化成 Date 对象的合法格式即可,input 框以 id 标识,使用如下:

1
<button on="tap:date-picker.setDate({date: '2019-10-15'})">设置日期</button>

setDates

设置 range-picker 中的数据,数据格式为可以转化成 Date 对象的合法格式即可,input 框以 id 标识,使用如下:

1
<button on="tap:range-picker.setDates({start: '2019-10-15', end: '2019-10-23'})">设置日期</button>

today

在 date-picker 中,选中今天,在 range-picker 中不可用。input 框以 id 标识,使用如下:

1
<button on="tap:date-picker.today">选择今天</button>