other / mew-iview

Commit 2fb29faeb11ac5db00d9b8edc6a4adacec3f67a6

Authored by Sergio Crisostomo
1 parent 4863a75d

export utilities and fix multiple dates bugs

Showing 2 changed files with 133 additions and 116 deletions   Show diff stats
Inline Side-by-side
src/components/date-picker/picker.vue
  Show/Hide comments   View file @2fb29fa
... ... @@ -67,112 +67,11 @@
67 67 import clickoutside from '../../directives/clickoutside';
68 68 import TransferDom from '../../directives/transfer-dom';
69 69 import { oneOf } from '../../utils/assist';
70   - import { formatDate, parseDate } from './util';
  70 + import { DEFAULT_FORMATS, TYPE_VALUE_RESOLVER_MAP } from './util';
71 71 import Emitter from '../../mixins/emitter';
72 72  
73 73 const prefixCls = 'ivu-date-picker';
74 74  
75   - const DEFAULT_FORMATS = {
76   - date: 'yyyy-MM-dd',
77   - month: 'yyyy-MM',
78   - year: 'yyyy',
79   - datetime: 'yyyy-MM-dd HH:mm:ss',
80   - time: 'HH:mm:ss',
81   - timerange: 'HH:mm:ss',
82   - daterange: 'yyyy-MM-dd',
83   - datetimerange: 'yyyy-MM-dd HH:mm:ss'
84   - };
85   -
86   - const RANGE_SEPARATOR = ' - ';
87   -
88   - const DATE_FORMATTER = function(value, format) {
89   - return formatDate(value, format);
90   - };
91   - const DATE_PARSER = function(text, format) {
92   - return parseDate(text, format);
93   - };
94   - const RANGE_FORMATTER = function(value, format) {
95   - if (Array.isArray(value) && value.length === 2) {
96   - const start = value[0];
97   - const end = value[1];
98   -
99   - if (start && end) {
100   - return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
101   - }
102   - }
103   - return '';
104   - };
105   - const RANGE_PARSER = function(text, format) {
106   - const array = text.split(RANGE_SEPARATOR);
107   - if (array.length === 2) {
108   - const range1 = array[0];
109   - const range2 = array[1];
110   -
111   - return [parseDate(range1, format), parseDate(range2, format)];
112   - }
113   - return [];
114   - };
115   -
116   - const TYPE_VALUE_RESOLVER_MAP = {
117   - default: {
118   - formatter(value) {
119   - if (!value) return '';
120   - return '' + value;
121   - },
122   - parser(text) {
123   - if (text === undefined || text === '') return null;
124   - return text;
125   - }
126   - },
127   - date: {
128   - formatter: DATE_FORMATTER,
129   - parser: DATE_PARSER
130   - },
131   - datetime: {
132   - formatter: DATE_FORMATTER,
133   - parser: DATE_PARSER
134   - },
135   - daterange: {
136   - formatter: RANGE_FORMATTER,
137   - parser: RANGE_PARSER
138   - },
139   - datetimerange: {
140   - formatter: RANGE_FORMATTER,
141   - parser: RANGE_PARSER
142   - },
143   - timerange: {
144   - formatter: RANGE_FORMATTER,
145   - parser: RANGE_PARSER
146   - },
147   - time: {
148   - formatter: DATE_FORMATTER,
149   - parser: DATE_PARSER
150   - },
151   - month: {
152   - formatter: DATE_FORMATTER,
153   - parser: DATE_PARSER
154   - },
155   - year: {
156   - formatter: DATE_FORMATTER,
157   - parser: DATE_PARSER
158   - },
159   - number: {
160   - formatter(value) {
161   - if (!value) return '';
162   - return '' + value;
163   - },
164   - parser(text) {
165   - let result = Number(text);
166   -
167   - if (!isNaN(text)) {
168   - return result;
169   - } else {
170   - return null;
171   - }
172   - }
173   - }
174   - };
175   -
176 75 export default {
177 76 name: 'CalendarPicker',
178 77 mixins: [ Emitter ],
... ... @@ -307,11 +206,7 @@
307 206 return bottomPlaced ? 'slide-up' : 'slide-down';
308 207 },
309 208 visualValue() {
310   - const value = this.internalValue;
311   - if (!value) return;
312   -
313   - if (this.multiple) return value.map(date => this.formatDate(date)).join(', ');
314   - return this.formatDate(value);
  209 + return this.formatDate(this.internalValue);
315 210 },
316 211 isConfirm(){
317 212 return this.confirm || this.type === 'datetime' || this.type === 'datetimerange' || this.multiple;
... ... @@ -355,8 +250,9 @@
355 250 typeof this.options.disabledDate === 'function' &&
356 251 this.options.disabledDate;
357 252 const valueToTest = isArrayValue ? newDate : newDate[0];
  253 + const isDisabled = disabledDateFn && disabledDateFn(valueToTest)
358 254  
359   - if (newValue !== oldValue && !disabledDateFn(valueToTest)) {
  255 + if (newValue !== oldValue && !isDisabled) {
360 256 this.emitChange();
361 257 this.internalValue = newDate;
362 258 } else {
... ... @@ -404,9 +300,13 @@
404 300 TYPE_VALUE_RESOLVER_MAP[type] ||
405 301 TYPE_VALUE_RESOLVER_MAP['default']
406 302 ).parser;
  303 + const format = this.format || DEFAULT_FORMATS[type];
  304 + const multipleParser = TYPE_VALUE_RESOLVER_MAP['multiple'].parser;
407 305  
408 306 if (val && type === 'time' && !(val instanceof Date)) {
409   - val = parser(val, this.format || DEFAULT_FORMATS[type]);
  307 + val = parser(val, format);
  308 + } else if (this.multiple && val) {
  309 + val = multipleParser(val, format);
410 310 } else if (isRange) {
411 311 if (!val){
412 312 val = [null, null];
... ... @@ -415,17 +315,24 @@
415 315 val = val.map(date => isNaN(date.getTime()) ? null : date); // check if parse passed
416 316 }
417 317 } else if (typeof val === 'string' && type.indexOf('time') !== 0){
418   - val = parser(val, this.format || DEFAULT_FORMATS[type]) || val;
  318 + val = parser(val, format) || val;
419 319 }
420   - return (isRange || this.multiple) ? val : [val];
  320 +
  321 + return (isRange || this.multiple) ? (val || []) : [val];
421 322 },
422 323 formatDate(value){
423   - const {formatter} = (
424   - TYPE_VALUE_RESOLVER_MAP[this.type] ||
425   - TYPE_VALUE_RESOLVER_MAP['default']
426   - );
427 324 const format = DEFAULT_FORMATS[this.type];
428   - return formatter(value, this.format || format);
  325 +
  326 + if (this.multiple) {
  327 + const formatter = TYPE_VALUE_RESOLVER_MAP.multiple.formatter;
  328 + return formatter(value, this.format || format);
  329 + } else {
  330 + const {formatter} = (
  331 + TYPE_VALUE_RESOLVER_MAP[this.type] ||
  332 + TYPE_VALUE_RESOLVER_MAP['default']
  333 + );
  334 + return formatter(value, this.format || format);
  335 + }
429 336 },
430 337 onPick(dates, visible = false) {
431 338  
... ...
src/components/date-picker/util.js
  Show/Hide comments   View file @2fb29fa
... ... @@ -134,3 +134,113 @@ export const formatDateLabels = (function() {
134 134 };
135 135 };
136 136 })();
  137 +
  138 +// Parsers and Formaters
  139 +export const DEFAULT_FORMATS = {
  140 + date: 'yyyy-MM-dd',
  141 + month: 'yyyy-MM',
  142 + year: 'yyyy',
  143 + datetime: 'yyyy-MM-dd HH:mm:ss',
  144 + time: 'HH:mm:ss',
  145 + timerange: 'HH:mm:ss',
  146 + daterange: 'yyyy-MM-dd',
  147 + datetimerange: 'yyyy-MM-dd HH:mm:ss'
  148 +};
  149 +
  150 +const RANGE_SEPARATOR = ' - ';
  151 +
  152 +const DATE_FORMATTER = function(value, format) {
  153 + return formatDate(value, format);
  154 +};
  155 +const DATE_PARSER = function(text, format) {
  156 + return parseDate(text, format);
  157 +};
  158 +const RANGE_FORMATTER = function(value, format) {
  159 + if (Array.isArray(value) && value.length === 2) {
  160 + const start = value[0];
  161 + const end = value[1];
  162 +
  163 + if (start && end) {
  164 + return formatDate(start, format) + RANGE_SEPARATOR + formatDate(end, format);
  165 + }
  166 + }
  167 + return '';
  168 +};
  169 +const RANGE_PARSER = function(text, format) {
  170 + const array = text.split(RANGE_SEPARATOR);
  171 + if (array.length === 2) {
  172 + const range1 = array[0];
  173 + const range2 = array[1];
  174 +
  175 + return [parseDate(range1, format), parseDate(range2, format)];
  176 + }
  177 + return [];
  178 +};
  179 +
  180 +export const TYPE_VALUE_RESOLVER_MAP = {
  181 + default: {
  182 + formatter(value) {
  183 + if (!value) return '';
  184 + return '' + value;
  185 + },
  186 + parser(text) {
  187 + if (text === undefined || text === '') return null;
  188 + return text;
  189 + }
  190 + },
  191 + date: {
  192 + formatter: DATE_FORMATTER,
  193 + parser: DATE_PARSER
  194 + },
  195 + datetime: {
  196 + formatter: DATE_FORMATTER,
  197 + parser: DATE_PARSER
  198 + },
  199 + daterange: {
  200 + formatter: RANGE_FORMATTER,
  201 + parser: RANGE_PARSER
  202 + },
  203 + datetimerange: {
  204 + formatter: RANGE_FORMATTER,
  205 + parser: RANGE_PARSER
  206 + },
  207 + timerange: {
  208 + formatter: RANGE_FORMATTER,
  209 + parser: RANGE_PARSER
  210 + },
  211 + time: {
  212 + formatter: DATE_FORMATTER,
  213 + parser: DATE_PARSER
  214 + },
  215 + month: {
  216 + formatter: DATE_FORMATTER,
  217 + parser: DATE_PARSER
  218 + },
  219 + year: {
  220 + formatter: DATE_FORMATTER,
  221 + parser: DATE_PARSER
  222 + },
  223 + multiple: {
  224 + formatter: (value, format) => {
  225 + console.log(value, format);
  226 + return value.filter(Boolean).map(date => formatDate(date, format)).join(',');
  227 + },
  228 + parser: (text, format) => text.split(',').map(string => parseDate(string.trim(), format))
  229 + },
  230 + number: {
  231 + formatter(value) {
  232 + if (!value) return '';
  233 + return '' + value;
  234 + },
  235 + parser(text) {
  236 + let result = Number(text);
  237 +
  238 + if (!isNaN(text)) {
  239 + return result;
  240 + } else {
  241 + return null;
  242 + }
  243 + }
  244 + }
  245 +};
  246 +
... ...