# datepicker-vue

> vue2.0的一个移动端时间选择器

Latest version **1.2.5** (published 2017-06-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install datepicker-vue
pnpm add datepicker-vue
yarn add datepicker-vue
bun add datepicker-vue
```

## 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.5 |
| Published | 2017-06-23 |
| First published | 2017-03-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wumian |
| Maintainers | wumian |
| Keywords | datePicker, vue, vue2.0, date, 时间选择器 |

## Links

- npm: https://www.npmjs.com/package/datepicker-vue
- npm.io page: https://npm.io/package/datepicker-vue

## 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.5 (latest) — 2017-06-23
- 1.2.4 — 2017-05-20
- 1.2.3 — 2017-05-20
- 1.2.2 — 2017-05-20
- 1.2.1 — 2017-05-20
- 1.2.0 — 2017-05-15
- 1.0.1 — 2017-03-22
- 1.0.0 — 2017-03-22

## README

# datePicker-vue

> A Vue.js 2.0  时间选择 project

github地址：https://github.com/wumiangithub/datepicker-vue

## Build Setup

``` bash
# install dependencies
npm install datepicker-vue --save-dev

使用方法：
<template>
  <div class="hello">
    <div @click="dateShow = true">
      <input type="text" readonly v-model="dateTime" placeholder="请选择时间" style="font-size: 40px"/>
    </div>
    <date @dateClick="dateClick" @dateBack="dateBack" v-show="dateShow" :max="max" :openTime="openTime" :min="min"></date>
  </div>
</template>

<script>
  import date from 'datepicker-vue'
export default {
  data () {
    return {
      dateShow:false,
      min:'2017-05-20',//最小时间  默认为当前时间  可以不绑定这个属性，但是一定不能为空。要为yyyy-mm-dd格式
      max:"2018-09-11",//最大时间  不能比当前时间小  要为yyyy-mm-dd格式
      dateTime:'',//选中的时间
    }
  },
  components:{
    date
  },
  methods:{
    dateBack(){//时间插件返回按钮事件
      this.dateShow = false;
    },
    dateClick(msg){//时间插件传给当前页面的时间事件
      this.dateShow = false;
      this.dateTime = msg;
    },
  },
  computed:{
    openTime(){//这是传给时间插件的展示时间。return的这个时间最好保存在vuex中。不然显示的都是今天
      return this.dateTime //this.$store.state.dateTime
    }
  }

}
</script>

//可选择绑定属性
tipDivText  //就是文字提示信息，默认为空。 可以为'出发啊，等文字提示信息'
min         //最小时间。默认今天
max         //最大时间。默认2019-05-20
openTime    //传给时间插件展示的选中时间。默认今天。

![效果图](./img/show1.png)
![效果图](./img/show2.png)

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