other / mew-iview

Commit af713093ab1c5cea2c0794bc3c931f6f6834b880

Authored by 梁灏
1 parent 2dbbd7de

update TimePicker 

update TimePicker
Showing 6 changed files with 62 additions and 10 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/base/time-spinner.vue
  Show/Hide comments   View file @af71309
... ... @@ -45,7 +45,8 @@
45 45 },
46 46 data () {
47 47 return {
48   - prefixCls: prefixCls
  48 + prefixCls: prefixCls,
  49 + compiled: false
49 50 };
50 51 },
51 52 computed: {
... ... @@ -155,11 +156,16 @@
155 156 data[type] = cell.text;
156 157 this.$emit('on-change', data);
157 158  
158   - const from = this.$els[type].scrollTop;
159   - const to = 24 * this.getScrollIndex(type, cell.text);
160   - scrollTop(this.$els[type], from, to, 500);
  159 +// const from = this.$els[type].scrollTop;
  160 +// const to = 24 * this.getScrollIndex(type, cell.text);
  161 +// scrollTop(this.$els[type], from, to, 500);
161 162 }
162 163 },
  164 + scroll (type, index) {
  165 + const from = this.$els[type].scrollTop;
  166 + const to = 24 * this.getScrollIndex(type, index);
  167 + scrollTop(this.$els[type], from, to, 500);
  168 + },
163 169 getScrollIndex (type, index) {
164 170 const Type = firstUpperCase(type);
165 171 const disabled = this[`disabled${Type}`];
... ... @@ -181,8 +187,23 @@
181 187 });
182 188 }
183 189 },
  190 + watch: {
  191 + hours (val) {
  192 + if (!this.compiled) return;
  193 + this.scroll('hours', val);
  194 + },
  195 + minutes (val) {
  196 + if (!this.compiled) return;
  197 + this.scroll('minutes', val);
  198 + },
  199 + seconds (val) {
  200 + if (!this.compiled) return;
  201 + this.scroll('seconds', val);
  202 + }
  203 + },
184 204 compiled () {
185 205 this.updateScroll();
  206 + this.$nextTick(() => this.compiled = true);
186 207 }
187 208 };
188 209 </script>
189 210 \ No newline at end of file
... ...
src/components/date-picker/panel/time.vue
  Show/Hide comments   View file @af71309
... ... @@ -75,7 +75,6 @@
75 75 this.hours = '';
76 76 this.minutes = '';
77 77 this.seconds = '';
78   - this.$emit('on-pick', '');
79 78 },
80 79 handleChange (date, emit = true) {
81 80 if (date.hours !== undefined) {
... ...
src/components/date-picker/picker.vue
  Show/Hide comments   View file @af71309
... ... @@ -30,7 +30,7 @@
30 30 import Drop from '../../components/select/dropdown.vue';
31 31 import clickoutside from '../../directives/clickoutside';
32 32 import { oneOf } from '../../utils/assist';
33   - import { formatDate, parseDate, initTimeDate } from './util';
  33 + import { formatDate, parseDate } from './util';
34 34  
35 35 const prefixCls = 'ivu-date-picker';
36 36  
... ... @@ -294,6 +294,30 @@
294 294 }
295 295  
296 296 correctDate = parser(correctValue, format);
  297 + } else if (type === 'time') {
  298 + const parsedDate = parseDate(value, format);
  299 +
  300 + if (parsedDate instanceof Date) {
  301 + if (this.disabledHours.length || this.disabledMinutes.length || this.disabledSeconds.length) {
  302 + const hours = parsedDate.getHours();
  303 + const minutes = parsedDate.getMinutes();
  304 + const seconds = parsedDate.getSeconds();
  305 +
  306 + if ((this.disabledHours.length && this.disabledHours.indexOf(hours) > -1) ||
  307 + (this.disabledMinutes.length && this.disabledMinutes.indexOf(minutes) > -1) ||
  308 + (this.disabledSeconds.length && this.disabledSeconds.indexOf(seconds) > -1)) {
  309 + correctValue = oldValue;
  310 + } else {
  311 + correctValue = formatDate(parsedDate, format);
  312 + }
  313 + } else {
  314 + correctValue = formatDate(parsedDate, format);
  315 + }
  316 + } else {
  317 + correctValue = oldValue;
  318 + }
  319 +
  320 + correctDate = parseDate(correctValue, format);
297 321 } else {
298 322 const parsedDate = parseDate(value, format);
299 323  
... ...
src/components/date-picker/util.js
  Show/Hide comments   View file @af71309
... ... @@ -76,7 +76,7 @@ export const nextMonth = function(src) {
76 76 return new Date(src.getTime());
77 77 };
78 78  
79   -export const initTimeDate = function (time) {
  79 +export const initTimeDate = function () {
80 80 const date = new Date();
81 81 date.setHours(0);
82 82 date.setMinutes(0);
... ...
src/utils/assist.js
  Show/Hide comments   View file @af71309
... ... @@ -144,7 +144,7 @@ export function scrollTop(el, from = 0, to, duration = 500) {
144 144 function (callback) {
145 145 return window.setTimeout(callback, 1000/60);
146 146 }
147   - )
  147 + );
148 148 }
149 149 const difference = Math.abs(from - to);
150 150 const step = Math.ceil(difference / duration * 50);
... ...
test/routers/date.vue
  Show/Hide comments   View file @af71309
... ... @@ -6,7 +6,7 @@
6 6 <template>
7 7 <row>
8 8 <i-col span="12">
9   - <date-picker type="date" placeholder="选择日期" style="width: 200px"></date-picker>
  9 + <date-picker type="date" placeholder="选择日期" style="width: 200px" @on-ok="ok" confirm @on-clear="clear"></date-picker>
10 10 </i-col>
11 11 <i-col span="12">
12 12 <date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></date-picker>
... ... @@ -20,6 +20,8 @@
20 20 :hide-disabled-options="false"
21 21 :disabled-hours="[1,2,5,10,11]"
22 22 @on-change="c"
  23 + @on-ok="ok"
  24 + @on-clear="clear"
23 25 style="width: 168px"></time-picker>
24 26 </i-col>
25 27 </row>
... ... @@ -34,8 +36,14 @@
34 36 },
35 37 methods: {
36 38 c (s) {
37   - console.log(s)
  39 + console.log(1,s);
38 40 this.value = s;
  41 + },
  42 + ok () {
  43 + console.log('ok');
  44 + },
  45 + clear () {
  46 + console.log('clear');
39 47 }
40 48 }
41 49 }
... ...