From 0b91299374d706c7dd195d4f46c5453e698917d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Sat, 27 Jan 2018 00:34:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=B4=E5=90=88=E6=A8=A1=E6=9D=BF=E6=96=87?= =?UTF-8?q?=E4=BB=B6;=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E5=B9=B4?= =?UTF-8?q?=E6=9C=88=E4=BD=86=E6=9C=AA=E9=80=89=E6=8B=A9=E6=97=A5=E6=9C=9F?= =?UTF-8?q?=E6=97=B6=E4=BB=8D=E5=8F=96=E5=80=BC=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/datepicker/index.js | 96 +++++++++++++++++++++++++++++++++--- src/js/datepicker/main.htm | 62 ----------------------- src/js/datepicker/style.scss | 6 ++- 3 files changed, 95 insertions(+), 69 deletions(-) delete mode 100644 src/js/datepicker/main.htm diff --git a/src/js/datepicker/index.js b/src/js/datepicker/index.js index 01ee533..4ba4d45 100644 --- a/src/js/datepicker/index.js +++ b/src/js/datepicker/index.js @@ -6,8 +6,7 @@ */ 'use strict' -import tpl from './main.htm' -import './style.css' +import './style.scss' /**************** 公共函数 *****************/ //计算日历数组 @@ -124,7 +123,75 @@ Anot.ui.datepicker = '1.0.0' export default Anot.component('datepicker', { render: function() { - return tpl + return `
+ + + +
+ +
+ + + + + +
+
+
+ 日 + 一 + 二 + 三 + 四 + 五 + 六 +
+
+ +
+
+
+ + + + 现在 +
+
+ 取消 + 确定 +
+
+
+
` }, construct: function(props, state) { if (!props.hasOwnProperty('key')) { @@ -238,6 +305,9 @@ export default Anot.component('datepicker', { props: { showTime: false, //对话框上显示时间 radius: 3, + height: null, + width: null, + size: 'mini', //默认规格,mini, medium, large format: '', // 日期显示格式 onCreated: Anot.PropsTypes.isFunction(), onDatePicked: Anot.PropsTypes.isFunction() @@ -276,7 +346,7 @@ export default Anot.component('datepicker', { // 重置日历表格 resetCalendarTable: function() { let { max, min, calendar: { year, month }, last } = this - + this.calendar.day = 0 this.calendar.list.clear() this.calendar.list.pushArray( getCalendarTable({ max, min, year, month }, last) @@ -297,6 +367,12 @@ export default Anot.component('datepicker', { onFocus: function() { this.showCalendar = !0 }, + back2today: function() { + let today = new Date() + this.calendar.year = today.getFullYear() + this.calendar.month = today.getMonth() + 1 + this.resetCalendarTable() + }, // 切换上/下 年/月 turn: function(isYear, step) { let { calendar: { year, month }, max, min } = this @@ -333,6 +409,11 @@ export default Anot.component('datepicker', { updateTime: function() { let { year, month, day, hour, minute, second } = this.calendar + // day 小于1, 说明切换年/月之后, 没有选择具体日期 + if (day < 1) { + return + } + this.last = { year, month, day } if (!this.props.showTime) { @@ -358,8 +439,11 @@ export default Anot.component('datepicker', { onConfirm: function() { this.updateTime() this.close() - if (typeof this.props.onDatePicked === 'function') { - this.props.onDatePicked(this.value, this.last.pick) + if ( + this.calendar.day > 0 && + typeof this.props.onDatePicked === 'function' + ) { + this.props.onDatePicked(this.props.key, this.value, this.last.pick) } } } diff --git a/src/js/datepicker/main.htm b/src/js/datepicker/main.htm deleted file mode 100644 index 5f9a2bf..0000000 --- a/src/js/datepicker/main.htm +++ /dev/null @@ -1,62 +0,0 @@ -
- - - -
- -
- - - - - -
-
-
- 日 - 一 - 二 - 三 - 四 - 五 - 六 -
-
- -
-
-
- - - - 现在 -
-
- 取消 - 确定 -
-
-
-
\ No newline at end of file diff --git a/src/js/datepicker/style.scss b/src/js/datepicker/style.scss index ce38870..0323f48 100644 --- a/src/js/datepicker/style.scss +++ b/src/js/datepicker/style.scss @@ -8,6 +8,10 @@ @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;} + &.medium {width:175px;height:35px;line-height:35px;} + &.large {width:195px;height:40px;line-height:40px;} + a { text-decoration:none;color:nth($cgr, 1); &:hover {color:nth($cgr, 2);} @@ -21,7 +25,7 @@ &:focus { border-color:nth($ct, 1); } &[disabled] {background:#f7f8fb;cursor:not-allowed;} } - .icon {position:absolute;right:10px;top:4px;font-size:25px;color:nth($cp, 3); + .icon {position:absolute;right:0;top:0;width:35px;text-align:center;font-size:25px;color:nth($cp, 3); &::after {content:"\e650"} } }