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:)

NameRequiredTypeDefaultDescription
v-model, value*String, Date, DateTime (luxon)Value
value-formatStringyyyy-LL-dd HH:mm:ssValue format
max-dateString, Date, DateTime (luxon)nullMax date
min-dateString, Date, DateTime (luxon)nullMin date
constraints-formatStringyyyy-LL-ddConstraints format
localeStringenSet locale.
inlineBooleanfalseEnable inline mode.
disabledBooleanfalseDisable datetime picker.
formatStringyyyy-LL-dd HH:mmDisplay format.
time-pickerBooleantrueShow time picker.
hour-timeNumber24Hour in 12/24-hour time. Values: ’12’, ’24’.
no-toggle-time-pickerBooleanfalseNo toggle time picker button.
only-time-pickerBooleanfalseShow only time picker.
start-from-sundayBooleanfalseSet Sunday as first day of week.
minute-stepNumber1Set step for minute.
seconds-pickerBooleanfalseShow second picker.
initial-viewStringdaysInitial view: ‘days’, ‘months’, ‘years’
main-button-classStringClass for main button.
disabled-datesArray[]Array of disabled dates.
highlightedArray[]Array of highlighted dates. Example: [{ date: ‘2018-09-17’, class: ‘highlighted’ }]
auto-closeBooleanfalseClose date picker after select date.
clear-buttonBooleanfalseShow “Clear” button.
close-buttonBooleanfalseShow “Close” button.
today-buttonBooleanfalseShow “Today” button.
value-typeStringAutoSet value type. Types: ‘Auto’, ‘String’, ‘Date’, ‘Luxon’.
empty-valueAnySet 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:)

NameDescription
choose-dateFor main button if date not selected.
formatted-datetimeFor main button if date selected.
dateFor date button.
timeFor time button.
months-prevFor previous month button.
months-nextFor next month button.
years-prevFor previous year button.
years-nextFor next year button.
decades-prevFor previous decade button.
decades-prevFor next decade button.
hours-upFor hours up button.
hours-downFor hours down button.
minutes-upFor minutes up button.
minutes-downFor minutes down button.
seconds-upFor seconds up button.
seconds-downFor seconds down button.
meridiems-upFor meridiems up button.
meridiems-downFor meridiems down button.
clearFor clear button.
closeFor close button.
todayFor 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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。

相关文章