vue-ctk-date-time-picker

目录

前言

一、vue-ctk-date-time-picker是什么？

二、使用步骤

1.安装引入

2.API

可改string选项：

可改boolean选项：

---

前言

对于CtkDatetimePicker文档的整理

文档链接：vue-ctk-date-time-picker

---

一、vue-ctk-date-time-picker是什么？

一个适用于vue的日期和时间的选择器，通过其提供的一些配置自定义想要的选择日期时间的下拉框，除了vue-ctk-date-time-picker还有很多其他的组件，感兴趣的同学可以去看看Vue.js Showcase - Made With Vue.js

二、使用步骤

1.安装引入

npm i --save vue-ctk-date-time-picker

es6---

import VueCtkDateTimePicker from 'vue-ctk-date-time-picker';  引入选择器

import 'vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css'; 引入选择器css

Vue.component('VueCtkDateTimePicker', VueCtkDateTimePicker);  作为vue组件

<VueCtkDateTimePicker v-model="yourValue" />  使用组件

umd---

import '/vue-ctk-date-time-picker.umd.min.js' 引入选择器

import '/vue-ctk-date-time-picker.css'; 引入选择器css

Vue.component('vue-ctk-date-time-picker', window['vue-ctk-date-time-picker']); 作为vue组件

<ctk-date-time-picker v-model="yourValue"/> 使用组件

2.API

可改string选项：

v-model	必填项，用于获取用户选择的时间数据
id	用于区分多个选择器
format	时间数据的格式	'YYYY-MM-DD hh:mm a' 年-月-日 小时:分钟 pm/am	按照此格式删减，范围表的数据示例：YYYY-MM-DD  { "start": "2018-04-05", "end": "2018-04-20" }
label	提示文字	Select date & time
color	表格主题色	dodgerblue	颜色
button-color	按钮颜色	#00C853
position	位置	null
min-date	最小可选时间		两个的格式(format)必须相同
max-date	最大可选时间
input-size	input框的大小	null	sm小 lg大
button-now-translation	现在时间按钮的显示文本	'Now'
locale	选择器的显示语言	浏览器定位	fr法语 zn-ch中文
disabled-dates	禁用日期	数组	['2018-04-03', '2018-04-07', '2018-04-09']
disabled-hours	禁用小时	数组00到23	['00','01','02','03','04','05','06','07','19','20','21','22','23']
first-day-of-week	一周初始	数字0-7	为2的时候
disabled-weekly	一周中哪几天禁用	数组0-6	[0,4,6]

可改boolean选项：

no-header	是否显示头
error	错误		input的border和label显示为红色
only-date	只显示日期
only-time	只显示时间
no-label	不显示标签
no-weekends-days	周六周日是否可选
auto-close	是否自动关闭	开启后不再展示确认按钮，选择日期后则关闭
inline	展示在框内，没有input
overlay	展开时背后的遮罩层
range	时间范围
dark	dark模式		主题背景变黑
no-button	不展示下方所有按钮
no-button-now	不展示now按钮
no-keyboard	键盘不可操作
right	选择器靠右展示
noClearButton	没有清除按钮
persistent	一直是展开状态，无法关闭
disabled	禁用状态