vue 日期选择器默认时间_vue-datepicker

vue-datepicker

基于 Vue 的日期/时间选择组件。

安装

NodeJS 环境 (commonjs)

npm i @hyjiacan/vue-datepicker

或者

yarn add @hyjiacan/vue-datepicker

可以通过以下方式获取最新的代码

git clone https://github.com/hyjiacan/vue-datepicker.git

源码仓库

浏览器环境 (umd)

Since 2.4.0

与 NodeJS 环境不同的是，会暴露一个小写的全局 datepicker。

最新版本

指定版本

/dist/datepicker.umd.min.js">

unpkg 也是可用的: 替换 cdn.jsdelivr.net 为 unpkg.com

你也可以替换 datepicker.umd.min.js 为 datepicker.umd.js 以使用未压缩的版本进行开发调试。

注意：在浏览器环境直接引入时，需要显示引入依赖

popper.js

vue-popperjs

window['vue-popperjs'] = VuePopper

其中， window['vue-popperjs'] = VuePopper 必须在 datepicker 前引入。

使用

import DatePicker from '@hyjiacan/vue-datepicker'

import '@hyjiacan/vue-datepicker/dist/datepicker.css'

export default {

components: {DatePicker},

data() {

return {

date: new Date(),

min: '2012-12-12',

max: '2020-12-12'

}

}

}

更多示例参见

类型定义

year 日期选择，选择 年 为结果

month 日期选择，选择 月 为结果

quarter 日期选择，选择 季度 为结果

date 日期选择，选择 天 为结果

week 日期选择，选择 周 为结果

datetime 日期时间选择，选择 天和时间 为结果

time 时间选择，选择 时间 为结果

内置格式定义

{

"year":"yyyy",

"month":"yyyy-MM-dd",

"quarter":"yyyy-MM-dd",

"date":"yyyy-MM-dd",

"time":"HH:mm:ss",

"datetime":"yyyy-MM-dd HH:mm:ss",

"week":"yyyy-MM-dd"

}

格式定义是不可配置的。

props

v-model

type: Array, String, Number, Date

required: true

日期/时间值。

在按范围选择时 (指定 range)，需要传入数组。 例外的是，按星期和季度选择时，可以仅传入一个值。 此时会自动根据传入日期所在范围设置值。

若要使用空值时，请传入空字符串 ''。

type

type: String

default: 'date'

选择器显示的类型。可选值见#类型定义。

format

type: String

选择器显示的日期/时间的格式。格式参考#内置格式定义。

此处设置的格式会应用到 v-model, min, max 上。

min

type: Number, Strin