v2calendar-picker
v1.2.1
Published
基于vue2实现的日历组件,支持单选和区间选择(支持自定义样式)
Downloads
23
Maintainers
Readme
基于vue2实现的日历组件,支持单选和区间选择(支持自定义样式)
Install
$ npm install v2calendar-picker
Usage
// 基本使用
// main.js 引入并use();
import CalendarPicker from 'v2calendar-picker'
import 'v2calendar-picker/v2calendar-picker.css'
Vue.use(CalendarPicker)
// app.vue
<template>
<div class="calendar">
<CalendarPicker
v-model="dates"
:format="format"
:disabledDates="disabledDates"
@change="valueChange">
</CalendarPicker>
</div>
</template>
<script>
export default {
data() {
return {
dates: "2021/10/03",
format: "YYYY-MM-DD",
disabledDates: ["2020/12/04", "2020/12/07"]
};
},
methods: {
valueChange(value, date) {
console.log(value, date, "valueChange");
}
}
};
</script>
// 样式相关
// APP.vue
<template>
<div id="app">
<div class="calendar">
<CalendarPicker
activeClassName="item-active"
dateClassName="date-item"
:interpositonClass="interpositonClass"
></CalendarPicker>
</div>
</div>
</template>
<script>
export default {
methods: {
/** 当日期为2023/8/25时显示 item-active2样式 */
interpositonClass(val) {
if (`${val.year}/${val.month}/${val.date}` === "2023/8/25") {
/** 只有返回类名才有效果 */
return "item-active2";
}
},
},
}
</script>
// 可以直接覆盖组件内部样式
<style lang="less">
.calendar {
width: 500px;
.date-item {
border-radius: 12px;
}
.item-active {
color: #fff;
background-color: rgb(111, 111, 111);
}
.item-active2 {
background-color: rgb(140, 96, 96);
}
}
</style>
Props
|参数|说明|类型|可选值|默认值| |--|--|--|--|--| |value|v-model的值,单选为单个字符串日期"2023/8/04",区间为日期字符串数组["2023/8/04", "2023/12/07"]|String / String[]|-|单选时为当前日期,区间选择没有默认值| |format|返回结果格式化字符串,以dayjs格式为准|String|-|-| |range|是否区间选择|Boolean|-|false| |showCount|是否显示区间选择天数统计|Boolean|-|true| |disabledDates|不可选中日期列表,eg:["2020/12/04", "2020-12-07"],单选有效|Array|-|[]| |dateClassName|日期单个ClassName|String|-|-| |activeClassName|日期选中ClassName|String|-|-| |interpositonClass|自定义某个日期样式,interpositonClass(val)。val为日期对象,需返回一个class类名字符串,使用请看案列。|Function(val):string {}|-|-|
Events
|事件名称|说明|回调参数| |--|--|--| |change|选项改变回调,返回format后的日期|function(value, date)|
注: change返回的date是对象形式的日期 {"year": 2021, "month": 10, "date": 8, "day": 5}。