优化:attr设置值为的Date对象时的存储;优化构造VM时对Date对象的处理;更新datepicker组件,使用最新的host-push接口

src/js/anot-touch.js

@@ -1749,7 +1749,7 @@ const _Anot = (function() {
     simple.forEach(function(name) {
       var oldVal = old && old[name]
       var val = ($vmodel[name] = state[name])
-      if (val && typeof val === 'object') {
+      if (val && typeof val === 'object' && !Date.isDate(val)) {
         val.$up = $vmodel
         val.$pathname = name
       }
@@ -4017,8 +4017,13 @@ const _Anot = (function() {
 
       if (typeof obj === 'object' && obj !== null) {
         if (!Anot.isPlainObject(obj)) {
+          if (Date.isDate(obj)) {
+            obj = {}
+            obj[this.param] = val.toUTCString()
+          } else {
             obj = obj.$model
           }
+        }
       } else {
         if (!this.param) {
           return
@@ -4085,7 +4090,9 @@ const _Anot = (function() {
             elem[k] = obj[i]
           } else {
             if (typeof obj[i] === 'object') {
-              obj[i] = JSON.stringify(obj[i])
+              obj[i] = Date.isDate(obj[i])
+                ? obj[i].toUTCString()
+                : JSON.stringify(obj[i])
             } else if (typeof obj[i] === 'function') {
               k = ronattr + camelize(k.slice(1))
               elem[k] = obj[i].bind(vm)

src/js/anot-touch.shim.js

@@ -1764,7 +1764,7 @@
     simple.forEach(function(name) {
       var oldVal = old && old[name]
       var val = ($vmodel[name] = state[name])
-      if (val && typeof val === 'object') {
+      if (val && typeof val === 'object' && !Date.isDate(val)) {
         val.$up = $vmodel
         val.$pathname = name
       }
@@ -4032,8 +4032,13 @@
 
       if (typeof obj === 'object' && obj !== null) {
         if (!Anot.isPlainObject(obj)) {
+          if (Date.isDate(obj)) {
+            obj = {}
+            obj[this.param] = val.toUTCString()
+          } else {
             obj = obj.$model
           }
+        }
       } else {
         if (!this.param) {
           return
@@ -4100,7 +4105,9 @@
             elem[k] = obj[i]
           } else {
             if (typeof obj[i] === 'object') {
-              obj[i] = JSON.stringify(obj[i])
+              obj[i] = Date.isDate(obj[i])
+                ? obj[i].toUTCString()
+                : JSON.stringify(obj[i])
             } else if (typeof obj[i] === 'function') {
               k = ronattr + camelize(k.slice(1))
               elem[k] = obj[i].bind(vm)

src/js/anot.js

@@ -1749,7 +1749,7 @@ const _Anot = (function() {
     simple.forEach(function(name) {
       var oldVal = old && old[name]
       var val = ($vmodel[name] = state[name])
-      if (val && typeof val === 'object') {
+      if (val && typeof val === 'object' && !Date.isDate(val)) {
         val.$up = $vmodel
         val.$pathname = name
       }
@@ -4017,8 +4017,13 @@ const _Anot = (function() {
 
       if (typeof obj === 'object' && obj !== null) {
         if (!Anot.isPlainObject(obj)) {
+          if (Date.isDate(obj)) {
+            obj = {}
+            obj[this.param] = val.toUTCString()
+          } else {
             obj = obj.$model
           }
+        }
       } else {
         if (!this.param) {
           return
@@ -4085,7 +4090,9 @@ const _Anot = (function() {
             elem[k] = obj[i]
           } else {
             if (typeof obj[i] === 'object') {
-              obj[i] = JSON.stringify(obj[i])
+              obj[i] = Date.isDate(obj[i])
+                ? obj[i].toUTCString()
+                : JSON.stringify(obj[i])
             } else if (typeof obj[i] === 'function') {
               k = ronattr + camelize(k.slice(1))
               elem[k] = obj[i].bind(vm)

src/js/anot.shim.js

@@ -1764,7 +1764,7 @@
     simple.forEach(function(name) {
       var oldVal = old && old[name]
       var val = ($vmodel[name] = state[name])
-      if (val && typeof val === 'object') {
+      if (val && typeof val === 'object' && !Date.isDate(val)) {
         val.$up = $vmodel
         val.$pathname = name
       }
@@ -4032,8 +4032,13 @@
 
       if (typeof obj === 'object' && obj !== null) {
         if (!Anot.isPlainObject(obj)) {
+          if (Date.isDate(obj)) {
+            obj = {}
+            obj[this.param] = val.toUTCString()
+          } else {
             obj = obj.$model
           }
+        }
       } else {
         if (!this.param) {
           return
@@ -4100,7 +4105,9 @@
             elem[k] = obj[i]
           } else {
             if (typeof obj[i] === 'object') {
-              obj[i] = JSON.stringify(obj[i])
+              obj[i] = Date.isDate(obj[i])
+                ? obj[i].toUTCString()
+                : JSON.stringify(obj[i])
             } else if (typeof obj[i] === 'function') {
               k = ronattr + camelize(k.slice(1))
               elem[k] = obj[i].bind(vm)

src/js/datepicker/index.js

@@ -139,7 +139,7 @@ export default Anot.component('datepicker', {
           :css="{'border-radius': props.radius}"
           :attr-placeholder="props.placeholder || '请选择日期'"
           :attr-disabled="disabled">
-        <i class="do-ui-font icon"></i>
+        <i class="do-icon-calendar icon"></i>
       </label>
 
       <dl
@@ -147,11 +147,12 @@ export default Anot.component('datepicker', {
         :if="showCalendar">
 
         <dt class="contrl">
-          <a href="javascript:;" class="do-ui-font" :click="turn(1, -1)"></a>
+          <a class="do-icon-dbl-left" :click="turn(1, -1)"></a>
-          <a href="javascript:;" class="do-ui-font prev-month" :click="turn(0, -1)"></a>
+          <a class="do-icon-left prev-month" :click="turn(0, -1)"></a>
-          <a href="javascript:;" class="do-ui-font next-month" :click="turn(0, 1)"></a>
+          <a class="do-icon-right next-month" :click="turn(0, 1)"></a>
-          <a href="javascript:;" class="do-ui-font next-year" :click="turn(1, 1)"></a>
+          <a class="do-icon-dbl-right next-year" :click="turn(1, 1)"></a>
-          <span title="双击回到今天"
+          <span 
+            title="双击回到今天"
             :dblclick="back2today"
             :text="calendar.year + '-' + numberFormat(calendar.month)"></span>
         </dt>
@@ -186,25 +187,21 @@ export default Anot.component('datepicker', {
           <a href="javascript:;" class="now" :click="now">现在</a>
         </dd>
         <dt class="confirm">
-          <a href="javascript:;" :click="close" class="cancel">取消</a>
+          <a :click="close" class="cancel">取消</a>
-          <a href="javascript:;" :click="onConfirm" class="ok">确定</a>
+          <a :click="onConfirm" class="ok">确定</a>
         </dt>
         <dd class="tips" :if="tips" :text="tips"></dd>
       </dl>
     </div>`
   },
   construct: function(props, state) {
-    if (!props.hasOwnProperty('key')) {
-      return Anot.error('日历组件必须设置key属性')
-    }
-
     // 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
     if (!props.showTime && !props.format) {
       props.format = 'Y-m-d'
     }
 
     //获取初始值
-    let defVal = props.value
+    let defVal = props.hostPush || null
     if (!defVal) {
       if (props.minDate) {
         defVal = props.minDate
@@ -213,9 +210,10 @@ export default Anot.component('datepicker', {
       }
     }
     // 修正默认值, 如果不是Date对象, 则转为Date对象
-    if (defVal && !Date.isDate(defVal)) {
+    if (defVal) {
-      defVal += ' GMT+8000'
+      if (!Date.isDate(defVal)) {
         defVal = new Date(defVal)
+      }
     } else {
       defVal = new Date()
     }
@@ -245,7 +243,8 @@ export default Anot.component('datepicker', {
       state.max.month = props.maxDate.getMonth() + 1
       state.max.day = props.maxDate.getDate()
     }
-    if (props.value) {
+
+    if (props.hostPush) {
       state.last = {
         year: defVal.getFullYear(),
         month: defVal.getMonth() + 1,
@@ -268,17 +267,17 @@ export default Anot.component('datepicker', {
     //移除部分属性
     delete props.minDate
     delete props.maxDate
-    delete props.value
+    delete props.hostPush
     delete props.disabled
   },
   componentWillMount: function() {
     this.resetCalendarTable()
+    this.$push(this.value)
   },
   componentDidMount: function() {
     if (typeof this.props.created === 'function') {
       this.props.created(this)
     }
-
     document.addEventListener('click', () => {
       this.close()
     })
@@ -345,7 +344,12 @@ export default Anot.component('datepicker', {
   methods: {
     // 重置日历表格
     resetCalendarTable: function() {
-      let { max, min, calendar: { year, month }, last } = this
+      let {
+        max,
+        min,
+        calendar: { year, month },
+        last
+      } = this
       this.calendar.day = 0
       this.calendar.list.clear()
       this.calendar.list.pushArray(
@@ -375,7 +379,11 @@ export default Anot.component('datepicker', {
     },
     // 切换上/下 年/月
     turn: function(isYear, step) {
-      let { calendar: { year, month }, max, min } = this
+      let {
+        calendar: { year, month },
+        max,
+        min
+      } = this
 
       if (isYear === 1) {
         year += step
@@ -439,11 +447,13 @@ export default Anot.component('datepicker', {
     onConfirm: function() {
       this.updateTime()
       this.close()
+      this.$push(this.value)
       if (
         this.calendar.day > 0 &&
         typeof this.props.onDatePicked === 'function'
       ) {
-        this.props.onDatePicked(this.props.key, this.value, this.last.pick)
+        // 返回一个格式化后的值和一个Date对象
+        this.props.onDatePicked(this.value, this.last.pick)
       }
     }
   }

src/js/datepicker/style.scss

@@ -5,7 +5,8 @@
  * @date    2016-02-14 14:00:06
  * 
  */
-@import 'var.scss';
+@import "var.scss";
+
 .do-datepicker { position:relative;width:100%; height:100%;color:nth($cgr, 1);font-size:14px;
 
   &.mini {width:155px;height:30px;line-height:30px;}
@@ -26,7 +27,6 @@
       &[disabled] {background:#f7f8fb;cursor:not-allowed;}
     }
     .icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3);
-      &::after {content:"\e650"}
     }
   }
   .calendar-box { position:absolute; left:0; top:100%; z-index:65534; width:267px; height:auto; min-height:60px;padding:10px;line-height:35px; border:1px solid #ddd; background:#fff; font-size:14px; color:nth($cgr, 1); text-align:center; box-shadow:0 1px 5px rgba(0, 0, 0, 0.1);
@@ -35,24 +35,17 @@
 
     dt.contrl {position:relative; width:100%; height:35px; margin:5px 0 0;border-radius:3px;color:#fff;
 
-      a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;
+      a { position:absolute; left:0; top:0; width:35px; height:35px;color:#fff;cursor:pointer;
 
-        &::before {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
+        &::after {position:absolute;left:0;top:0;z-index:-1;display:block;width:35px;height:35px;border-radius:50%;background:nth($ct, 3); content:"";opacity:0;transform: scale(0);}
 
         &:active {font-weight:bold;
-          &::before {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
+          &::after {animation:ripple .3s cubic-bezier(0.23, 1, 0.32, 1);}
         }
-        &::after {content:"\e692";}
 
-        &.prev-month {left:35px;
+        &.prev-month {left:35px;}
-          &::after {content:"\e67c"}
+        &.next-month {left:auto; right:35px;}
-        }
+        &.next-year {left:auto; right:0;}
-        &.next-month {left:auto; right:35px;
-          &::after {content:"\e66e"}
-        }
-        &.next-year {left:auto; right:0;
-          &::after {content:"\e694"}
-        }
       }
 
     }
@@ -92,7 +85,7 @@
 
     dt.confirm { position:relative; width:100%; height:41px; padding:10px 0 0;line-height:30px; border-top:1px solid #eee; text-align:right;
 
-      .ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;}
+      .ok,.cancel {display:inline-block;width:60px; height:30px;margin:0 0 0 10px;border-radius:3px;text-align:center;cursor:pointer;}
 
       .ok { background:nth($ct, 1); color:#fff;
         &:hover { background:nth($ct, 2); }