vue2-datepicker/README_CN.md

vue2-datepicker

English Version

一个基于Vue2.x的日期时间选择组件

线上Demo

https://mengxiong10.github.io/vue2-datepicker/

安装

$ npm install vue2-datepicker --save

用法

<script>
import DatePicker from 'vue2-datepicker'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      shortcuts: [
        {
          text: 'Today',
          start: new Date(),
          end: new Date()
        }
      ]
    }
  }
}
</script>

<template>
  <div>
    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" range :shortcuts="shortcuts"></date-picker>
  </div>
</template>

Props

名称	类型	默认	说明
type	String	'date'	选择日期或日期时间(可选：date,datetime)
range	Boolean	false	如果是true， 显示日历范围选择
confirm	Boolean	false	如果是true， 显示确认按钮且需要确认才更新时间
format	String	yyyy-MM-dd	自定义显示在输入框上的格式(yyyy-MM-dd HH:mm:ss)
lang	String	zh	选择语言 (en/zh/es/pt-br/fr/ru/de/it/cs)
placeholder	String		placeholder的值
width	String/Number	210	输入框的width
disabled-days	Array	[]	禁止选择的日期 (['2018-1-1'])
not-before	String/Date	''	禁止选择这个时间之前的时间
not-after	String/Date	''	禁止选择这个时间之后的时间
shortcuts	Boolean/Array	true	自定义范围选择的时候快捷选项(见下表)
time-picker-options	Object	{}	自定义时间选择的开始，结束，步进(见下表)
minute-step	Number	0	分钟的步进，设置time-picker-options，这项无效
first-day-of-week	Number	7	设置日历星期几开头(1-7)
input-class	String	'mx-input'	自定义输入框的类名
confirm-text	String	'OK'	确认按钮的名称
disabled	Boolean	false	禁用组件
editable	Boolean	false	如果是true, 用户可以手动输入 (仅在range === false)

shortcuts

• true - 显示默认快捷选择
• false - 隐藏快捷选择
• Object[] - 自定义快捷选择, 格式：[{text, start, end}]

名称	类型	说明
text	String	显示文字
start	Date	开始日期
end	Date	结束日期

time-picker-options

• Object[] - 自定义时间选择, 格式：[{start, step, end}]

名称	类型	说明
start	String	开始时间 (eg '00:00')
step	String	步进时间 (eg '00:30')
end	String	结束时间 (eg '23:30')

Events

Name	说明	回调参数
change	选择的时候触发	选择的日期
confirm	点击确认按钮触发的事件	选择的日期

许可证

MIT

Copyright (c) 2017-present xiemengxiong