vue日期时间选择组件_强大且易于使用的Vue组件日期时间选择器

2022-06-22 00:00:00 选择日期组件

vue日期时间选择组件

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

Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable date, 12/24-hour time, inline mode, etc.

VueJS的快速，强大且易于使用的组件日期时间选择器。该组件包括本地化，突出显示和禁用日期，12/24小时制，内联模式等。

View demo
查看演示
Download Source
下载源

《vue日期时间选择组件_强大且易于使用的Vue组件日期时间选择器》

要求 (Requirements)

Vue.js ^2.5.0
Vue.js ^2.5.0

用法 (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
change-month
change-year
change-decade

名称
关
打开
变化月
变化年
变化十年

RTL支持呢？ (What about RTL support?)

If you need an RTL version of component for your project, recommend use PostCSS plugin which is called postcss-rtl.

如果您的项目需要组件的RTL版本，建议使用PostCSS插件postcss-rtl 。

发展历程 (Development)

npm install

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

npm run serve

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

npm run build-lib

翻译自: https://vuejsexamples.com/powerful-and-easy-to-use-component-datetime-picker-for-vue/

vue日期时间选择组件

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

相关文章