Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7250608

Browse files
zcodingzcoding
committed
timepicker;
1 parent ca463f2 commit 7250608

File tree

5 files changed

+83
-25
lines changed

5 files changed

+83
-25
lines changed

‎src/datetimepicker/datepicker.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export default {
4141
4242
events: {
4343
"view-change"(show) {
44-
this.$log(show);
4544
this.show = show;
4645
}
4746
}

‎src/datetimepicker/datetimepicker.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,14 @@ export default {
9292
add() {},
9393
9494
handleToggleTime() {
95-
this.showDatePicker = true,
96-
this.showTimePicker = false;
95+
this.showDatePicker = false,
96+
this.showTimePicker = true;
9797
},
9898
99-
handleToggleDate() {}
99+
handleToggleDate() {
100+
this.showDatePicker = true,
101+
this.showTimePicker = false;
102+
}
100103
}
101104
102105
};

‎src/datetimepicker/monthspicker.vue‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</th>
1010
<th class="am-datepicker-switch" colspan="5" @click="showYears">
1111
<div class="am-datepicker-select">
12-
{{ showYear }}
12+
{{ viewDate.getFullYear() }}
1313
</div>
1414
</th>
1515
<th class="am-datepicker-next" @click="nextYear">
@@ -20,7 +20,9 @@
2020
<tbody>
2121
<tr>
2222
<td colspan="7">
23-
<span class="am-datepicker-month" v-for="month in months" :class="{'am-active': month.isActive}">{{ month.show }}</span>
23+
<span class="am-datepicker-month" v-for="month in months" :class="{'am-active': month.isActive}" @click="setViewMonth(month)">
24+
{{ month.show }}
25+
</span>
2426
</td>
2527
</tr>
2628
</tbody>
@@ -69,6 +71,22 @@ export default {
6971
var newDate = new Date(viewDate.valueOf());
7072
newDate.setFullYear(viewDate.getFullYear() + 1);
7173
this.viewDate = newDate;
74+
},
75+
76+
setViewMonth(month) {
77+
var viewDate = this.viewDate;
78+
// var months = this.locale.monthsShort;
79+
viewDate.setMonth(month);
80+
81+
// if (this.props.minViewMode === 'months') {
82+
// this.setViewDate(viewDate);
83+
// }
84+
85+
this.$dispatch('view-change', {
86+
days: true,
87+
months: false,
88+
years: false
89+
});
7290
}
7391
},
7492
@@ -102,12 +120,6 @@ export default {
102120
}
103121
104122
return months;
105-
},
106-
107-
showYear() {
108-
var year = parseInt(this.viewDate.getFullYear() / 10, 10) * 10;
109-
var addYear = year + 9;
110-
return year + '-' + addYear;
111123
}
112124
}
113125

‎src/datetimepicker/timepicker.vue‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<table class="am-datepicker-table">
66
<thead>
77
<tr class="am-datepicker-header">
8-
<th class="am-datepicker-prev" @click="subtractMinute">
8+
<th class="am-datepicker-prev" @click="prevMinute">
99
<i class="am-datepicker-prev-icon"></i>
1010
</th>
1111
<th class="am-datepicker-switch" colspan="5" @click="showDate">
@@ -27,8 +27,8 @@
2727
</tbody>
2828
</table>
2929
</div>
30-
<hours-picker>
31-
<minutes-picker>
30+
<hours-picker v-show="show.hours"></hours-picker>
31+
<minutes-picker v-show="show.minutes"></hours-picker>
3232
</div>
3333

3434
</template>
@@ -42,24 +42,53 @@ export default {
4242
4343
data() {
4444
return {
45-
time: {
46-
hour: '12',
47-
minute: '12'
48-
}
45+
show: {
46+
hours: false,
47+
minutes: false
48+
},
49+
viewDate: new Date(),
50+
selectedDate: new Date()
4951
};
5052
},
5153
54+
computed: {
55+
time() {
56+
var hour = this.viewDate.getHours();
57+
var minute = this.viewDate.getMinutes();
58+
59+
if (minute < 10) {
60+
minute = '0' + minute;
61+
}
62+
63+
if (hour < 10) {
64+
hour = '0' + hour;
65+
}
66+
67+
return {
68+
hour: hour,
69+
minute: minute
70+
};
71+
}
72+
},
73+
5274
components: {
5375
minutesPicker,
5476
hoursPicker
5577
},
5678
5779
methods: {
58-
showHours() {},
80+
showHours() {
81+
},
5982
6083
showMinutes() {},
6184
62-
subtractMinute() {},
85+
prevMinute() {
86+
var viewDate = this.viewDate;
87+
88+
viewDate.setMinutes(viewDate.getMinutes() - 1);
89+
90+
this.selectedDate = new Date(viewDate.valueOf());
91+
},
6392
6493
addMinute() {},
6594

‎src/datetimepicker/yearspicker.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
<th class="am-datepicker-prev" @click="prevDecade">
88
<i class="am-datepicker-prev-icon"></i>
99
</th>
10-
<th class="am-datepicker-switch" colspan="5" @click="showMonths">
10+
<th class="am-datepicker-switch" colspan="5">
1111
<div class="am-datepicker-select">
12-
{{ viewDate.getFullYear() }}
12+
{{ showYear }}
1313
</div>
1414
</th>
1515
<th class="am-datepicker-next" @click="nextDecade">
@@ -20,7 +20,7 @@
2020
<tbody>
2121
<tr>
2222
<td colspan="7">
23-
<span class="am-datepicker-year" v-for="year in years" :class="{'am-datepicker-old': year.isOld, 'am-datepicker-new': year.isNew, 'am-active': year.isActive}">
23+
<span class="am-datepicker-year" v-for="year in years" :class="{'am-datepicker-old': year.isOld, 'am-datepicker-new': year.isNew, 'am-active': year.isActive}" @click="setViewYear(year)">
2424
{{ year.show }}
2525
</span>
2626
</td>
@@ -85,6 +85,12 @@ export default {
8585
}
8686
8787
return years;
88+
},
89+
90+
showYear() {
91+
var year = parseInt(this.viewDate.getFullYear() / 10, 10) * 10;
92+
var addYear = year + 9;
93+
return year + '-' + addYear;
8894
}
8995
},
9096
@@ -103,13 +109,22 @@ export default {
103109
this.viewDate = newDate;
104110
},
105111
106-
showMonths() {
112+
setViewYear(year) {
113+
var viewDate = this.viewDate;
114+
115+
viewDate.setFullYear(year);
116+
117+
// if (this.props.minViewMode === 'years') {
118+
// this.setViewDate(viewDate);
119+
// }
120+
107121
this.$dispatch('view-change', {
108122
days: false,
109123
months: true,
110124
years: false
111125
});
112126
}
127+
113128
}
114129
115130
};

0 commit comments

Comments
 (0)