vue轮式日期和时间选择器组件 - Drumroll

vue轮式日期和时间选择器组件 - Drumroll
插件名称 vue-drumroll-datetime-picker
发布时间 2021年11月16日
插件作者 plusone-masaki

Drumroll 是一个受 iOS 启发的用于 Vue.js 的轮式日期和时间选择器组件。

安装和下载:

# Yarn
$ yarn add @plusone-masaki/vue-drumroll-datetime-picker

# NPM
$ npm i @plusone-masaki/vue-drumroll-datetime-picker

使用

1. 将组件导入您的应用程序。

import Vue from 'vue'
import DateTimePicker, { DatePicker, TimePicker } from 'vue-drumroll-datetime-picker'
import 'vue-drumroll-datetime-picker/vue-drumroll-datetime-picker.css'

2. 注册组件。

Vue.component('DateTimePicker', DateTimePicker)
Vue.component('DatePicker', DatePicker)
Vue.component('TimePicker', TimePicker)

3. 创建一个基本的日期时间选择器。

<date-time-picker v-model="now" />

4. 创建一个日期选择器。

<date-time-picker v-model="now" type="date" />

5. 创建一个时间选择器。

<date-time-picker v-model="now" type="time" />

6. 在弹出对话框中显示日期和时间选择器。

<date-time-picker v-model="now" dialog />

7. 可用的组件道具。

// datetime picker
items: { type: Array, required: true },
format: { type: String, required: true },
height: { type: [String, Number], default: '10em' },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], required: true },
unit: { type: String, required: true },
value: { type: [String, Number], default: undefined },
width: { type: [String, Number], default: '2em' },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: () => constants.DEFAULT_MIN_DATE },
minuteInterval: { type: [String, Number], default: 1 },
type: { type: String, default: 'datetime' },

// date picker
defaultValue: { type: String, default: undefined },
format: { type: String, default: 'YYYY-MM-DD' },
height: { type: [String, Number], default: undefined },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: constants.DEFAULT_MIN_DATE },
separator: { type: String, required: true },
value: { type: [String, Number, Date], default: undefined },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: () => constants.DEFAULT_MIN_DATE },
separator: { type: String, default: '-' },

// time picker
defaultValue: { type: String, default: undefined },
format: { type: String, default: 'YYYY-MM-DD HH:mm' },
height: { type: [String, Number], default: undefined },
maxDate: { type: [String, Number, Date], default: undefined },
minDate: { type: [String, Number, Date], default: undefined },
minuteInterval: { type: [String, Number], default: 1 },
separator: { type: String, required: true },
value: { type: [String, Number, Date], default: undefined },
height: { type: [String, Number], default: undefined },
hideButton: { type: Boolean, default: false },
minuteInterval: { type: [String, Number], default: 1 },
separator: { type: String, default: ':' },