vue 日期时间选择器_Vue日期时间选择器

vue 日期时间选择器

Vue日期时间选择器 (Vue Datetime picker)

Vue Datetime picker BY Vladyslav Shchepotin.

Vue日期时间选择器Vladyslav Shchepotin。

View demo 查看演示 Download Source 下载源

要求 (Requirements)

Vue.js ^2.5.17

Vue.js ^2.5.17

用法 (Usage)

npm install vue-vanilla-datetime-picker --save

import DateTimePicker from 'vue-vanilla-datetime-picker';Vue.component('date-time-picker', DateTimePicker);

@import "node_modules/vue-vanilla-datetime-picker/dist/DateTimePicker"

道具： (Props:)

Name	Required	Type	Default	Description
v-model, value	*	String, Date, DateTime (luxon)		Value
value-format		String	yyyy-LL-dd HH:mm:ss	Value format
max-date		String, Date, DateTime (luxon)	null	Max date
min-date		String, Date, DateTime (luxon)	null	Min date
constraints-format		String	yyyy-LL-dd	Constraints format
locale		String	en	Set locale.
inline		Boolean	false	Enable inline mode.
disabled		Boolean	false	Disable datetime picker.
format		String	yyyy-LL-dd HH:mm	Display format.
time-picker		Boolean	true	Show time picker.
hour-time		Number	24	Hour in 12/24-hour time. Values: '12', '24'.
no-toggle-time-picker		Boolean	false	No toggle time picker button.
only-time-picker		Boolean	false	Show only time picker.
start-from-sunday		Boolean	false	Set Sunday as first day of week.
minute-step		Number	1	Set step for minute.
seconds-picker		Boolean	false	Show second picker.
initial-view		String	days	Initial view: 'days', 'months', 'years'
main-button-class		String		Class for main button.
disabled-dates		Array	[]	Array of disabled dates.
highlighted		Array	[]	Array of highlighted dates. Example: [{ date: '2018-09-17', class: 'highlighted' }]
auto-close		Boolean	false	Close date picker after select date.
clear-button		Boolean	false	Show "Clear" button.
close-button		Boolean	false	Show "Close" button.
today-button		Boolean	false	Show "Today" button.
value-type		String	Auto	Set value type. Types: 'Auto', 'String', 'Date', 'Luxon'.
empty-value		Any	''	Set empty value for clear button.

名称	需要	类型	默认	描述
v型，价值	*	字符串，日期，日期时间(勒克斯)		值
值格式		串	yyyy-LL-dd HH：mm：ss	值格式
最大日期		字符串，日期，日期时间(勒克斯)	空值	最长日期
最小日期		字符串，日期，日期时间(勒克斯)	空值	最小日期
约束格式		串	yyyy-LL-dd	约束格式
地区		串	恩	设置语言环境。
排队		布尔型	假	启用串联模式。
残障人士		布尔型	假	禁用日期时间选择器。
格式		串	yyyy-LL-dd HH：mm	显示格式。
时间选择器		布尔型	真正	显示时间选择器。
小时时间		数	24	12/24小时制的小时。值：“ 12”，“ 24”。
无切换时间选择器		布尔型	假	没有切换时间选择器按钮。
只能选择时间		布尔型	假	仅显示时间选择器。
从星期日开始		布尔型	假	将星期日设置为一周的第一天。
分钟步		数	1个	将步骤设置为分钟。
秒选		布尔型	假	显示第二个选择器。
初步观点		串	天	初始视图：“天”，“月”，“年”
主按钮类		串		主按钮的类。
禁用日期		数组	[]	禁用日期的数组。
突出显示		数组	[]	突出显示日期的数组。示例：[{date：'2018-09-17'，class：'highlighted'}]
自动关闭		布尔型	假	选择日期后关闭日期选择器。
清除按钮		布尔型	假	显示“清除”按钮。
关闭按钮		布尔型	假	显示“关闭”按钮。
今天按钮		布尔型	假	显示“今天”按钮。
值类型		串	汽车	设定值类型。类型：“自动”，“字符串”，“日期”，“ Luxon”。
空值		任何	''	设置清除按钮的空值。

插槽： (Slots:)

Name	Description
choose-date	For main button if date not selected.
formatted-datetime	For main button if date selected.
date	For date button.
time	For time button.
months-prev	For previous month button.
months-next	For next month button.
years-prev	For previous year button.
years-next	For next year button.
decades-prev	For previous decade button.
decades-prev	For next decade button.
hours-up	For hours up button.
hours-down	For hours down button.
minutes-up	For minutes up button.
minutes-down	For minutes down button.
seconds-up	For seconds up button.
seconds-down	For seconds down button.
meridiems-up	For meridiems up button.
meridiems-down	For meridiems down button.
clear	For clear button.
close	For close button.
today	For today button.

名称	描述
选择日期	对于主按钮(如果未选择日期)。
格式化日期时间	对于主按钮(如果选择了日期)。
日期	对于日期按钮。
时间	对于时间按钮。
上个月	对于上个月的按钮。
下个月	对于下个月按钮。
前几年	对于上一年按钮。
接下来的几年	对于明年按钮。
几十年前	对于前十年的按钮。
几十年前	对于下一个十年按钮。
小时以上	数小时向上按钮。
数小时下来	对于小时下降按钮。
分钟以上	对于分钟向上按钮。
分钟下来	按下分钟按钮。
秒上升	秒钟增加按钮。
秒秒	按下秒数按钮。
子午线	对于子午线向上按钮。
子午线	对于子午线向下按钮。
明确	对于清除按钮。
关	用于关闭按钮。
今天	对于今天按钮。

大事记： (Events:)

Name
close
open

名称
关
打开

发展历程 (Development)

npm install

编译和热重装以进行开发 (Compiles and hot-reloads for development)

npm run serve

编译并最小化生产 (Compiles and minifies for production)

npm run build-lib

整理和修复文件 (Lints and fixes files)

npm run lint

翻译自: https://vuejsexamples.com/vue-datetime-picker/

vue 日期时间选择器

vue 日期时间选择器_Vue日期时间选择器相关推荐

vue element ui里的日期时间选择器中国标准时间转化为年月日时分秒
<el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder=&qu ...
vue 日期选择器默认时间_ant-design-vue 时间选择器赋值默认时间的操作
我就废话不多说了,大家还是直接看代码吧~ show-time format="YYYY/MM/DD HH:mm:ss" :value="[this.moment(star ...
element时间选择器限制到时分秒_element-ui 日期时间选择器限制日期以及时间范围...
element-ui 日期时间选择器限制日期以及时间范围. 实现效果: 实现方式: 业务背景: 日期:只能选择今天以后的日期(包含今天), 时间:只能选择当前日期时间一小时以后的时间. 实现效果: 实 ...
【ElementUI】日期选择器，只能选今天之前的时间，或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能小于开始日期
一个日期选择器的范围限制 <el-date-pickerv-model="value1"type="date"placeholder="选择日期 ...
DateTimePicker 日期时间选择器设置默认时间
DateTimePicker 日期时间选择器设置默认时间 default-value属性接受一个数组,第一项为开始时间,第二项为结束时间,时间格式为:"YY-mm-dd HH:mm:ss&q ...
vue2 + elementui 日期时间选择器禁止选择当前时间之前的日期及时间，并添加相应校验规则
项目里有这样一个需求:文章设置的预发布时间不得早于当前时间(包括日期和时分秒时间). 具体实现如下: 1.在日期时间选择其中设置禁止选中(包括日期和时间) (1)在html(template)中, 通 ...
日期时间选择器-jeDate日期控件
官方文档地址:http://www.jemui.com/uidoc/jedate.html 控件展示如图各种各样的时间控件都有. 我用在后台的是年月日时分秒的那个,如下图独立jeDate下载:ht ...
vue滑动选择器(一键开启时间选择器)
vue滑动选择器(一键开启时间选择器) 一个vue的滑动选择器(移动端和PC端都能使用) 先来张效果图安装 npm install time_check_jiangji 引入 import Time ...
【vue开发问题-解决方法】（五）vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function
[vue开发问题-解决方法](五)vue Element UI 日期选择器获取日期格式问题 t.getTime is not a function 参考文章: (1)[vue开发问题-解决方法](五) ...

vue 日期时间选择器_Vue日期时间选择器

Vue日期时间选择器 (Vue Datetime picker)

要求 (Requirements)

用法 (Usage)

道具： (Props:)

插槽： (Slots:)

大事记： (Events:)

发展历程 (Development)

编译和热重装以进行开发 (Compiles and hot-reloads for development)

编译并最小化生产 (Compiles and minifies for production)

整理和修复文件 (Lints and fixes files)

vue 日期时间选择器_Vue日期时间选择器相关推荐

最新文章

热门文章