# roche-vue2-datepicker

> A Datepicker Component For Vue2

Latest version **1.1.8** (published 2023-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install roche-vue2-datepicker
pnpm add roche-vue2-datepicker
yarn add roche-vue2-datepicker
bun add roche-vue2-datepicker
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2023-08-08 |
| First published | 2023-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yangchao |
| Maintainers | thisisyangchao |
| Keywords | vue, calendar, datepicker, datetimepicker |

## Links

- npm: https://www.npmjs.com/package/roche-vue2-datepicker
- Repository: https://www.npmjs.com/package/roche-vue2-datepicker
- npm.io page: https://npm.io/package/roche-vue2-datepicker

## Dependencies (4)

- [style](https://npm.io/package/style.md) 0.0.3
- [moment](https://npm.io/package/moment.md) ^2.29.4
- [element-ui](https://npm.io/package/element-ui.md) ^2.15.13
- [date-format-parse](https://npm.io/package/date-format-parse.md) ^0.2.7

## 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.1.8 (latest) — 2023-08-08
- 1.1.7 — 2023-08-03
- 1.1.6 — 2023-08-03
- 1.1.5 — 2023-07-10
- 1.1.4 — 2023-06-05
- 1.1.3 — 2023-06-05
- 1.1.2 — 2023-06-05
- 1.1.1 — 2023-05-26
- 1.1.0 — 2023-05-25
- 1.0.9 — 2023-05-23
- 1.0.8 — 2023-05-22
- 1.0.7 — 2023-05-22
- 1.0.6 — 2023-05-19
- 1.0.5 — 2023-05-19
- 1.0.4 — 2023-05-19
- … 4 more at https://npm.io/package/roche-vue2-datepicker/versions

## README

# roche-vue2-datepicker


> A Datepicker Component For Vue2


## Install

```bash
$ npm install roche-vue2-datepicker --save
```

# 组件使用文档

## 属性
| name| type | 默认值 | 可选值 | 说明 |
| --- | --- | --- | ---| --- | 
| v-model/value| String/Array/Date | - | - | 选中值 |
| width | String/Number | 350 | -| 日期选择面板大小 |
| placement | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom | 出现位置 |
| disabled | boolean | false | true/false | 是否禁用 |
| placeholder | string | 请选择 |  | 输入框说明 |
| inputType | string | default | default/simple/input | input框类型 |
| inputClass | string | -- | -- | input框class |
| modules | array | ['preset','date','week','month','range'] | -- | 选择要使用的模块 |
| format | string | MM月DD日 | -- | 展示的日期格式 |
| yearFormat | string | YYYY年MM月DD日 | -- | 展示的日期格式（包括年） |
| valueFormat | string |  | -- | 日期值格式 |
| disabledDate | function | -- | -- | 禁用日期 |
| presetList | array | -- | -- | 预设列表 |
| theme | string | default | default/dark | 主题 |

## 事件

| name | 说明 | 回调参数 |
| --- | --- | --- |
| change | 选中值发生变化的回调 | value |

## 插槽
| name | 说明 | 
| --- | --- |
## 方法
| name | 说明 | 回调参数 |
| --- | --- | --- |
## 使用

```
<template>
    <r-date-picker v-model="now" @change='onChange'></r-date-picker>
<template>

<script>
    import { RDatePicker } from "roche-vue2-datepicker";
    // 汉化
    import "roche-vue2-datepicker/dist/locale/zh-cn";
    import "roche-vue2-datepicker/dist/index.css";
    export default {
        data(){
            return {
                now:''
            }
        },
        components:{
            RDatePicker
        },
        methods:{
            onChange(val){
                console.log('日期发生变化:',val)
            }
        }
    }
</script>
```

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