# v2calendar-picker

> 基于vue2实现的日历组件，支持单选和区间选择（支持自定义样式）

Latest version **1.2.1** (published 2023-08-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install v2calendar-picker
pnpm add v2calendar-picker
yarn add v2calendar-picker
bun add v2calendar-picker
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2023-08-25 |
| First published | 2023-04-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 95.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | libaba2 |
| Maintainers | libaba2 |
| Keywords | calendar, calendar-picker, date, date-picker |

## Links

- npm: https://www.npmjs.com/package/v2calendar-picker
- npm.io page: https://npm.io/package/v2calendar-picker

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2023-08-25
- 1.2.0 — 2023-08-25
- 1.1.2 — 2023-08-22
- 1.1.0 — 2023-08-22
- 1.0.8 — 2023-04-13
- 1.0.7 — 2023-04-13
- 1.0.6 — 2023-04-13
- 1.0.5 — 2023-04-13
- 1.0.4 — 2023-04-13
- 1.0.3 — 2023-04-13
- 1.0.2 — 2023-04-13
- 1.0.1 — 2023-04-13
- 1.0.0 — 2023-04-13

## README

#### 基于vue2实现的日历组件，支持单选和区间选择（支持自定义样式）

#### Install

```javascript
$ npm install v2calendar-picker
```

#### Usage

```javascript
// 基本使用
// 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>
```

```javascript
// 样式相关
// 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}。

---
_Source: https://npm.io/package/v2calendar-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._