Commit 603e437bc23dc7e75855682a69dbc50716f0076a

Authored by 梁灏
1 parent 2d948738

update TimePicker

update TimePicker
src/components/date-picker/panel/time.vue
@@ -58,17 +58,17 @@ @@ -58,17 +58,17 @@
58 if (!newVal) return; 58 if (!newVal) return;
59 newVal = new Date(newVal); 59 newVal = new Date(newVal);
60 if (!isNaN(newVal)) { 60 if (!isNaN(newVal)) {
  61 + this.date = newVal;
61 this.handleChange({ 62 this.handleChange({
62 hours: newVal.getHours(), 63 hours: newVal.getHours(),
63 minutes: newVal.getMinutes(), 64 minutes: newVal.getMinutes(),
64 seconds: newVal.getSeconds() 65 seconds: newVal.getSeconds()
65 - });  
66 -// this.$nextTick(() => this.scrollTop()); 66 + }, false);
67 } 67 }
68 } 68 }
69 }, 69 },
70 methods: { 70 methods: {
71 - handleChange (date) { 71 + handleChange (date, emit = true) {
72 if (date.hours !== undefined) { 72 if (date.hours !== undefined) {
73 this.date.setHours(date.hours); 73 this.date.setHours(date.hours);
74 this.hours = this.date.getHours(); 74 this.hours = this.date.getHours();
@@ -81,6 +81,7 @@ @@ -81,6 +81,7 @@
81 this.date.setSeconds(date.seconds); 81 this.date.setSeconds(date.seconds);
82 this.seconds = this.date.getSeconds(); 82 this.seconds = this.date.getSeconds();
83 } 83 }
  84 + if (emit) this.$emit('on-pick', this.date, true);
84 } 85 }
85 } 86 }
86 }; 87 };
src/components/date-picker/util.js
1 import dateUtil from '../../utils/date'; 1 import dateUtil from '../../utils/date';
2 2
3 -const newArray = function(start, end) {  
4 - let result = [];  
5 - for (let i = start; i <= end; i++) {  
6 - result.push(i);  
7 - }  
8 - return result;  
9 -};  
10 -  
11 export const toDate = function(date) { 3 export const toDate = function(date) {
12 date = new Date(date); 4 date = new Date(date);
13 if (isNaN(date.getTime())) return null; 5 if (isNaN(date.getTime())) return null;
@@ -46,32 +38,6 @@ export const getFirstDayOfMonth = function(date) { @@ -46,32 +38,6 @@ export const getFirstDayOfMonth = function(date) {
46 return temp.getDay(); 38 return temp.getDay();
47 }; 39 };
48 40
49 -export const DAY_DURATION = 86400000;  
50 -  
51 -export const getStartDateOfMonth = function(year, month) {  
52 - const result = new Date(year, month, 1);  
53 - const day = result.getDay();  
54 -  
55 - if (day === 0) {  
56 - result.setTime(result.getTime() - DAY_DURATION * 7);  
57 - } else {  
58 - result.setTime(result.getTime() - DAY_DURATION * day);  
59 - }  
60 -  
61 - return result;  
62 -};  
63 -  
64 -export const getWeekNumber = function(src) {  
65 - const date = new Date(src.getTime());  
66 - date.setHours(0, 0, 0, 0);  
67 - // Thursday in current week decides the year.  
68 - date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);  
69 - // January 4 is always in week 1.  
70 - const week1 = new Date(date.getFullYear(), 0, 4);  
71 - // Adjust to Thursday in week 1 and count number of weeks from date to week 1.  
72 - return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);  
73 -};  
74 -  
75 export const prevMonth = function(src) { 41 export const prevMonth = function(src) {
76 const year = src.getFullYear(); 42 const year = src.getFullYear();
77 const month = src.getMonth(); 43 const month = src.getMonth();
@@ -108,52 +74,4 @@ export const nextMonth = function(src) { @@ -108,52 +74,4 @@ export const nextMonth = function(src) {
108 src.setFullYear(newYear); 74 src.setFullYear(newYear);
109 75
110 return new Date(src.getTime()); 76 return new Date(src.getTime());
111 -};  
112 -  
113 -export const getRangeHours = function(ranges) {  
114 - const hours = [];  
115 - let disabledHours = [];  
116 -  
117 - (ranges || []).forEach(range => {  
118 - const value = range.map(date => date.getHours());  
119 -  
120 - disabledHours = disabledHours.concat(newArray(value[0], value[1]));  
121 - });  
122 -  
123 - if (disabledHours.length) {  
124 - for (let i = 0; i < 24; i++) {  
125 - hours[i] = disabledHours.indexOf(i) === -1;  
126 - }  
127 - } else {  
128 - for (let i = 0; i < 24; i++) {  
129 - hours[i] = false;  
130 - }  
131 - }  
132 -  
133 - return hours;  
134 -};  
135 -  
136 -export const limitRange = function(date, ranges) {  
137 - if (!ranges || !ranges.length) return date;  
138 -  
139 - const len = ranges.length;  
140 - const format = 'HH:mm:ss';  
141 -  
142 - date = dateUtil.parse(dateUtil.format(date, format), format);  
143 - for (let i = 0; i < len; i++) {  
144 - const range = ranges[i];  
145 - if (date >= range[0] && date <= range[1]) {  
146 - return date;  
147 - }  
148 - }  
149 -  
150 - let maxDate = ranges[0][0];  
151 - let minDate = ranges[0][0];  
152 -  
153 - ranges.forEach(range => {  
154 - minDate = new Date(Math.min(range[0], minDate));  
155 - maxDate = new Date(Math.max(range[1], maxDate));  
156 - });  
157 -  
158 - return date < minDate ? minDate : maxDate;  
159 -}; 77 +};
160 \ No newline at end of file 78 \ No newline at end of file
test/routers/date.vue
@@ -12,7 +12,13 @@ @@ -12,7 +12,13 @@
12 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker> 12 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
13 </i-col> 13 </i-col>
14 <i-col span="12"> 14 <i-col span="12">
15 - <time-picker :value="value" placeholder="选择时间" format="HH:mm:ss" :hide-disabled-options="false" :disabled-hours="[1,2]" style="width: 168px"></time-picker> 15 + <time-picker
  16 + :value="value"
  17 + placeholder="选择时间"
  18 + format="HH:mm:ss"
  19 + :hide-disabled-options="true"
  20 + :disabled-hours="[1,2]"
  21 + style="width: 168px"></time-picker>
16 </i-col> 22 </i-col>
17 </row> 23 </row>
18 </template> 24 </template>