dai-siki / vue-datepicker-simple

A datepicker component for vue. （适用**用户的vue日期选择组件）

vue-datepicker-simple

一款非常简单的vue日期选择组件

Update Log （更新日志

@1.5.0

• 添加了"时至今日"功能（只能选今天之前）
• 添加了"今天不行"功能（不能选今天）

@1.4.0

• 兼容[email protected]+（需要引入对应的组件，绑定value语法有不同，参考示例2）

@1.3.0

• 添加了"placeholder"属性

@1.2.0

• 添加了"向前看"功能（只能选今天及以后）

@1.1.0

• 添加了年份选择功能
• 可以自定义日期格式

Demo （示例

[email protected]+ Click me 点我.

[email protected]+ Click me 点我.

Screenshot （截图

Browser Compatibility （浏览器兼容

IE9+

Env （配置环境

vue + webpack + es6

Install （安装

npm

$ npm install vue-datepicker-simple

Usage （使用

Props （相关参数

名称	类型	默认	说明
value	String	today	要绑定的日期变量,值为空则日期面板初始化今天
field	String	""	会给input标签添加name及id
format	String	'yyyy-mm-dd'	日期格式
forward	Boolean	false	向前看（只能选择今天及以后）
backward	Boolean	false	时至今日（只能选择今天之前）
noToday	Boolean	false	今天不行（不能选今天）
placeholder	String	""	你懂的

Example （示例 [email protected]+

<div id="app">
	<label for="myDate">选择您的新婚之日</label>
	<date-picker field="myDate"
				 placeholder="选择日期"
				 :value.sync="date"
				 format="yyyy/mm/dd"
				 :backward="false"
				 :no-today="true"
				 :forward="true"></date-picker>
</div>

<script>
import 'babel-polyfill'; //因为使用了es6的一些方法，需要babel垫片，如果你项目中已有相关兼容性方案，可忽略
import Vue from 'vue';
import myDatepicker from 'vue-datepicker-simple';

new Vue({
    el: '#app',
    data:{
        date: ''
    },
    components:{
        'date-picker': myDatepicker
    }
});

</script>

Example （示例 [email protected]+

<div id="app">
	<label for="myDate">选择您的新婚之日</label>
	<date-picker field="myDate"
				 placeholder="选择日期"
				 v-model="date"
				 format="yyyy/mm/dd"
				 :backward="false"
				 :no-today="true"
				 :forward="true"></date-picker>
</div>

<script>
import 'babel-polyfill'; //因为使用了es6的一些方法，需要babel垫片，如果你项目中已有相关兼容性方案，可忽略
import Vue from 'vue';
import myDatepicker from 'vue-datepicker-simple/datepicker-2.vue'; //引入对应的组件

new Vue({
    el: '#app',
    data:{
        date: ''
    },
    components:{
        'date-picker': myDatepicker
    }
});
</script>

vue-datepicker-simple's Issues

浏览器报错，功能不影响，就是控制台一直有错

“时至今日” && “今天不行” != “时至昨日”

noToday = true, backward = true，仍然默认在今天，十分尴尬。

左右日期切换失效

点击向左的时间选择按钮，将日期调到2018年之前，再点击向右的时间选择按钮失效

跨年度点击"<"的问题

prevMonth() {
    let {year ,month} = this;
   if (this.dateIsValid({year, month: month-1})) {
     // if (month > 1) {  这里错误，否则会直接从2月直接跳回前一年的12月
      if (month > 0) {
      this.month--;
 } else {
      this.year--;
    this.month = 11;
      }
   }
   },

css 样式问题

.vue-datepicker .vue-datepicker-panels 中with 因为和其他样式错误 或导致宽度不够
我将其设置成了 width:auto;

好像意思说不能直接修改属性

报一下错误，我用的是vue2.0.3：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

非常好的插件，希望可以兼容vue2.0 :)

请问有计划加上时间的选择吗？

没有清空时间的功能

如果用退格键把数值去掉，实际上没有实现双向绑定，在应用的页面上v-model绑定的变量的值还在

.vue-datepicker input的width问题

源代码里面.vue-datepicker input的宽度是写死的35px*7，在1080P的情况下还行，但是只要搭配任意UI框架融入进栅格里面就会有问题，是否考虑宽度的适配？

ios11 微信内置浏览器 uc浏览器内,点击label 无反应,安卓正常

请问,该怎么修改,谢谢

Date Range

Does this mod have a date range option?