Fixed some bugs and update readme.

frehaiku · May 7, 2017 · 9a0b4d9 · 9a0b4d9
1 parent 3b22738
commit 9a0b4d9
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,71 @@
 # DatePicker
-> A date component with single selected, No Jquery
+
+Without jQuery-based date component with support for date ranges, muitiple calendars and more.
 
 ## 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
+- el: 
+ - type: **Element**
+ - required: `true`
+ - description: A calendar container 
+- defaultDate:
+ - type: **String**
+ - default: `'today'`
+ - eg: `'2017-04-15'`
+ - description: Default selected date
+- isRadio:
+ - type: **Boolean**
+ - default: `false`
+ - description: Is it date radio selected?
+- lang:
+ - type: **String**
+ - options: `'EN'` | `'CN'`
+ - default: `'EN'`
+ - description: The font language, for `CN` will use Chinese, for `EN` will use English
+- selectInterval: 
+ - type: **Array**
+ - default: `[1970, 2030]`
+ - eg:`[2000, 2020]`
+ - description: Select abled range
+- showFn:
+ - type: **Function**
+ - description: After show callback
+- hideFn:
+ - type: **Function**
+ - description: After hide callback 
+- afterSelectFn:
+ - type: **Function**
+ - description: Rewrite dateString to element
 
 ## Methods
 
-- show: Function
-- hide: Function
+- show: 
+ - type: **Function**
+- hide:
+ - type: **Function**
+
+## Usage
+
+1. manually import `calendar.css` and `calendar.js`
+2. create DatePicker contructor, for below:
+ ```html
+ <input type="text" id="datePicker">
+ <span id="calendar"></span>
+ ```
+
+
+```js
+ var dateComponent = new DatePicker({
+ el: document.querySelector('#calendar'),
+ afterSelectFn: function (curr) {
+ dateInput.value = curr;
+ }
+ });
+
+ var dateInput = document.querySelector('#datePicker');
+
+ dateInput.onfocus = function () {
+ dateComponent.show();
+ };
+```
 
diff --git a/calendar.css b/calendar.css
@@ -4,6 +4,9 @@
 }
 
 .calendar-wrapper {
+ position: absolute;
+ right: 0;
+ top: 0;
  max-width: 310px;
 }
 
@@ -64,6 +67,7 @@ ul.weekTip > li, ul.date > li {
  line-height: 40px;
  text-align: center;
  cursor: pointer;
+ margin-bottom: 5px;
 }
 
 ul.weekTip > li:not(:nth-of-type(7n)), ul.date > li:not(:nth-of-type(7n)) {
@@ -86,4 +90,7 @@ ul > li.weekend {
 
 ul > li.disabled {
  color: lightgray;
-}
+}
+
+#demo {
+ position: relative;}
diff --git a/calendar.js b/calendar.js
@@ -40,8 +40,6 @@ var DatePicker;
  day: 0
  }
  };
- // this.selectedYear = 0;
- // this.selectedMonth = 0;
  // 日期数组
  this.renderDate = [];
  this.init();
@@ -423,7 +421,12 @@ var DatePicker;
 
  self.afterSelectFn(self.get());
 
- // self.hide();
+ // 判断是否为范围选择
+ if (!self.isRadio && self.selectedDate.end.year) {
+ self.hide();
+ } else if (self.isRadio) {
+ self.hide();
+ }
  })
  });
 
@@ -457,9 +460,8 @@ var DatePicker;
  // 选中的日期是否在开始日期前面
  function isSelFront() {
  // 选择下一个月的日期时
- if (/disabled/.test(target.className)
- && day < 15) {
- return false;
+ if (/disabled/.test(target.className)) {
+ return !(day < 15);
  } else {
  return (
  +new Date(self.nonceYear, self.nonceMonth, day)

diff --git a/index.html b/index.html
@@ -6,26 +6,30 @@
  <link rel="stylesheet" href="calendar.css">
 </head>
 <body>
-<label for="datePicker" class="demoLabel">Please select the datetime when you on vacation.</label>
-<input type="text" id="datePicker">
-<span id="calendar"></span>
+
+<div id="demo">
+ <label for="datePicker" class="demoLabel">Please select the datetime when you on vacation.</label>
+ <input type="text" id="datePicker">
+
+ <span id="calendar"></span>
+</div>
+
 
 <script src="calendar.js"></script>
 <script>
  var dateComponent = new DatePicker({
  el: document.querySelector('#calendar'),
- isRadio: 0,
  afterSelectFn: function (curr) {
  dateInput.value = curr;
  }
- })
- , dateInput = document.querySelector('#datePicker');
+ });
+
+ var dateInput = document.querySelector('#datePicker');
 
- dateComponent.show();
 
- /*dateInput.onfocus = function () {
+ dateInput.onfocus = function () {
  dateComponent.show();
- };*/
+ };
 </script>
 </body>
 </html>