From 346e18fe5f92d236ac3b414bd607cc9d81400f70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Wed, 30 May 2018 17:20:21 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96:attr=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E5=80=BC=E4=B8=BA=E7=9A=84Date=E5=AF=B9=E8=B1=A1=E6=97=B6?= =?UTF-8?q?=E7=9A=84=E5=AD=98=E5=82=A8;=E4=BC=98=E5=8C=96=E6=9E=84?= =?UTF-8?q?=E9=80=A0VM=E6=97=B6=E5=AF=B9Date=E5=AF=B9=E8=B1=A1=E7=9A=84?= =?UTF-8?q?=E5=A4=84=E7=90=86;=E6=9B=B4=E6=96=B0datepicker=E7=BB=84?= =?UTF-8?q?=E4=BB=B6,=E4=BD=BF=E7=94=A8=E6=9C=80=E6=96=B0=E7=9A=84host-pus?= =?UTF-8?q?h=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/anot-touch.js | 13 +++++++-- src/js/anot-touch.shim.js | 13 +++++++-- src/js/anot.js | 13 +++++++-- src/js/anot.shim.js | 13 +++++++-- src/js/datepicker/index.js | 54 +++++++++++++++++++++--------------- src/js/datepicker/style.scss | 25 ++++++----------- 6 files changed, 81 insertions(+), 50 deletions(-) diff --git a/src/js/anot-touch.js b/src/js/anot-touch.js index 6fe7377..c9c5d6d 100644 --- a/src/js/anot-touch.js +++ b/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,7 +4017,12 @@ const _Anot = (function() { if (typeof obj === 'object' && obj !== null) { if (!Anot.isPlainObject(obj)) { - obj = obj.$model + if (Date.isDate(obj)) { + obj = {} + obj[this.param] = val.toUTCString() + } else { + obj = obj.$model + } } } else { if (!this.param) { @@ -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) diff --git a/src/js/anot-touch.shim.js b/src/js/anot-touch.shim.js index 9f0f2c9..a26ab24 100644 --- a/src/js/anot-touch.shim.js +++ b/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,7 +4032,12 @@ if (typeof obj === 'object' && obj !== null) { if (!Anot.isPlainObject(obj)) { - obj = obj.$model + if (Date.isDate(obj)) { + obj = {} + obj[this.param] = val.toUTCString() + } else { + obj = obj.$model + } } } else { if (!this.param) { @@ -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) diff --git a/src/js/anot.js b/src/js/anot.js index 345c9c0..c274486 100644 --- a/src/js/anot.js +++ b/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,7 +4017,12 @@ const _Anot = (function() { if (typeof obj === 'object' && obj !== null) { if (!Anot.isPlainObject(obj)) { - obj = obj.$model + if (Date.isDate(obj)) { + obj = {} + obj[this.param] = val.toUTCString() + } else { + obj = obj.$model + } } } else { if (!this.param) { @@ -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) diff --git a/src/js/anot.shim.js b/src/js/anot.shim.js index 0c54808..a667ac8 100644 --- a/src/js/anot.shim.js +++ b/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,7 +4032,12 @@ if (typeof obj === 'object' && obj !== null) { if (!Anot.isPlainObject(obj)) { - obj = obj.$model + if (Date.isDate(obj)) { + obj = {} + obj[this.param] = val.toUTCString() + } else { + obj = obj.$model + } } } else { if (!this.param) { @@ -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) diff --git a/src/js/datepicker/index.js b/src/js/datepicker/index.js index 0328b28..d9741d5 100644 --- a/src/js/datepicker/index.js +++ b/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"> - +
- - - - - + + + +
@@ -186,25 +187,21 @@ export default Anot.component('datepicker', { 现在
- 取消 - 确定 + 取消 + 确定
` }, 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)) { - defVal += ' GMT+8000' - defVal = new Date(defVal) + if (defVal) { + 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) } } } diff --git a/src/js/datepicker/style.scss b/src/js/datepicker/style.scss index ddc45d3..9bd76c4 100644 --- a/src/js/datepicker/style.scss +++ b/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; - &::after {content:"\e67c"} - } - &.next-month {left:auto; right:35px; - &::after {content:"\e66e"} - } - &.next-year {left:auto; right:0; - &::after {content:"\e694"} - } + &.prev-month {left:35px;} + &.next-month {left:auto; right:35px;} + &.next-year {left:auto; right:0;} } } @@ -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); }