安装

$ 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 defaultmomentFormat: {//[optional] Date to Stringstringify: (date) => {return date ? moment(date).format('LL') : ''},//[optional]  String to Dateparse: (value) => {return value ? moment(value, 'LL').toDate() : null},//[optional] getWeekNumbergetWeek: (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	弹出侧边栏

vue2-datepicker相关推荐

vue2.0桌面端框架_vue 专题 vue2.0各大前端移动端ui框架组件展示
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建多个轻量库搭配使用请访问链接: https://ww ...
前端vue显示柱状图_详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）_旧址_前端开发者...
数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 eleme ...
DatePicker 日期选择器，获取系统默认当前年月日
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和 ...
[记录学习]自学尚硅谷张天禹Vue2+3框架_vue_test
首先感谢尚硅谷和张天禹老师的教学分享!Respect! 学习来源:B站 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1&vd_source=07 ...
Vue2 项目优化，压缩
Vue2项目的优化部署最近才把博客项目部署到服务器上去(沾灰多年的服务器终于派上用场了0 W 0),刚开始前端项目在build时就已经提示文件过大了,chunk-vendors文件上MB了,当时不以 ...
vue2.9.5 引入vue-strap时报错
1.vue2.9.5 引入vue-strap时出错 2.组件中引入vue-strap的具体代码如下: 1 import DatePicker from 'vue-strap/src/Datepicke ...
Vue2 + cube UI 实现表单项目
在工作中主要使用React,这次帮朋友做了一个简单的移动端项目使用到Vue框架所以记录总结一下. 项目的前端技术栈: 由于项目比较老使用的是Vue2, UI 框架使用滴滴开源的cube-ui.cube ...
使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作与通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
JQuery 1.32 DatePicker 增强版
增加部分JS代码实现"清除"按钮 <script type="text/javascript"> $(function() { ...

vue2-datepicker

安装

使用

主题