vue2-datepicker

英文文档地址

vue2-datepicker - npm

安装

$ npm install vue2-datepicker --save

使用

<script>
  import DatePicker from 'vue2-datepicker';
  import 'vue2-datepicker/index.css';

  export default {
    components: { DatePicker },
    data() {
      return {
        time1: null,
        time2: null,
        time3: null,
      };
    },
  };
</script>

<template>
  <div>
    <date-picker v-model="time1" valueType="format"></date-picker>
    <date-picker v-model="time2" type="datetime"></date-picker>
    <date-picker v-model="time3" range></date-picker>
  </div>
</template>

主题

如果您的项目使用 SCSS，您可以更改默认样式变量。

创建一个 scss 文件。例如datepicker.scss：

$namespace: 'xmx'; // change the 'mx' to 'xmx'. then <date-picker prefix-class="xmx" />

$default-color: #555;
$primary-color: #1284e7;

@import '~vue2-datepicker/scss/index.scss';

Props

Prop	描述	类型	默认
type	选择选择器的类型	date |datetime|year|month|time|week	'date'
range	如果为真，请选择范围日期	boolean	false
format	设置日期格式。类似于 moment.js	token	'YYYY-MM-DD'
formatter	使用你自己的格式化程序，比如 moment.js	object	-
value-type	绑定值的数据类型	value-type	'date'
default-value	日历的默认日期	Date	new Date()
lang	覆盖默认语言环境	object
placeholder	输入占位符文本	string	''
editable	输入是否可编辑	boolean	true
clearable	如果为 false，则不显示清除图标	boolean	true
confirm	如果为真，需要点击按钮改变值	boolean	false
confirm-text	确认按钮的文字	string	'OK'
multiple	如果为真，则多选日期	boolean	false
disabled	禁用组件	boolean	false
disabled-date	指定无法选择的日期	(date: Date, currentValue: Date[]) => boolean	-
disabled-time	指定无法选择的时间	(date: Date) => boolean	-
append-to-body	将弹出窗口附加到正文	boolean	true
inline	无输入	boolean	false
input-class	输入类名	string	'mx-input'
input-attr	输入属性（例如：{ name: 'date', id: 'foo'}）	object	—
open	picker打开状态	boolean	-
default-panel	选择器的默认面板	year|month	-
popup-style	弹出样式	object	—
popup-class	弹出式课程		—
shortcuts	设置快捷方式选择	Array<{text, onClick}>	-
title-format	日历单元格中工具提示的格式	token	'YYYY-MM-DD'
partial-update	选择年份或月份时是否更新日期	boolean	false
range-separator	范围分隔符的文本	string	' ~ '
show-week-number	判断是否显示周数	boolean	false
hour-step	时间选择器中的小时间隔	1 - 60	1
minute-step	时间选择器分钟之间的间隔	1 - 60	1
second-step	时间选择器中秒数之间的间隔	1 - 60	1
hour-options	自定义小时列	Array<number>	-
minute-options	自定义分钟栏	Array<number>	-
second-options	自定义秒钟栏	Array<number>	-
show-hour	是否显示小时栏	boolean	base on format
show-minute	是否显示分钟栏	boolean	base on format
show-second	是否显示秒钟栏	boolean	base on format
use12h	是否显示ampm列	boolean	base on format
show-time-header	是否显示时间选择器的表头	boolean	false
time-title-format	时间头的格式	token	'YYYY-MM-DD'
time-picker-options	设置固定时间列表选择	time-picker-options	null
prefix-class	设置前缀类	string	'mx'
scroll-duration	选择小时时设置滚动持续时间	number	100

Token

Uint	Token	output
Year	YY	70 71 ... 10 11
	YYYY	1970 1971 ... 2010 2011
	Y	-1000 ...20 ... 1970 ... 9999 +10000
Month	M	1 2 ... 11 12
	MM	01 02 ... 11 12
	MMM	Jan Feb ... Nov Dec
	MMMM	January February ... November December
Day of Month	D	1 2 ... 30 31
	DD	01 02 ... 30 31
Day of Week	d	0 1 ... 5 6
	dd	Su Mo ... Fr Sa
	ddd	Sun Mon ... Fri Sat
	dddd	Sunday Monday ... Friday Saturday
AM/PM	A	AM PM
	a	am pm
Hour	H	0 1 ... 22 23
	HH	00 01 ... 22 23
	h	1 2 ... 12
	hh	01 02 ... 12
Minute	m	0 1 ... 58 59
	mm	00 01 ... 58 59
Second	s	0 1 ... 58 59
	ss	00 01 ... 58 59
Fractional Second	S	0 1 ... 8 9
	SS	00 01 ... 98 99
	SSS	000 001 ... 998 999
Time Zone	Z	-07:00 -06:00 ... +06:00 +07:00
	ZZ	-0700 -0600 ... +0600 +0700
Week of Year	w	1 2 ... 52 53
	ww	01 02 ... 52 53
Unix Timestamp	X	1360013296
Unix Millisecond Timestamp	x	1360013296123

formatter

formatter接受一个对象来自定义格式。

<date-picker :formatter="momentFormat" />

data() {
  return {
    // Use moment.js instead of the default
    momentFormat: {
      //[optional] Date to String
      stringify: (date) => {
        return date ? moment(date).format('LL') : ''
      },
      //[optional]  String to Date
      parse: (value) => {
        return value ? moment(value, 'LL').toDate() : null
      },
      //[optional] getWeekNumber
      getWeek: (date) => {
        return // a number
      }
    }
  }
}

value-type

设置绑定值的格式

Value	Description
'date'	返回一个日期对象
'timestamp'	返回一个时间戳数字
'format'	返回使用模式格式化的字符串format
token(MM/DD/YYYY)	返回使用此模式格式化的字符串

shortcuts捷径

范围选择器的快捷方式

[
  { text: 'today', onClick: () => new Date() },
  {
    text: 'Yesterday',
    onClick: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];

Attribute	Description
text	快捷方式的标题
onClick	回调函数，需要返回一个日期

time-picker-options

设置定时列表选择

{start: '00:00', step:'00:30' , end: '23:30', format: 'HH:mm' }

Attribute	Description
start	开始时间
step	步骤时间
end	时间结束
format	默认值与 prop 相同format

Events事件

Name	Description	Callback Arguments
input	当值改变时（v-model 事件）	date
change	当值改变时（与输入相同）	date, type('date'|'hour'|'minute'|'second'|'ampm
open	面板打开时	event
close	面板关闭时
confirm	当点击“确认”按钮时	date
clear	当点击“清除”按钮时
input-error	当用户键入无效日期时	the input text
focus	输入焦点时
blur	输入模糊时
pick	选择日期＃429	date
calendar-change	什么时候换日历	date, oldDate, type('year'|'month'|'last-year'|'next-year'|'last-month'|'next-month'|'last-decade'|'next-decade')
panel-change	当日历面板改变时	type('year'|'month'|'date'), oldType

Slots

Name	Description
icon-calendar	自定义日历图标
icon-clear	自定义清除图标
input	替换输入
header	弹出标题
footer	弹出页脚
sidebar	弹出侧边栏