diff --git a/README.md b/README.md
index 5f8472e..90a8cbd 100644
--- a/README.md
+++ b/README.md
@@ -1,62 +1,194 @@
-# kuCity 城市选择jquery插件
-
-
+# citySelect 城市选择(依赖jquery并与angular、vue分别结合)
+# jquery 的 datepicker 日期选择控件与Vue相结合
插件特性
----------
1.单例
2.支持搜索(借用了阿里的API)
3.搜索框函数节流
-
-插件使用
-----
-一，引进插件（依赖jquery）
-
-` `
-
-``
-``
-
-二，修改使用
-
-`$('.search').kuCity();`
-------------------------
-
-
-
-
-
## city-select结合angular的使用说明
----
一，依赖的插件（jquery,angular）
- * css:
- ``
- ``
- * js:
- ``
- ``
- ``
- ``
+ >* css:
+```
+
+
+```
+ >* js:
+```
+
+
+
+
+ ```
二，使用(ng-model的应用)
- 修改后说明：
- 1.在封装的js中添加自定义函数citySelect（在angular中触发函数进行操作）
- 2.添加setName属性（是否赋值value避免两次赋值冲突）
- ```
- angular.element(elem).citySelect({
- setName:false
- }).on("citySelect",function(event,name,code){
- ngModel.$setViewValue(name);
- ngModel.$render();
- })
- ```
-
-
+ 修改后说明：
+ 1.在封装的js中添加自定义函数citySelect（在angular中触发函数进行操作）
+ 2.添加setName属性（是否赋值value,避免两次赋值冲突）
+```
+angular.module("myApp").directive("kuCity",function() {
+ return {
+ restrict: "A",
+ require: "?ngModel",
+ link: function (scope, elem, attr, ngModel) {
+ angular.element(elem).citySelect({
+ setName:false
+ }).on("citySelect",function(event,name,code){
+ ngModel.$setViewValue(name);
+ ngModel.$render();
+ })
+ }
+ }
+})
+```
+## city-select结合vuejs的使用说明
+----
+一，依赖的插件（jquery,vuejs）
+ >* css:
+```
+
+
+```
+>* js:
+```
+
+
+
+
+ ```
+二，使用(v-model的应用)
+ 修改后说明：
+ 1.在封装的js中添加自定义函数citySelect（在vue中触发函数进行操作）
+ 2.添加setName属性（是否赋值value,避免两次赋值冲突）
+ 3.将选中的值传入组建中，使v-model为传入的值
+调用例如：
+```
+
+```
+组件代码：
+```
+var citySelt = Vue.extend({
+ template: '',
+ props:{
+ source:{
+ type:String
+ },
+ "title":{
+ type:String
+ },
+ "selectHandler": {
+ type: Function
+ },
+ },
+ ready(){
+ let self = this;
+ $(this.$el).citySelect({
+ setName:false
+ }).on("citySelect",function(event,name,code){
+ self.selectHandler(name,code);
+ });
+ }
+ })
+```
插件截图
----------
-
+
+
+## datepicker结合vue的使用说明
+ ----
+
+一，依赖的插件（jquery,angular）
+ >* css:
+```
+
+
+```
+ >* js:
+```
+
+
+
+
+ ```
+ 二使用说明：
+ 调用例如：
+ ```
+
+ ```
+ 组件代码：
+ ```
+ var datepicker = Vue.extend({
+ template:' ',
+ props: {
+ "className":String,
+ "title":{
+ type:String,
+ required:true
+ },
+ "value":{
+ required:true
+ },
+ "selectHandler":{
+ type: Function
+ },
+ "options":{
+ type: Object
+ },
+ "showYear":{
+ type: Boolean,
+ default : false
+ },
+ "disabled" : {
+ type : Boolean,
+ default : function(){
+ return false;
+ }
+ },
+ "selected" : {
+ type : Date,
+ default : function(){
+ return '';
+ }
+ }
+ },
+ methods:{
+ setStartDate:function(date) {//设置最小时间
+ $(this.$el).datepicker("option","minDate",date);
+ },
+ setEndDate:function(date) {//设置最大时间
+ $(this.$el).datepicker("option","maxDate",date);
+ },
+ setDefaultValue: function (date) {//设置默认值
+ $(this.$el).datepicker("setDate",date);
+ let current = $(this.$el).val();
+ this.value = current;
+ }
+ },
+ ready(){
+ let self = this;
+ $(this.$el).datepicker({
+ changeYear: self.showYear,
+ onSelect: function (selectedDate) {
+ self.selectHandler && self.selectHandler(selectedDate);
+ self.value = selectedDate;
+ }
+ });
+ if (self.showYear) {
+ let year = new Date().getFullYear();
+ $(this.$el).datepicker("option","yearRange",`1950:${year}`);
+ }
+ if (this.options){
+ _.forEach(this.options,function(value,key){
+ $(self.$el).datepicker("option",key,value);
+ });
+ }
+ }
+ });
+ ```
+
diff --git a/city-select.html b/city-select.html
index 2d28144..756cb72 100644
--- a/city-select.html
+++ b/city-select.html
@@ -9,7 +9,7 @@
-
+