chenhaodong / mew-iview

Commit 5cc9b892b8e08fb8eb27589e9047292d58fafb01

Authored by 梁灏
1 parent d596b9e4

update DateTimePicker 

update DateTimePicker
Showing 8 changed files with 98 additions and 21 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/confirm.vue
  Show/Hide comments   View file @5cc9b89
1 1 <template>
2 2 <div :class="[prefixCls + '-confirm']">
  3 + <span v-if="showTime" @click="handleToggleTime">
  4 + <template v-if="isTime">选择日期</template>
  5 + <template v-else>选择时间</template>
  6 + </span>
3 7 <i-button size="small" type="text" @click="handleClear">清空</i-button>
4 8 <i-button size="small" type="primary" @click="handleSuccess">确定</i-button>
5 9 </div>
... ... @@ -11,6 +15,10 @@
11 15  
12 16 export default {
13 17 components: { iButton },
  18 + props: {
  19 + showTime: false,
  20 + isTime: false
  21 + },
14 22 data () {
15 23 return {
16 24 prefixCls: prefixCls
... ... @@ -22,6 +30,9 @@
22 30 },
23 31 handleSuccess () {
24 32 this.$emit('on-pick-success');
  33 + },
  34 + handleToggleTime () {
  35 + this.$emit('on-pick-toggle-time');
25 36 }
26 37 }
27 38 };
... ...
src/components/date-picker/base/date-table.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -168,6 +168,11 @@
168 168 let month = this.month;
169 169 let day = cell.text;
170 170  
  171 + const date = this.date;
  172 + const hours = date.getHours();
  173 + const minutes = date.getMinutes();
  174 + const seconds = date.getSeconds();
  175 +
171 176 if (cell.type === 'prev-month') {
172 177 if (month === 0) {
173 178 month = 11;
... ... @@ -184,7 +189,7 @@
184 189 }
185 190 }
186 191  
187   - return new Date(year, month, day);
  192 + return new Date(year, month, day, hours, minutes, seconds);
188 193 },
189 194 handleClick (event) {
190 195 const target = event.target;
... ...
src/components/date-picker/panel/date-range.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -126,7 +126,7 @@
126 126 import YearTable from '../base/year-table.vue';
127 127 import MonthTable from '../base/month-table.vue';
128 128 import Confirm from '../base/confirm.vue';
129   - import { toDate, prevMonth, nextMonth } from '../util';
  129 + import { toDate, prevMonth, nextMonth, initTimeDate } from '../util';
130 130  
131 131 import Mixin from './mixin';
132 132  
... ... @@ -141,7 +141,7 @@
141 141 prefixCls: prefixCls,
142 142 datePrefixCls: datePrefixCls,
143 143 shortcuts: [],
144   - date: new Date(),
  144 + date: initTimeDate(),
145 145 value: '',
146 146 minDate: '',
147 147 maxDate: '',
... ...
src/components/date-picker/panel/date.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -59,9 +59,18 @@
59 59 :disabled-date="disabledDate"
60 60 @on-pick="handleMonthPick"
61 61 @on-pick-click="handlePickClick"></month-table>
  62 + <time-picker
  63 + v-show="currentView === 'time'"
  64 + v-ref:time-picker
  65 + :date="date"
  66 + :value="value"
  67 + @on-pick="handleTimePick"></time-picker>
62 68 </div>
63 69 <Confirm
64 70 v-if="confirm"
  71 + :show-time="showTime"
  72 + :is-time="isTime"
  73 + @on-pick-toggle-time="handleToggleTime"
65 74 @on-pick-clear="handlePickClear"
66 75 @on-pick-success="handlePickSuccess"></Confirm>
67 76 </div>
... ... @@ -72,30 +81,34 @@
72 81 import DateTable from '../base/date-table.vue';
73 82 import YearTable from '../base/year-table.vue';
74 83 import MonthTable from '../base/month-table.vue';
  84 + import TimePicker from './time.vue';
75 85 import Confirm from '../base/confirm.vue';
76 86  
77 87 import Mixin from './mixin';
78 88  
  89 + import { initTimeDate } from '../util';
  90 +
79 91 const prefixCls = 'ivu-picker-panel';
80 92 const datePrefixCls = 'ivu-date-picker';
81 93  
82 94 export default {
83 95 mixins: [Mixin],
84   - components: { Icon, DateTable, YearTable, MonthTable, Confirm },
  96 + components: { Icon, DateTable, YearTable, MonthTable, TimePicker, Confirm },
85 97 data () {
86 98 return {
87 99 prefixCls: prefixCls,
88 100 datePrefixCls: datePrefixCls,
89 101 shortcuts: [],
90 102 currentView: 'date',
91   - date: new Date(),
  103 + date: initTimeDate(),
92 104 value: '',
93 105 showTime: false,
94 106 selectionMode: 'day',
95 107 disabledDate: '',
96 108 year: null,
97 109 month: null,
98   - confirm: false
  110 + confirm: false,
  111 + isTime: false
99 112 };
100 113 },
101 114 computed: {
... ... @@ -126,23 +139,29 @@
126 139 this.year = newVal.getFullYear();
127 140 this.month = newVal.getMonth();
128 141 }
  142 + },
  143 + currentView (val) {
  144 + if (val === 'time') this.$refs.timePicker.updateScroll();
129 145 }
130 146 },
131 147 methods: {
132 148 resetDate () {
133 149 this.date = new Date(this.date);
134 150 },
135   - handleClear() {
  151 + handleClear () {
136 152 this.date = new Date();
137 153 this.$emit('on-pick', '');
  154 + if (this.showTime) this.$refs.timePicker.handleClear();
138 155 },
139   - resetView() {
140   - if (this.selectionMode === 'month') {
141   - this.currentView = 'month';
142   - } else if (this.selectionMode === 'year') {
143   - this.currentView = 'year';
144   - } else {
145   - this.currentView = 'date';
  156 + resetView (reset = false) {
  157 + if (this.currentView !== 'time' || reset) {
  158 + if (this.selectionMode === 'month') {
  159 + this.currentView = 'month';
  160 + } else if (this.selectionMode === 'year') {
  161 + this.currentView = 'year';
  162 + } else {
  163 + this.currentView = 'date';
  164 + }
146 165 }
147 166  
148 167 this.year = this.date.getFullYear();
... ... @@ -186,6 +205,15 @@
186 205 showMonthPicker () {
187 206 this.currentView = 'month';
188 207 },
  208 + handleToggleTime () {
  209 + if (this.currentView === 'date') {
  210 + this.currentView = 'time';
  211 + this.isTime = true;
  212 + } else if (this.currentView === 'time') {
  213 + this.currentView = 'date';
  214 + this.isTime = false;
  215 + }
  216 + },
189 217 handleYearPick(year, close = true) {
190 218 this.year = year;
191 219 if (!close) return;
... ... @@ -216,15 +244,16 @@
216 244 },
217 245 handleDatePick (value) {
218 246 if (this.selectionMode === 'day') {
219   - if (!this.showTime) {
220   - this.$emit('on-pick', new Date(value.getTime()));
221   - }
  247 + this.$emit('on-pick', new Date(value.getTime()));
222 248 this.date.setFullYear(value.getFullYear());
223 249 this.date.setMonth(value.getMonth());
224 250 this.date.setDate(value.getDate());
225 251 }
226 252  
227 253 this.resetDate();
  254 + },
  255 + handleTimePick (date) {
  256 + this.handleDatePick(date);
228 257 }
229 258 },
230 259 compiled () {
... ...
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -3,6 +3,7 @@
3 3 <div :class="[prefixCls + '-body']">
4 4 <div :class="[prefixCls + '-content']">
5 5 <time-spinner
  6 + v-ref:time-spinner
6 7 :show-seconds="showSeconds"
7 8 :hours="hours"
8 9 :minutes="minutes"
... ... @@ -35,13 +36,21 @@
35 36 export default {
36 37 mixins: [Mixin],
37 38 components: { TimeSpinner, Confirm },
  39 + props: {
  40 + date: {
  41 + default () {
  42 + return initTimeDate()
  43 + }
  44 + },
  45 + value: {
  46 + default: ''
  47 + }
  48 + },
38 49 data () {
39 50 return {
40 51 prefixCls: prefixCls,
41 52 timePrefixCls: timePrefixCls,
42 53 format: 'HH:mm:ss',
43   - date: initTimeDate(),
44   - value: '',
45 54 hours: '',
46 55 minutes: '',
47 56 seconds: '',
... ... @@ -92,6 +101,9 @@
92 101 this.seconds = this.date.getSeconds();
93 102 }
94 103 if (emit) this.$emit('on-pick', this.date, true);
  104 + },
  105 + updateScroll () {
  106 + this.$refs.timeSpinner.updateScroll();
95 107 }
96 108 }
97 109 };
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -362,7 +362,13 @@
362 362 },
363 363 showPicker () {
364 364 if (!this.picker) {
  365 + const type = this.type;
  366 +
365 367 this.picker = new Vue(this.panel).$mount(this.$els.picker);
  368 + if (type === 'datetime' || type === 'datetimerange') {
  369 + this.confirm = true;
  370 + this.picker.showTime = true;
  371 + }
366 372 this.picker.value = this.internalValue;
367 373 this.picker.confirm = this.confirm;
368 374 this.picker.selectionMode = this.selectionMode;
... ... @@ -430,7 +436,7 @@
430 436 this.$refs.drop.update();
431 437 if (this.open === null) this.$emit('on-open-change', true);
432 438 } else {
433   - if (this.picker) this.picker.resetView && this.picker.resetView();
  439 + if (this.picker) this.picker.resetView && this.picker.resetView(true);
434 440 this.$refs.drop.destroy();
435 441 if (this.open === null) this.$emit('on-open-change', false);
436 442 }
... ...
src/styles/components/date-picker.less
  Show/Hide comments   View file @5cc9b89
... ... @@ -244,5 +244,19 @@
244 244 text-align: right;
245 245 padding: 8px;
246 246 clear: both;
  247 + & > span{
  248 + color: @link-color;
  249 + cursor: pointer;
  250 + user-select: none;
  251 + float: left;
  252 + padding: 2px 0;
  253 + transition: all @transition-time @ease-in-out;
  254 + &:hover{
  255 + color: @link-hover-color;
  256 + }
  257 + &:active{
  258 + color: @link-active-color;
  259 + }
  260 + }
247 261 }
248 262 }
249 263 \ No newline at end of file
... ...
test/routers/date.vue
  Show/Hide comments   View file @5cc9b89
... ... @@ -24,7 +24,7 @@
24 24 <!--style="width: 168px"></time-picker>-->
25 25 <!--</i-col>-->
26 26 <i-col span="12">
27   - <Time-picker type="timerange" confirm placeholder="选择时间" style="width: 168px"></Time-picker>
  27 + <Date-picker type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker>
28 28 <!--<time-picker-->
29 29 <!--:value="value2"-->
30 30 <!--type="timerange"-->
... ...