anima-datetimepicker - npm Package Compare versions

Comparing version 0.0.4 to 1.0.0

HISTORY.md

@@ -5,5 +5,15 @@ # History
 
+## 1.0.0
+
+`new` 添加trigger、output配置。
+
+`new` 添加getValue()方法。
+
+`improved` complete关键字改成confirm，私有方法增加下划线前缀。
+
+`improved` 滑动组件时避免页面也一起滑动。
+
 ## 0.0.4
 
-`new` 添加template、currentYear、currentMonth、onSelect初始化参数。
+`new` 添加template、currentYear、currentMonth、onSelect配置。
 
@@ -10,0 +20,0 @@ `new` 添加设置行模板的功能。

package.json

 {
   "name": "anima-datetimepicker",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "description": "日期时间选择器",
@@ -5,0 +5,0 @@ "keywords": [],

README.md

@@ -15,3 +15,3 @@ # anima-datetimepicker [![spm version](http://spmjs.io/badge/anima-datetimepicker)](http://spmjs.io/package/anima-datetimepicker)
 
-![Screenshot](https://t.alipayobjects.com/images/rmsweb/T1gU0fXbJnXXXXXXXX.jpg)
+![Screenshot](https://t.alipayobjects.com/images/rmsweb/T1bqRgXe4nXXXXXXXX.png)
 
@@ -23,9 +23,15 @@ ## 使用方法
 
+// 使用 trigger
+new DatetimePicker({
+  trigger : '#id',
+  format : 'YYYY-MM-DD'
+});
+
+// 定制输入和输出
 var picker = new DatetimePicker({
   format : 'YYYY-MM-DD HH:II',
-  onComplete : function(value) {
+  onConfirm : function(value) {
     console.log(value);
   }
 });
-
 picker.show('2015-01-01 01:01');
@@ -36,2 +42,8 @@ ```
 
+### trigger `String|Element`
+唤出控件的元素，可以是CSS3选择器或DOM元素。
+
+### output `String|Element`
+初始值用 output 的值，完成后自动填充到 output 。
+
 ### template `String`
@@ -41,3 +53,3 @@ 设置模板，覆盖的时候不要缺少 `data-role` ，默认模板请查看源码。
 ### format `String`
-选择日期时间格式，支持以下格式的组合。
+日期时间格式，用于输入和输出，支持以下格式的组合。
 
@@ -69,4 +81,19 @@ * YYYY: 四位数年份，例如2015
 
+### yearRow `String`
+年份行模板，默认值为 `{value}年` 。
+
+### monthRow `String`
+月份行模板，默认值为 `{value}月` 。
+
+### dayRow `String`
+天数行模板，默认值为 `{value}日` 。
+
+### hourRow `String`
+小时行模板，默认值为 `{value}点` 。
+
+### minuteRow `String`
+分钟行模板，默认值为 `{value}分` 。
+
 ### yearList `Array`
-年份列表，设置年份列表时minYear和maxYear无效。
+年份列表，设置年份列表时minYear、maxYear、yearRow无效。
 
@@ -82,32 +109,18 @@ ```js
 new DatetimePicker({
-  yearList : [2015, 2016]);
+  yearList : [2015, 2016]
+});
 ```
 
 ### monthList `Array`
-月份列表
+月份列表，设置月份列表时monthRow无效。
 
 ### dayList `Array`
-天数列表
+天数列表，设置天数列表时dayRow无效。
 
 ### hourList `Array`
-小时列表
+小时列表，设置小时列表时hourRow无效。
 
 ### minuteList `Array`
-分钟列表
+分钟列表，设置分钟列表时minuteRow无效。
 
-### yearRow `String`
-年份行模板，默认值为 `{value}年` 。
-
-### monthRow `String`
-月份行模板，默认值为 `{value}月` 。
-
-### dayRow `String`
-天数行模板，默认值为 `{value}日` 。
-
-### hourRow `String`
-小时行模板，默认值为 `{value}点` 。
-
-### minuteRow `String`
-分钟行模板，默认值为 `{value}分` 。
-
 ### onSelect(type , value) `Function`
@@ -124,3 +137,3 @@ 选中后执行的回调函数，type表示选中的列，总共有五种类型（year、month、day、hour、minute），value为选中的值。
 
-### onComplete(value) `Function`
+### onConfirm(value) `Function`
 完成后执行的回调函数， *value* 会按 *format* 格式化。
@@ -145,7 +158,13 @@
 
-### complete()
-隐藏控件，并触发 *onComplete* 事件，返回 *value*。
+### find(selector)
+查找组件内的DOM元素。
 
+### getValue()
+返回当前选中的日期时间字符串。
+
+### confirm()
+隐藏控件，触发 *onConfirm* 事件。
+
 ### select(type , value)
 选中一个列，type表示选中的列，总共有五种类型（year、month、day、hour、minute），value为选中的值。
 

src/datetimepicker.js

@@ -9,5 +9,5 @@ require('./datetimepicker.css');
   <div class="dp-header"> \
-    <div class="dp-item dp-left" data-role="close">取消</div> \
+    <div class="dp-item dp-left" data-role="cancel">取消</div> \
     <div class="dp-item dp-center"></div> \
-    <div class="dp-item dp-right" data-role="complete">完成</div> \
+    <div class="dp-item dp-right" data-role="confirm">完成</div> \
   </div> \
@@ -43,2 +43,4 @@ <div class="dp-content"> \
   template : TEMPLATE,
+  trigger : null,
+  output : null,
   currentYear : NOW.getFullYear(),
@@ -61,3 +63,3 @@ currentMonth : NOW.getMonth() + 1,
   onSelect : function() {},
-  onComplete : function() {},
+  onConfirm : function() {},
   onShow : function() {},
@@ -124,2 +126,6 @@ onHide : function() {}
 
+function getElement(expr) {
+  return (typeof expr == 'string') ? document.querySelector(expr) : expr;
+}
+
 // HTML to Element
@@ -152,21 +158,42 @@ function toElement(html) {
 
-function tapEvent(el, fn) {
-  var _VALVE = 10, _X, _Y;
+var tapEvent = {
+  prefix : 'datetimepicker',
+  bind : function(el, fn) {
+    var _VALVE = 10, _X, _Y;
 
-  el.addEventListener('touchstart', function(e) {
-    var changedTouch = e.changedTouches[0];
-    _X = changedTouch.pageX;
-    _Y = changedTouch.pageY;
-  }, false);
+    el[this.prefix + '_fn'] = fn;
 
-  el.addEventListener('touchend', function(e) {
-    var changedTouch = e.changedTouches[0];
-    var _deltaX = changedTouch.pageX - _X;
-    var _deltaY = changedTouch.pageY - _Y;
-    if (Math.abs(_deltaX) < _VALVE && Math.abs(_deltaY) < _VALVE) {
-      fn(e);
-    }
-  }, false);
-}
+    var touchstartListener = el[this.prefix + '_touchstart'] = function(e) {
+      var changedTouch = e.changedTouches[0];
+      _X = changedTouch.pageX;
+      _Y = changedTouch.pageY;
+    };
 
+    var touchendListener = el[this.prefix + '_touchend'] = function(e) {
+      var changedTouch = e.changedTouches[0];
+      var _deltaX = changedTouch.pageX - _X;
+      var _deltaY = changedTouch.pageY - _Y;
+      if (Math.abs(_deltaX) < _VALVE && Math.abs(_deltaY) < _VALVE) {
+        fn(e);
+      }
+    };
+
+    el.addEventListener('touchstart', touchstartListener, false);
+    el.addEventListener('touchend', touchendListener, false);
+  },
+  unbind : function(el) {
+    el.removeEventListener('touchstart', el[this.prefix + '_touchstart'], false);
+    el.removeEventListener('touchend', el[this.prefix + '_touchend'], false);
+    el[this.prefix + '_fn'] = null;
+    el[this.prefix + '_touchstart'] = null;
+    el[this.prefix + '_touchend'] = null;
+  },
+  fire : function(el) {
+    var fn = el[this.prefix + '_fn'];
+    fn && fn({
+      preventDefault : function() {}
+    });
+  }
+};
+
 function showMask() {
@@ -186,3 +213,3 @@ if (MASK) {
 
-  tapEvent(MASK, function() {
+  tapEvent.bind(MASK, function() {
     CURRENT_PICKER && CURRENT_PICKER.hide();
@@ -213,2 +240,14 @@ });
   });
+
+  var trigger = self.config.trigger;
+  if (trigger) {
+    var output = self.config.output || trigger;
+    trigger = self.trigger = getElement(trigger);
+    output = self.output = getElement(output);
+
+    tapEvent.bind(trigger, function(e) {
+      e.preventDefault();
+      self.show(typeof output.value == 'undefined' ? output.innerHTML : output.value);
+    });
+  }
 }
@@ -241,2 +280,6 @@
 
+      container.addEventListener('touchstart', function(e) {
+        e.preventDefault();
+      }, false);
+
       each(TYPE_MAP, function(type) {
@@ -250,5 +293,5 @@ var div = self.find('[data-role=' + type + ']');
         if (type == 'day') {
-          data = self.makeData(type, newValueMap.year, newValueMap.month);
+          data = self._makeData(type, newValueMap.year, newValueMap.month);
         } else {
-          data = self.makeData(type);
+          data = self._makeData(type);
         }
@@ -264,3 +307,3 @@ self[type + 'Scroller'] = renderScroller(div, data, newValueMap[type], function(currentValue) {
               var currentDay = self.dayScroller.getValue();
-              self.setDayScroller(currentValue, currentMonth, currentDay);
+              self._setDayScroller(currentValue, currentMonth, currentDay);
             }
@@ -270,3 +313,3 @@ } else if (type == 'month') {
             var currentDay = self.dayScroller.getValue();
-            self.setDayScroller(currentYear, currentValue, currentDay);
+            self._setDayScroller(currentYear, currentValue, currentDay);
           }
@@ -276,3 +319,3 @@ });
 
-      tapEvent(self.find('[data-role=close]'), function(e) {
+      tapEvent.bind(self.find('[data-role=cancel]'), function(e) {
         e.preventDefault();
@@ -282,6 +325,5 @@ self.hide();
 
-      tapEvent(self.find('[data-role=complete]'), function(e) {
+      tapEvent.bind(self.find('[data-role=confirm]'), function(e) {
         e.preventDefault();
-        self.complete();
-        self.hide();
+        self.confirm();
       });
@@ -295,3 +337,3 @@ }
 
-  makeData : function(type, year, month) {
+  _makeData : function(type, year, month) {
     var config = this.config;
@@ -335,3 +377,3 @@ var valueMap = this.valueMap;
 
-  setDayScroller : function(year, month, day) {
+  _setDayScroller : function(year, month, day) {
     var self = this;
@@ -344,3 +386,3 @@ var maxDay = getMaxDay(year, month);
     var div = self.find('[data-role=day]');
-    self.dayScroller = renderScroller(div, self.makeData('day', year, month), day);
+    self.dayScroller = renderScroller(div, self._makeData('day', year, month), day);
   },
@@ -367,2 +409,3 @@
     var self = this;
+    self.trigger && tapEvent.unbind(self.trigger);
     removeElement(MASK);
@@ -374,3 +417,3 @@ removeElement(self.container);
 
-  complete : function() {
+  getValue : function() {
     var self = this;
@@ -397,9 +440,26 @@ var config = self.config;
 
-    config.onComplete.call(self, value);
+    return value;
+  },
 
-    return value;
+  confirm : function() {
+    var self = this;
+    var output = self.output;
+
+    var value = self.getValue();
+
+    if (output) {
+      if (typeof output.value == 'undefined') {
+        output.innerHTML = value;
+      } else {
+        output.value = value;
+      }
+    }
+
+    self.config.onConfirm.call(self, value);
+
+    self.hide();
   }
 };
 
-DatetimePicker.tap = tapEvent;
+DatetimePicker.tapEvent = tapEvent;
 DatetimePicker.parseDate = parseDate;
@@ -406,0 +466,0 @@ DatetimePicker.trimZero = trimZero;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19344

increased by14.66%

Lines of code

479

increased by11.66%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

163

increased by13.19%

No dependency changes