vue 日期时间选择器
Vue日期时间选择器 (Vue Datetime picker)
Vue Datetime picker BY Vladyslav Shchepotin.
Vue日期时间选择器Vladyslav Shchepotin。
View demo
查看演示
Download Source
下载源
要求 (Requirements)
Vue.js
^2.5.17Vue.js
^2.5.17
用法 (Usage)
npm install vue-vanilla-datetime-picker --saveimport 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 lintvue 日期时间选择器
