Commit 603e437bc23dc7e75855682a69dbc50716f0076a
1 parent
2d948738
update TimePicker
update TimePicker
Showing
3 changed files
with
12 additions
and
87 deletions
Show diff stats
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> |