Thanks to visit codestin.com
Credit goes to github.com

Skip to content

About A lightweight, clean, and intuitive date picker with full feature support for multiple languages, lunar display, and various date formats.

License

Notifications You must be signed in to change notification settings

oljc/datepicker-pro-vue

DatePicker Pro

version minizipped minified

Release last-commit MIT License

一个轻量、界面简洁、直观、功能齐全的日期选择器。支持多语言、农历展示和各种日期格式。

特性

  • 遵循的是 ISO 8601 时间格式标准。
  • 支持预设时间快捷选择。
  • 提供农历/节假日的显示,可自定义假日信息。
  • 组件提供了众多属性方便灵活配置,覆盖了绝大部份的时间业务场景。
  • 界面简洁美观、交互流畅。

快速上手

安装

npm

npm install datepicker-pro-vue

yarn

yarn add datepicker-pro-vue

CDN

// jsdelivr
<script src="https://cdn.jsdelivr.net/npm/datepicker-pro-vue"></script>

// unpkg
<script src="https://unpkg.com/datepicker-pro-vue"></script>

需要引入指定版本时只需在包名后面加入具体版本信息即可。datepicker-pro-vue@xxx,不加默认为最新版

引入

全局注册

import Vue from "vue";
import App from "./App.vue";
import DatePickerPro from 'datepicker-pro-vue'; // 引入组件

Vue.use(DatePickerPro)
// DatePickerPro.install(Vue);

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

<DatePickerPro v-model="value" showTime></DatePickerPro>

效果: image.png

使用

API

Props

参数名 描述 类型 默认值
v-model 面板显示的日期 Date string number -
allow-clear 是否允许清除 boolean true
readonly 是否为只读 boolean false
disabled 是否为禁用 boolean false
disabled-date 不可选取的日期 (current?: Date) => boolean -
disabled-time 不可选取的时间 (current: Date) => DisabledTimeProps -
default-picker-value 面板默认显示的日期 Date string number -
error 是否为错误状态 boolean false
shortcuts 预设时间范围快捷选择 ShortcutType[] []
position 弹出的框的位置 top bottom
left right
top-start
top-end
bottom-start
bottom-end
right-start
right-end
left-start
left-end
bottom
trigger 触发方式 toggle click hover focus click
popupTag 容器标签 String div
showArrow 是否显示箭头 boolean false
offset 偏移量 String number 4
mouseEnterDelay 移入事件延迟触发时间 number 100
mouseLeaveDelay 移出事件延迟触发时间 number 100
forceShow 持续展示 boolean false
renderToBody 是否挂载在body下 boolean false
unmountOnClose 是否在隐藏的时候销毁DOM结构 boolean false
popupContainer 弹出框的挂载容器 string HTMLElement null undefined -
gpuAcceleration 开启GPU加速渲染(低端机可能无法开启) boolean true
stopPropagation 阻止弹窗事件冒泡 boolean false
preventDefault 阻止弹窗默认行为 boolean false
value-format 值的格式,对 value defaultValue pickerValue defaultPickerValue 以及事件中的返回值生效,支持设置为时间戳,Date 和字符串(参考字符串解析格式)。如果没有指定,将格式化为字符串,格式同 format timestamp Date string -
preview-shortcut 是否要预览快捷选择的结果 boolean true
show-confirm-btn 是否显示确认按钮,showTime = true 的时候始终显示。 boolean false

Common Events

事件名 描述 参数
change 组件值发生改变 value: Date | string | number | undefined
date: Date | undefined
dateString: string | undefined
select 选中日期发生改变但组件值未改变 value: Date | string | number
date: Date
dateString: string
popup-visible-change 打开或关闭弹出框 visible: boolean
ok 点击确认按钮 value: Date | string | number
date: Date
dateString: string
clear 点击清除按钮 -
select-shortcut 点击快捷选项 shortcut: ShortcutType
picker-value-change 面板日期改变 value: Date | string | number
date: Date
dateString: string

字符串解析格式

格式 输出 描述
YY 21 两位数的年份
YYYY 2021 四位数年份
M 1-12 月份,从 1 开始
MM 01-12 月份,两位数
MMM Jan-Dec 缩写的月份名称
MMMM January-December 完整的月份名称
D 1-31 月份里的一天
DD 01-31 月份里的一天,两位数
d 0-6 一周中的一天,星期天是 0
dd Su-Sa 最简写的一周中一天的名称
ddd Sun-Sat 简写的一周中一天的名称
dddd Sunday-Saturday 一周中一天的名称
H 0-23 小时
HH 00-23 小时,两位数
h 1-12 小时, 12 小时制
hh 01-12 小时, 12 小时制, 两位数
m 0-59 分钟
mm 00-59 分钟,两位数
s 0-59
ss 00-59 秒,两位数
S 0-9 数百毫秒,一位数
SS 00-99 几十毫秒,两位数
SSS 000-999 毫秒,三位数字
Z -5:00 UTC 的偏移量
ZZ -0500 UTC 的偏移量,数字前面加上 0
A AM PM -
a am pm -
Do 1st... 3st 带序号的月份中的某天
X 1410715640.579 Unix 时间戳
x 1410715640579 Unix 毫秒时间戳

相关依赖

名称 版本 作者
dayjs ^1.11.7 iamkun
@popperjs/core ^2.11.6 floating-ui
b-tween ^0.3.3 PengJiyuan

参与贡献

贡献之前请先阅读 行为准则

感谢本项目中所有用到的资源、工具的开发们,以及参与贡献的人!

License

本项目使用 MIT 协议许可证。

About

About A lightweight, clean, and intuitive date picker with full feature support for multiple languages, lunar display, and various date formats.

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

No packages published