适用于 Vue2 的日期/时间选择组件。
Powered by popper.js V2
npm i @wangankeji/vue-datepicker
或者
yarn add @wangankeji/vue-datepicker
可以通过以下方式获取最新的代码
git clone https://gitee.com/wangankeji/vue-datepicker.git
git clone https://github.com/hyjiacan/vue-datepicker.git
或者直接 GITEE download archive 或者直接 GITHUB download archive
Since 2.2.0
与 NodeJS 环境相同,会暴露一个全局的 DatePicker
。
最新版本
<script src="https://cdn.jsdelivr.net/npm/@wangankeji/vue-datepicker/dist/datepicker.umd.min.js"></script>
指定版本
<script src="https://cdn.jsdelivr.net/npm/@wangankeji/vue-datepicker@<VERSION>/dist/datepicker.umd.min.js"></script>
unpkg 也是可用的: 替换 cdn.jsdelivr.net 为 unpkg.com
你也可以替换 datepicker.umd.min.js 为 datepicker.umd.js 以使用未压缩的版本进行开发调试。
注意:在浏览器环境直接引入时,需要显示引入依赖
<script src="https://cdn.jsdelivr.net/npm/popper.js@1/dist/umd/popper.min.js"></script>
<template>
<date-picker v-model="date" type="date" :min="min" :max="max"/>
</template>
<script>
import DatePicker from '@wangankeji/vue-datepicker'
import '@wangankeji/vue-datepicker/dist/datepicker.css'
export default {
components: {DatePicker},
data() {
return {
date: new Date(),
min: '2012-12-12',
max: '2020-12-12'
}
}
}
</script>
作为日历使用
<template>
<picker v-model="date"/>
</template>
<script>
import {Picker} from '@wangankeji/vue-datepicker'
import '@wangankeji/vue-datepicker/dist/datepicker.css'
export default {
components: {Picker},
data() {
return {
date: ''
}
}
}
</script>
更多示例参见 https://hyjiacan.github.io/vue-datepicker/
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"
}
格式定义是不可配置的。
日期/时间值。
在按范围选择时 (指定 range
),需要传入数组。 例外的是,按星期和季度选择时,可以仅传入一个值。 此时会自动根据传入日期所在范围设置值。
若要使用空值时,请传入空字符串
''
。
选择器显示的类型。可选值见#类型定义。
选择器显示的日期/时间的格式。格式参考#内置格式定义。
此处设置的格式会应用到 v-model
, min
, max
上。
设置允许的日期/时间最小值。
设置允许的日期/时间最大值。
是否按范围选择。
是否将起止日期输入框分开显示。在指定了 range
为 true
时有效。
控制日期值框的尺寸,可选值: mini
, small
, normal
, large
是否允许鼠标滚轮操作,当设置为 true
时,可以使用滚轮快速切换年/月翻页。
Since 0.2.0
用于设置一周的第一天是哪一天。
0
星期天1
星期一2
星期二3
星期三4
星期四5
星期五6
星期六控制弹出框是否可见。设置为true
以显示。
Since 0.3.0
快捷按钮的数据,这是一个对象数组。每一项的结构为:
{
"text": "按钮文本",
"value": "按钮的值"
}
其中,value
在指定了 range
时为数组,否则为单个值。text
是按钮显示的文字。 一般最多不超过5个中文字符,超过时会自动显示为省略号。
value
也可以是一个函数(异步支持),函数内的返回值将作为结果。
控制清除功能是否可用。可用时会显示清除按钮。
Since 0.4.0
是否隐藏左侧的日历图标
Since 0.4.0
指定 placeholder
文本。 当未指定 range
属性,或 type
为 week/quarter
时,应该指定为单个字符串; 否则,应该指定为包含两个字符串的数组。
默认值如下:
const placeholders = {
year: '选择年',
month: '选择月',
week: '选择周',
quarter: '选择季度',
date: '选择日期',
time: '选择时间',
datetime: '选择时间',
yearRange: ['起始年份', '结束年份'],
monthRange: ['起始月份', '结束月份'],
dateRange: ['起始日期', '结束日期'],
timeRange: ['起始时间', '结束时间'],
datetimeRange: ['起始时间', '结束时间']
}
Since 1.1.0
false
是否高亮选中范围。(仅在指定了 range
时有效)
(未实现)
组件是否只读。
(未实现)
输入框是否可编辑。设置为true
以手动输入日期/时间。
since 2.0.3
true
since 2.1.0
''
指定附加到弹出框的样式名称(这个名称应该是全局的,而不是局部(scoped
)的)。
since 2.1.0
''
指定附加到值显示部分的样式名称(这个名称应该是全局的,而不是局部(scoped
)的)。
since 2.1.0
{}
传递给 popperjs
的初始化选项。详见 popper.js#options
Since 2.2.0
click
显示日期选择弹框的触发器,可选值为 click
, focus
。
click
此时仅可通过鼠标点击触发focus
此时仅可通过获得焦点触发visible
属性来触发Since 2.2.0
false
是否显示农历信息。
Since 2.2.1
false
是否显示节日信息。
Since 2.3.0
标记函数,用于在日历上做标记。
此函数接收一个参数 e
,其在不同的类型时,结构是不同的。
但是,其始终包含一个 type
属性,其标识了当前的类型: date/month/year
参数: ({type, value, src}, oldValue)
Since 1.1.0
picker
选择面板shortcut
快捷键init
初始化clear
清空按钮放置自定义的快捷按钮。
注意:在指定了
trigger=blur
时,应该尽量避免在此插槽中使用会获得焦点的元素(e.g.button/input/select
),以防止弹框意外关闭。
since 0.5.0
自定义值的显示。
参数: {value, type, format, visible}
since 0.6.0
设置选择器上方的标题文字
当指定了 range
属性时,插槽需要传入包含两个元素:
<date-picker range>
<template v-slot:title>
<div>左侧的标题</div>
<div>右侧的标题</div>
</template>
</date-picker>
Since 2.2.0
设置选择器底部的内容。
导出了一点可能会用上的日期工具函数。
引用:
import DatePicker from '@wangankeji/vue-datepicker'
// DatePicker.util.format
所有的格式化串,请参照 内置格式定义 的写法。
export interface WeekRangeOption {
/**
* 周起始量,0-6分别表示星期天到星期六
*/
start: Number;
/**
* 周偏移量,可以是任意整数
*/
offset: Number;
/**
* 是否附带时间串
*/
time: Boolean;
/**
* 格式化串,不指定时返回 Date 类型
*/
format: String;
}
export interface MonthRangeOption {
/**
* 月偏移量,可以是任意整数
*/
offset: Number;
/**
* 是否附带时间串
*/
time: Boolean;
/**
* 格式化串,不指定时返回 Date 类型
*/
format: String;
}
export interface QuarterRangeOption {
/**
* 季度偏移量,可以是任意整数
*/
offset: Number;
/**
* 是否附带时间串
*/
time: Boolean;
/**
* 格式化串,不指定时返回 Date 类型
*/
format: String;
}
export interface WeekOfOption {
/**
* 周的偏移值
*/
start: Number;
/**
* 是否格式化
*/
format: boolean;
/**
* 遇到跨年的情况时,周应该放置在前一年(prev)还是当年(留空)或者下一年(next)
*/
boundary: string;
}
export interface DateRangeOption {
/**
* 是否格式化
*/
format: boolean;
/**
* 是否附带时间串
*/
time: Boolean;
}
export interface DateOffset {
year: number;
month: number;
date: number;
}
export interface Util {
/**
* 将任意格式的日期格式化成指定的格式
* @param {Date|String|Number} date
* @param {String} format 输出格式
* @param {String} [inputFormat] 当 date 是字符串时,通过此参数指定格式,不指定时使用 format 的值
* @return {string}
*/
format(date: [Date, String, Number], format: String, inputFormat?: string): string;
/**
* 将任意类型的日期格式转换成 Date 类型
* @param {Date|String|Number} date
* @param {String} [format] 当 date 是字符串时,通过此参数指定格式
* @return {Date}
*/
parse(date: [Date, String, Number], format?: string): Date;
/**
* 根据一个日期,谋算出其所在周的起止日期
* @param {Date} date
* @param {WeekRangeOption} [option]
* @param {number} [option.start=0] 周起始量,0-6分别表示星期天到星期六
* @param {number} [option.offset=0] 周偏移量,可以是任意整数
* @param {boolean} [option.time=false] 是否附带时间串
* @param {string} [option.format] 格式化串,不指定时返回 Date 类型
* @return {Date[]|String[]}
*/
getWeekRange(date: Date, option?: WeekRangeOption): Date[] | String[];
/**
* 根据一个日期,谋算出其所在月的起止日期 (月的第一天和最后一天)
* @param {Date} date
* @param {MonthRangeOption} [option]
* @param {number} [option.offset=0] 月偏移量,可以是任意整数
* @param {boolean} [option.time=false] 是否附带时间串
* @param {string} [option.format] 格式化串,不指定时返回 Date 类型
* @return {Date[]|String[]}
*/
getMonthRange(date: Date, option?: MonthRangeOption): Date[] | String[];
/**
* 根据一个日期,谋算出其所在季度的起止日期
* @param {Date} date
* @param {QuarterRangeOption} [option]
* @param {number} [option.offset=0] 季度偏移量,可以是任意整数
* @param {boolean} [option.time=false] 是否附带时间串
* @param {string} [option.format] 格式化串,不指定时返回 Date 类型
* @return {Date[]|String[]}
*/
getQuarterRange(date: Date, option?: QuarterRangeOption): Date[] | String[];
/**
* 获取传入日期处于一年中的第多少周
* @param {Date|Date[]} date
* @param {WeekOfOption} [option]
* @param {number} [option.start=0] 周的偏移值
* @return {{year: Number, week: Number}}
*/
getWeekOfYear(date: Date | Date[], option?: WeekOfOption): { year: Number, week: Number };
/**
* 获取传入日期处于一月中的第多少周
* @param {Date|Date[]} date
* @param {WeekOfOption} [option]
* @param {number} [option.start=0] 周的偏移值
* @return {{year: Number, month: Number, week: Number}}
*/
getWeekOfMonth(date: Date | Date[], option?: WeekOfOption): { year: Number, month: Number, week: Number };
/**
* 根据一个日期以及偏移参数获取日期范围
* @param {Date} date
* @param {DateOffset|string} beginOffset 开始日期的偏移量
* @param {DateOffset|string} endOffset 结束日期的偏移量
* @param {DateRangeOption} [option]
* @param {string} [option.format] 格式化串,不指定时返回 Date 类型
* @param {boolean} [option.time=false] 是否附带时间串
* @return {Date[]|String[]}
*/
getDateRange(date: Date, beginOffset: DateOffset | string, endOffset: DateOffset | string, option?: DateRangeOption): Date[] | string[];
/**
* 按指定规则对日期进行偏移
* @param {Date} date
* @param {DateOffset|string} offset 日期的偏移量
* @return {Date} 偏移后的日期对象(新对象)
*/
offsetDate(date: Date, offset: DateOffset | string): Date;
/**
* 获取被修正过的日期对象
* 其修正依赖 setDate 接口
* @see setDate
* @return {Date} 被修正过的日期对象
*/
getDate(): Date;
/**
* 设置当前日期(用于修正当前的错误日期,比如使用服务器时间的情况)
* @param timestamp 当前的时间戳,其什可以是 秒 或者 毫秒,传入 0 表示使用系统时间
*/
setDate(timestamp: Number): void;
}
说明:
函数 getDateRange
和 offsetDate
的偏移参数为字符串时,取值格式为 1y-2m3d
:
1y
表示年偏移量为 1
-2m
表示月偏移量为 -2
3d
表示天偏移量为 3
这个串的偏移结果相当于:
const date = new Date()
date.setFullYear(date.getFullYear() + 1)
date.setMonth(date.getMonth() - 2)
date.setDate(date.getDate() + 3)
可以仅指定一项(y/m/d
其中之一)或同时指定多项,不区分大小写。
Datepicker.util
代替 DatePicker.$util
Picker
组件的问题marker
为 mark-function
div+flex
代替 table
布局marker
属性支持show-lunar
footer
支持trigger
vue-popperjs
,直接使用 popper.js
,以避免前者过多处理导致不可预料的问题popper-class
和 value-class
,以深度自定义样式popper-options
,以自定义 popper.js
组件的行为to-body
属性,以支持将弹框渲染至 body
元素下,以解决某些情况下弹框被其它元素挡住的问题season
词义错误,使用 quarter
作为季度名称change
事件的问题highlight-range
属性,以高亮选中范围的背景change
事件添加 src
参数,以辅助开发outline
样式范围超出容器宽度的问题type=week
初始化时,传入值不是有正确的星期范围时可能不会触发值更新的问题getDateRange
在未传入 option
参数时报错的问题getWeekRange
计算错误getDateRange
与 offsetDate
value
设置成函数title
插槽支持getWeekRange
计算错误getWeekOfYear
geWeek(Month/Quarter)Range
参数split
属性placeholder
支持shortcuts
属性以及slots=shortcut
,用于放置快捷按钮range
属性,当设置 type
为 week
或quarter
时, range
自动变更为 true
v-model
属性,当设置的值为空(即未设置)时,使用当前日期此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型