Date 日期框

fox-datetime 常规

常规日期选择框

HTML

选择日期时间

<fox-datetime placeholder="选择日期时间" v-model="datetime_val" :options='{}'>日期框</fox-datetime>

设定年份区间

<fox-datetime placeholder="设定年份区间" v-model="datetime_val2" :options='{"type":"date","beginYear":2016,"endYear":2019}'>日期框2</fox-datetime>

设定选中的时间

<fox-datetime :placeholder="'设定选中的时间'" v-model="datetime_val3" :options='{"value":"2015-10-10 10:10","beginYear":2010,"endYear":2020}'>日期框3</fox-datetime>

fox-datetime 指定类型

指定类型的日期选择框

HTML

选择日期

<fox-datetime placeholder="选择日期" v-model="datetime_val4" :options='{"type":"date"}'>日期框4</fox-datetime>

选择时间

<fox-datetime placeholder="选择时间" v-model="datetime_val5" :options='{"type":"time"}'>日期框5</fox-datetime>

选择月份

<fox-datetime placeholder="选择月份" v-model="datetime_val6" :options='{"type":"month"}'>日期框6</fox-datetime>

fox-datetime 自定义数据

HTML

选择时段

<fox-datetime placeholder="选择时段" v-model="datetime_val7" :options='{"type":"hour","customData":{"h":[{"text":"上午","value":"上午"},{"text":"下午","value":"下午"},{"text":"晚上","value":"晚上"}]},"labels":["年", "月", "日", "时段", "分"]}'>日期框7</fox-datetime>

API

Props

组件支持以下属性：

参数	说明	类型	默认值
label	标签名	String	—
tip	提示	String	—
placeholder	输入提示	String	—
value/model	输入值	String	—
readonly	只读	Boolean	false
disabled	是否可用	Boolean	false
edit	是否可编辑	Boolean	false
options	日期框设置参数	Object/String	—
span	跨列	Number/String	1

option的常用属性请看上面例子

Event

支持以下事件：

事件	说明
change	输入改变
focus	获取焦点
blur	失去焦点

Slots

支持以下插槽：

名称	说明
default	标签名