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

2022-06-22 00:00:00 日期时间选择器

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 日期时间选择器

    原文作者：cuk5239
    原文地址: https://blog.csdn.net/cuk5239/article/details/107697080
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

相关文章