016 |
您所在的位置:网站首页 › 小三角下拉框怎么设置日期和时间 › 016 |
1. DateTimePicker日期时间选择器 1.1. 在同一个选择器里选择日期和时间。 1.2. DateTimePicker由DatePicker和TimePicker派生, Picker Options或者其他选项可以参照DatePicker和TimePicker。 1.3. 日期时间选择器属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 date(DateTimePicker) / array(DateTimeRangePicker) 无 无 readonly 完全只读 boolean 无 false disabled 禁用 boolean 无 false editable 文本框可输入 boolean 无 true clearable 是否显示清除按钮 boolean 无 true size 输入框尺寸 string large / small / mini 无 placeholder 非范围选择时的占位内容 string 无 无 start-placeholder 范围选择时开始日期的占位内容 string 无 无 end-placeholder 范围选择时开始日期的占位内容 string 无 无 time-arrow-control 是否使用箭头进行时间选择 boolean 无 false type 显示类型 string year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange date format 显示在输入框中的格式 string 见日期格式 yyyy-MM-dd HH:mm:ss align 对齐方式 string left / center / right left popper-class DateTimePicker下拉框的类名 string 无 无 picker-options 当前时间日期选择器特有的选项参考下表 object 无 {} range-separator 选择范围时的分隔符 string 无 '-' default-value 可选, 选择器打开时默认显示的时间 Date 可被new Date()解析 无 default-time 选中日期后的默认具体时刻 非范围选择时: string / 范围选择时: string[] 非范围选择时: 形如12:00:00的字符串; 范围选择时: 数组, 长度为2, 每项值为字符串, 形如12:00:00, 第一项指定开始日期的时刻, 第二项指定结束日期的时刻。不指定会使用时刻00:00:00 无 value-format 可选, 绑定值的格式。不指定则绑定值为Date对象 string 见日期格式 无 name 原生属性 string 无 无 unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean 无 false prefix-icon 自定义头部图标的类名 string 无 el-icon-date clear-icon 自定义清空图标的类名 string 无 el-icon-circle-close 1.4. Picker Options 参数 说明 类型 可选值 默认值 shortcuts 设置快捷选项, 需要传入{ text, onClick }对象用法参考demo或下表 Object[] 无 无 disabledDate 设置禁用状态, 参数为当前日期, 要求返回Boolean Function 无 无 cellClassName 设置日期的className Function(Date) 无 无 firstDayOfWeek 周起始日 Number 1到7 7 1.5. Shortcuts 参数 说明 类型 可选值 默认值 text 标题文本 string 无 无 onClick 选中后的回调函数, 参数是vm, 可通过触发'pick'事件设置选择器的值。例如: vm.$emit('pick', new Date()) function 无 无 1.6. 事件 事件名称 说明 回调参数 change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致, 可受value-format控制 blur 当input失去焦点时触发 组件实例 focus 当input获得焦点时触发 组件实例 1.7. 方法 事件名称 说明 focus 使input获得焦点 1.8. Slots Name 说明 range-separator 自定义分隔符 2. DateTimePicker日期时间选择器例子 2.1. 使用脚手架新建一个名为element-ui-datetimepicker的前端项目, 同时安装Element插件。 2.2. 编写App.vue 日期和时间点 通过设置type属性为datetime, 即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与Date Picker相同。 默认: 带快捷选项: 设置默认时间: 日期和时间范围 设置type为datetimerange即可选择日期和时间范围。 默认: 带快捷选项: 默认的起始与结束时刻 使用datetimerange进行范围选择时, 在日期选择面板中选定起始与结束的日期, 默认会使用该日期的00:00:00作为起始与结束的时刻; 通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组, 数组每项值为字符串, 形如12:00:00, 其中第一项控制起始日期的具体时刻, 第二项控制结束日期的具体时刻。 起始日期时刻为12:00:00 起始日期时刻为12:00:00, 结束日期时刻为08:00:00 export default { data () { return { val11: '', val12: '', val13: '', po1: { shortcuts: [{ text: '今天', onClick (picker) { picker.$emit('pick', new Date()) } }, { text: '昨天', onClick (picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24) picker.$emit('pick', date) } }, { text: '一周前', onClick (picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', date) } }] }, val21: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)], val22: '', po2: { shortcuts: [{ text: '最近一周', onClick (picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', [start, end]) } }, { text: '最近一个月', onClick (picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) picker.$emit('pick', [start, end]) } }, { text: '最近三个月', onClick (picker) { const end = new Date() const start = new Date() start.setTime(start.getTime() - 3600 * 1000 * 24 * 90) picker.$emit('pick', [start, end]) } }] }, val31: '', val32: '' } } }2.3. 运行项目 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |