'1.5.0'

Author: dai-siki

README.md

@@ -1,14 +1,14 @@
 # vue-datepicker-simple
 
-一款非常简单的基于vue的日期选择器
+一款非常简单的vue日期选择组件
 
 
-## 可以不看的前言
+## Update Log （更新日志
 
-分享这款小插件的初衷也是感觉像github和npm这样的平台，面向国人友好的库还是非常少，当初真的是找不到一款合适的日期选择插件，诚然代码是全世界通用，但是一些具体的直接面向用户的组件还是会有语言地域差异。如果你也喜欢这款插件，可以在 [github](https://github.com/dai-siki/vue-datepicker-simple) 点击star，让更多国人可以看到。
-
-
-## 更新日志
+### @1.5.0
+- 添加了"时至今日"功能（只能选今天之前）
+- 添加了"今天不行"功能（不能选今天）
+- 添加了"获取焦点的事件回调"
 
 ### @1.4.0
 - 兼容[email protected]+（需要引入对应的组件，绑定value语法有不同，参考示例2）
@@ -24,57 +24,54 @@
 - 可以自定义日期格式
 
 
-## demo
-
-简单的示例1（[email protected]+） [点我](http://dai-siki.github.io/vue-datepicker-simple/example/demo.html).
-
-简单的示例2（[email protected]+） [点我](http://dai-siki.github.io/vue-datepicker-simple/example2/demo.html).
+## Demo （示例
+Click me（[email protected]+） [点我](http://dai-siki.github.io/vue-datepicker-simple/example/demo.html).
+Click me（[email protected]+） [点我](http://dai-siki.github.io/vue-datepicker-simple/example2/demo.html).
 
 
-## 截图
-
+## Screenshot （截图
 ![screenshot](screenshot/01.png)
 ![screenshot](screenshot/02.png)
 
+## Browser Compatibility （浏览器兼容
+IE9+
 
-## 依赖
-
-基于 [email protected]+ 和 [email protected]+ 版本。模块使用es6编写（需babel转译）。
+## Env （配置环境
+vue + webpack + es6
 
 
-## 安装
+## Install （安装
 
 #### npm
 
 ```shell
 $ npm install vue-datepicker-simple
 ```
 
-## 使用
-
-使用方法非常简单，参考示例。源码也很清晰，如果你想支持其他语言或调整样式，大可以自行修改相关文件。如果使用过程中遇到什么问题可以反馈给我，我会尽快修复。
-
-#### 相关参数
+## Usage （使用
 
+#### Props （相关参数
 | 名称              | 类型               | 默认             | 说明                                         |
 | ----------------- | ----------------- | ---------------- | --------------------------------------------- |
 | value             | String         | today            | 要绑定的日期变量,值为空则日期面板初始化今天    |
 | field             | String            | ""               | 会给input标签添加name及id                   |
 | format            | String            | 'yyyy-mm-dd'     | 日期格式                                    |
-| forward           | Boolean           | false            | 是否向前看（只能选择今天及以后）              |
+| forward           | Boolean           | false            | 向前看（只能选择今天及以后）              |
+| backward           | Boolean           | false            | 时至今日（只能选择今天之前）              |
+| noToday           | Boolean           | false            | 今天不行（不能选今天）              |
 | placeholder       | String            | ""               | 你懂的                                     |
 
 
-#### 示例([email protected]+)
-
+#### Example （示例 [email protected]+
 ```html
-
 <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>
 
@@ -94,19 +91,18 @@ new Vue({
 });
 
 </script>
-
 ```
 
-#### 示例([email protected]+)
-
+#### Example （示例 [email protected]+
 ```html
-
 <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>
 
@@ -124,7 +120,5 @@ new Vue({
         'date-picker': myDatepicker
     }
 });
-
 </script>
-
 ```

build/prod.js

@@ -1,6 +1,6 @@
 <template>
 <div class="vue-datepicker" @mouseout="endChoice" @mouseover="startMouseOver">
-	<input type="text" autocomplete="off" disableautocomplete :name="field" :id="field" :value="value" :placeholder="placeholder" @focus="startChoice" @keypress="startChoice" @blur="endChoice" ref="input">
+	<input type="text" autocomplete="off" disableautocomplete :name="field" :id="field" :value="value" :placeholder="placeholder" @focus="startChoice" @keypress="startChoice" @blur="endChoice"  ref="input">
 	<div class="vue-datepicker-panels" v-show="dayPanelIsShow || monthPanelIsShow">
 		<!--日期选择-->
 		<div class="vue-datepicker-panel" v-show="dayPanelIsShow">
@@ -260,8 +260,7 @@ export default {
 				return false;
 			}
 			this.month = m;
-			this.dayPanelIsShow = true;
-			this.monthPanelIsShow = false;
+			this.startChoice();
 		},
 		// 样式
 		classMonth(m) {
@@ -304,6 +303,7 @@ export default {
 				e.returnValue = false;
 			}
 			this.dayPanelIsShow = true;
+			this.monthPanelIsShow = false;
 		},
 		prevMonth() {
 			let {
@@ -369,12 +369,12 @@ export default {
 		},
 		// 立即关闭日期面板
 		immEndChoice() {
-			this.isMouseOver = true;
+			this.isMouseOver = false;
 			this.dayPanelIsShow = false;
 		}
 	}
 }
 
 </script>
 
-<style lang="sass" scoped>@import "./scss/datepicker.scss"</style>
+<style scoped> @import './datepicker.css'; </style>