vue2-datepicker (vue2-datepicker)

A Datepicker Component For Vue2

Vue2的Datepicker组件

安装 (Install)

$ npm install vue2-datepicker --save

用法 (Usage)

<script>
import DatePicker from 'vue2-datepicker'

export default {
  components: { DatePicker },
  data() {
    return {
      time1: '',
      time2: '',
      time3: '',
      shortcuts: [
        {
          text: 'Today',
          onClick: () => {
            this.time3 = [ new Date(), new Date() ]
          }
        }
      ],
      timePickerOptions:{
        start: '00:00',
        step: '00:30',
        end: '23:30'
      }
    }
  }
}
</script>

<template>
  <div>
    <date-picker v-model="time1" :first-day-of-week="1"></date-picker>
    <date-picker v-model="time2" type="datetime" :time-picker-options="timePickerOptions"></date-picker>
    <date-picker v-model="time3" range :shortcuts="shortcuts"></date-picker>
  </div>
</template>

道具 (Props)

Prop	Type	Default	Description
type	String	'date'	select datepicker or datetimepicker(date/datetime)
range	Boolean	false	if true, the type is daterange or datetimerange
format	String	YYYY-MM-DD	The parsing tokens are similar to the moment.js
lang	String/Object	zh	Translation (en/zh/es/pt-br/fr/ru/de/it/cs)(custom)
clearable	Boolean	true	if false, don't show the clear icon
confirm	Boolean	false	if true, need click the button to change the value
editable	Boolean	true	if false, user cann't type it
disabled	Boolean	false	Disable the component
placeholder	String		input placeholder text
width	String/Number	210	input size
not-before	String/Date	''	Disable all dates before new Date(not-before)
not-after	String/Date	''	Disable all dates after new Date(not-after)
disabled-days	Array/function	[]	Disable Days
shortcuts	Boolean/Array	true	the shortcuts for the range picker
time-picker-options	Object	{}	set timePickerOptions(start, step, end)
minute-step	Number	0	if > 0 don't show the second picker(0 - 60)
first-day-of-week	Number	7	set the first day of week (1-7)
input-class	String	'mx-input'	the input class name
input-name	String	'date'	the input name attr
confirm-text	String	'OK'	the default text to display on confirm button
range-separator	String	'~'	the range separator text

Struts	类型	默认	描述
类型	串	'日期'	选择datepicker或datetimepicker(date / datetime)
范围	布尔型	假	如果为true，则类型为daterange或datetimerange
格式	串	YYYY-MM-DD	解析令牌类似于moment.js
郎	字符串/对象	zh	翻译(zh / zh / es / pt-br / fr / ru / de / it / cs)(自定义)
可清除的	布尔型	真正	如果为假，则不显示清除图标
确认	布尔型	假	如果为true，则需要单击按钮以更改值
可编辑的	布尔型	真正	如果为假，则用户无法输入
残障人士	布尔型	假	禁用组件
占位符	串		输入占位符文本
宽度	字符串/数字	210	输入尺寸
之前	字符串/日期	''	禁用新日期之前的所有日期(非之前)
不后	字符串/日期	''	禁用新日期之后的所有日期(非之后)
残疾日	阵列/功能	[]	禁用天数
捷径	布尔/数组	真正	范围选择器的快捷方式
时间选择器选项	目的	{}	设置timePickerOptions(开始，步骤，结束)
分钟步	数	0	如果> 0则不显示第二个选择器(0-60)
一周的第一天	数	7	设置一周的第一天(1-7)
输入类	串	'mx-input'	输入的类别名称
输入名称	串	'日期'	输入名称attr
确认文字	串	'好'	在确认按钮上显示的默认文本
范围分隔符	串	'〜'	范围分隔符文字

郎 (lang)

• String (en/zh/es/pt-br/fr/ru/de/it/cs)

  字符串(en / zh / es / pt-br / fr / ru / de / it / cs)

• Object (custom)

  对象(自定义)

<script>
export default {
  data() {
    return {
      value: '',
      lang: {
        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
        placeholder: {
          date: 'Select Date',
          dateRange: 'Select Date Range'
        }
      }
    }
  }
}
</script>

<template>
  <date-picker v-model="value" :lang="lang"></date-picker>
</template>

捷径 (shortcuts)

• true - show the default shortcuts

  true-显示默认快捷方式

• false - hide the shortcuts

  false-隐藏快捷方式

• Object[] - custom shortcuts, [{text, start, end}]

  Object []-自定义快捷键，[{text，start，end}]

• Object[] - custom shortcuts, [{text, onClick}]

  对象[]-自定义快捷方式，[{text，onClick}]

Prop	Type	Description
text	String	Text
start	Date	Start Date
end	Date	End Date
onClick	Function	click handler

Struts	类型	描述
文本	串	文本
开始	日期	开始日期
结束	日期	结束日期
onClick	功能	点击处理程序

时间选择器选项 (time-picker-options)

• Object[] - custom time-picker, [{start, step, end}]

  对象[]-自定义时间选择器，[{开始，步骤，结束}]

Prop	Type	Description
start	String	startTime (eg '00:00')
step	String	stepTime (eg '00:30')
end	String	endTime (eg '23:30')

Struts	类型	描述
开始	串	startTime(例如“ 00:00”)
步	串	stepTime(例如“ 00:30”)
结束	串	endTime(例如“ 23:30”)

大事记 (Events)

Name	Description	Callback Arguments
change	When the value change	the currentValue
input	When the value change	the currentValue
confirm	When user click 'OK' button	the currentValue
input-error	When user type a invalid Date	the input text

名称	描述	回调参数
更改	当值改变时	当前值
输入	当值改变时	当前值
确认	当用户单击“确定”按钮时	当前值
输入错误	当用户键入无效的日期时	输入文字

插槽 (Slots)

Name	Description
calendar-icon	custom the calender icon
header	popup header
footer	popup footer

名称	描述
日历图标	自定义日历图标
标头	弹出标题
页脚	弹出页脚

翻译自: https://vuejsexamples.com/a-datepicker-datetimepicker-component-for-vue2/