v0.1 finish.

frehaiku · frehaiku · commit f74a4b3ae714 · 2017-04-17T16:40:53.000+08:00
diff --git a/README.md b/README.md
@@ -1,2 +1,17 @@
 # DatePicker
-A date component with single selected, No Jquery
+> A date component with single selected, No Jquery
+
+## Params
+
+- el: Calendar container | Element
+- defaultDate: default selected date | String | '2017-04-15'
+- selectInterval: select abled range | Array | [2000, 2020]
+- showFn: after show callback | Function
+- hideFn: after hide callback | Function
+- afterSelectFn: rewrite dateString to element | Function
+
+## Methods
+
+- show: Function
+- hide: Function
+
diff --git a/calendar.js b/calendar.js
@@ -13,6 +13,13 @@ var DatePicker;
         this.target = config.el;
         this.defaultDate = config.default || 'today';
         this.selectInterval = config.interval || [1970, 2030];
+
+        this.showFn = config.showFn || function () {
+            };
+        this.hideFn = config.hideFn || function () {
+            };
+        this.afterSelectFn = config.afterSelectFn || function () {
+            };
         // 当前日历数据
         this.nonceYear = 0;
         this.nonceMonth = 0;
@@ -72,10 +79,24 @@ var DatePicker;
     Calendar.prototype = {
         constructor: Calendar,
 
+        show: function () {
+            this.target.style.display = 'inline-block';
+            this.showFn();
+        },
+
+        hide: function () {
+            this.target.style.display = 'none';
+            this.hideFn();
+        },
+
+        get: function () {
+            return this.selectedYear + '-' + (this.selectedMonth + 1) + '-' + this.nonceDay;
+        },
         /**
          * 初始化
          */
         init: function () {
+            this.hide();
             // compute select year
             var yearOpts = this._productOptions(this.selectInterval, '年');
             var dateOpts = this._productOptions([1, 12], '月');
@@ -346,6 +367,10 @@ var DatePicker;
                             self.selectedYear = self.nonceYear;
 
                             self._setDateList();
+
+                            self.afterSelectFn(self.get());
+
+                            self.hide();
                         })
                 });
 
@@ -370,6 +395,7 @@ var DatePicker;
                     self._setDateList();
 
                 });
+
         }
     }
 
diff --git a/index.html b/index.html
@@ -6,13 +6,25 @@
     <link rel="stylesheet" href="calendar.css">
 </head>
 <body>
-    <div id="calendar"></div>
+<label>
+    Please select the datetime when you on vacation.
+    <input type="text" id="datePicker">
+</label>
+<span id="calendar"></span>
 
-    <script src="calendar.js"></script>
-    <script>
-        new DatePicker({
-            el: document.querySelector('#calendar')
-        })
-    </script>
+<script src="calendar.js"></script>
+<script>
+    var dateComponent = new DatePicker({
+        el: document.querySelector('#calendar'),
+        afterSelectFn: function (curr) {
+            dateInput.value = curr;
+        }
+    })
+        , dateInput = document.querySelector('#datePicker');
+
+    dateInput.onfocus = function () {
+        dateComponent.show();
+    };
+</script>
 </body>
 </html>
