npm install vue-calendar-xjq --save
yarn add vue-calendar-xjq
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-calendar-xjq@1.1.1/dist/index.css">
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-calendar-xjq@1.1.1/dist/index.js"></script>
import Vue from 'vue';
import { Calendar } from 'vue-calendar-xjq';
import 'vue-calendar-xjq/lib/index.css';
Vue.use(Calendar)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
el | 绑定的元素的id | string | |
value/v-model | 是否显示组件 | boolean | false |
isLunar | 是否显示农历 | boolean | false |
hms | 是否添加时间输入 | boolean | false |
minDate | 允许的最小日期 (格式:yyyy-MM-DD) | string | |
maxDate | 允许的最大日期 (格式:yyyy-MM-DD) | string | |
defaultVal | 默认值 | string | |
format | 格式化 | string | yyyy-MM-DD |
事件名称 | 说明 | 回调参数 |
---|---|---|
change | 选择日期后触发 | { date: 17, day: 3, formatDate: "2018年01月17日 下午 02:05:15", hour: "14", minute: "5", month: 0, second: "15", year: 2018 } |
格式 | 含义 | 备注 | 举例 |
---|---|---|---|
yy | 年 | 取年份后两位 | 19 |
yyyy | 年 | 2019 | |
M | 月份 | 不补0 | 1 |
MM | 月份 | 补0 | 01 |
D | 日 | 不补0 | 1 |
DD | 日 | 补0 | 01 |
d | 周 | 一 | |
dd | 周 | 周一 | |
ddd | 周 | 星期一 | |
A | 上午 | ||
h | 小时 | 12小时制,不补0, 需要和 A 配合使用 | 1 |
hh | 小时 | 12小时制,补0,需要和A配合使用 | 01 |
H | 小时 | 24小时制,不补0 | 15 |
HH | 小时 | 24小时制,补0 | 04 |
m | 分钟 | 不补0 | 1 |
mm | 分钟 | 补0 | 01 |
s | 秒 | 不补0 | 1 |
ss | 秒 | 补0 | 01 |
LY | 农历年 | 2018 | |
LM | 农历月份 | 腊月 | |
LD | 农历日 | 十一 | |
LT | 农历节气 | 没有节气的话,则是空字符串 | 冬至 |
import 'vue-calendar-xjq/lib/index.less'
// 使用Less提供的modifyVars即可对变量进行修改, 下面是webpack的配置
module.exports = {
rules: [
{
test: /\.less$/,
use: [
// ...其他 loader 配置
{
loader: 'less-loader',
options: {
modifyVars: {
'primary-color': '#22c39b',
}
}
}
]
}
]
};
// vue-cli 3 vue.config.js配置如下
module.exports = {
// ...其他配置
css: {
loaderOptions: {
less:{
modifyVars: {
'primary-color': '#efce6f',
}
}
}
},
}
样式变量
其它样式变量,请参考配置文件