# 日期区间选择（vue3）

**Repository Path**: ChuPiJiang/datepick-vue3

## Basic Information

- **Project Name**: 日期区间选择（vue3）
- **Description**: 开源库中大多的区间日期，都是以左边日期为起点，向后面加一个月待选。但中台大多数场景都是统计过时间段发生的事，所以应该有以右为起点，向前一个月选日期的组件
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-04
- **Last Updated**: 2023-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: watt

## README

# DatePick-Vue3

Watt瓦特工作室，开源贡献，如使用问题可提交issues

## 介绍
开源库中大多的区间日期，都是以左边日期为起点，向后面加一个月待选。但中台大多数场景都是统计过时间段发生的事，所以应该有以右为起点，向前一个月选日期的组件。

如果旧的项目使用 vue2 的话，请使用另一个开源库 `date-pick-flexend` , 项目中可按说明文档使用，

- [gitee](https://gitee.com/ChuPiJiang/datepick-vue) 开源代码仓库

- [npmjs](https://www.npmjs.com/package/date-pick-flexend?activeTab=readme)  公网包管理

附加说明：

查到网上流行的开源组件，日期选择组件都是以左边为主的日期，如图：

![antdv](./assets/ant_datepick.png)

要以右边为主的日期，在统计需求是，很好显示最近一个月，最近7天数据统计，如图：

![](./assets/vue3_datepick_1.png)

![](./assets/vue3_datepick_2.png)

## 使用说明

页面组件的使用

```html
<template>
    <div>
        <w-date-picker type="datetime" placement="bottom-end" placeholder="Select date" style="width: 200px" />

        <w-date-picker type="datetimerange" v-model="datetime" placement="bottom-end" placeholder="Select date" style="width: 400px" />
    </div>
</template>
<script setup>
import {ref} from 'vue'

const datetime = ref(['2023-01-11 00:00:00', '2023-02-22 00:02:34'])
</script>

```

### 全局引入

```js
import DatePickerVue3 from 'datepick-vue3'
import 'datepick-vue3/dist/datepick.css'

app.use(DatePickerVue3)
```

### 按需引入

```js
import { DatePicker } from 'datepick-vue3'
import 'datepick-vue3/dist/datepick.css'

export default {
  install (app) {
    app.component('w-date-picker', DatePicker)
  }
}

```

### 版本特性

- v0.0.1  cjs为默认模式
- v0.0.2  改成module 为默认模式, 安装在node_modules中不导出除`dist`的文件夹
  cjs 的引用 `const DatePick = require('datepick-vue3/dist/datepick.umd.cjs')`