feat: datepicker timepicker calendar support string value #718

components/_util/moment-util.js

@@ -0,0 +1,75 @@
+import interopDefault from './interopDefault';
+import * as moment from 'moment';
+import warning from './warning';
+import isNil from 'lodash/isNil';
+
+export const TimeType = {
+  validator(value) {
+    return typeof value === 'string' || isNil(value) || moment.isMoment(value);
+  },
+};
+
+export const TimesType = {
+  validator(value) {
+    if (Array.isArray(value)) {
+      return (
+        value.length === 0 ||
+        value.findIndex(val => typeof val !== 'string') === -1 ||
+        value.findIndex(val => !isNil(val) && !moment.isMoment(val)) === -1
+      );
+    }
+    return false;
+  },
+};
+
+export const TimeOrTimesType = {
+  validator(value) {
+    if (Array.isArray(value)) {
+      return (
+        value.length === 0 ||
+        value.findIndex(val => typeof val !== 'string') === -1 ||
+        value.findIndex(val => !isNil(val) && !moment.isMoment(val)) === -1
+      );
+    } else {
+      return typeof value === 'string' || isNil(value) || moment.isMoment(value);
+    }
+  },
+};
+
+export function checkValidate(componentName, value, propName, valueFormat) {
+  const values = Array.isArray(value) ? value : [value];
+  values.forEach(val => {
+    if (!val) return;
+    valueFormat &&
+      warning(
+        interopDefault(moment)(val, valueFormat).isValid(),
+        componentName,
+        `When set \`valueFormat\`, \`${propName}\` should provides invalidate string time. `,
+      );
+    !valueFormat &&
+      warning(
+        interopDefault(moment).isMoment(val) && val.isValid(),
+        componentName,
+        `\`${propName}\` provides invalidate moment time. If you want to set empty value, use \`null\` instead.`,
+      );
+  });
+}
+export const stringToMoment = (value, valueFormat) => {
+  if (Array.isArray(value)) {
+    return value.map(val =>
+      typeof val === 'string' && val ? interopDefault(moment)(val, valueFormat) : val || null,
+    );
+  } else {
+    return typeof value === 'string' && value
+      ? interopDefault(moment)(value, valueFormat)
+      : value || null;
+  }
+};
+
+export const momentToString = (value, valueFormat) => {
+  if (Array.isArray(value)) {
+    return value.map(val => (interopDefault(moment).isMoment(val) ? val.format(valueFormat) : val));
+  } else {
+    return interopDefault(moment).isMoment(value) ? value.format(valueFormat) : value;
+  }
+};

components/calendar/index.jsx

@@ -9,6 +9,7 @@ import interopDefault from '../_util/interopDefault';
 import { ConfigConsumerProps } from '../config-provider';
 import enUS from './locale/en_US';
 import Base from '../base';
+import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
 
 function noop() {
   return null;
@@ -20,12 +21,6 @@ function zerofixed(v) {
   }
   return `${v}`;
 }
-export const MomentType = {
-  type: Object,
-  validator(value) {
-    return moment.isMoment(value);
-  },
-};
 function isMomentArray(value) {
   return Array.isArray(value) && !!value.find(val => moment.isMoment(val));
 }
@@ -33,8 +28,8 @@ export const CalendarMode = PropTypes.oneOf(['month', 'year']);
 
 export const CalendarProps = () => ({
   prefixCls: PropTypes.string,
-  value: MomentType,
+  value: TimeType,
-  defaultValue: MomentType,
+  defaultValue: TimeType,
   mode: CalendarMode,
   fullscreen: PropTypes.bool,
   // dateCellRender: PropTypes.func,
@@ -47,6 +42,7 @@ export const CalendarProps = () => ({
   disabledDate: PropTypes.func,
   validRange: PropTypes.custom(isMomentArray),
   headerRender: PropTypes.func,
+  valueFormat: PropTypes.string,
 });
 
 const Calendar = {
@@ -64,20 +60,21 @@ const Calendar = {
     configProvider: { default: () => ConfigConsumerProps },
   },
   data() {
-    const value = this.value || this.defaultValue || interopDefault(moment)();
+    const { value, defaultValue, valueFormat } = this;
-    if (!interopDefault(moment).isMoment(value)) {
+    const sValue = value || defaultValue || interopDefault(moment)();
-      throw new Error('The value/defaultValue of Calendar must be a moment object, ');
+    checkValidate('Calendar', defaultValue, 'defaultValue', valueFormat);
-    }
+    checkValidate('Calendar', value, 'value', valueFormat);
     this._sPrefixCls = undefined;
     return {
-      sValue: value,
+      sValue: stringToMoment(sValue, valueFormat),
       sMode: this.mode || 'month',
     };
   },
   watch: {
     value(val) {
+      checkValidate('Calendar', val, 'value', this.valueFormat);
       this.setState({
-        sValue: val,
+        sValue: stringToMoment(val, this.valueFormat),
       });
     },
     mode(val) {
@@ -95,9 +92,10 @@ const Calendar = {
       this.onPanelChange(this.sValue, mode);
     },
     onPanelChange(value, mode) {
-      this.$emit('panelChange', value, mode);
+      const val = this.valueFormat ? momentToString(value, this.valueFormat) : value;
+      this.$emit('panelChange', val, mode);
       if (value !== this.sValue) {
-        this.$emit('change', value);
+        this.$emit('change', val);
       }
     },
 
@@ -105,8 +103,8 @@ const Calendar = {
       this.setValue(value, 'select');
     },
     setValue(value, way) {
-      const prevValue = this.value || this.sValue;
+      const prevValue = this.value ? stringToMoment(this.value, this.valueFormat) : this.sValue;
-      const { sMode: mode } = this;
+      const { sMode: mode, valueFormat } = this;
       if (!hasProp(this, 'value')) {
         this.setState({ sValue: value });
       }
@@ -114,7 +112,7 @@ const Calendar = {
         if (prevValue && prevValue.month() !== value.month()) {
           this.onPanelChange(value, mode);
         }
-        this.$emit('select', value);
+        this.$emit('select', valueFormat ? momentToString(value, valueFormat) : value);
       } else if (way === 'changePanel') {
         this.onPanelChange(value, mode);
       }

components/date-picker/interface.js

@@ -1,13 +1,6 @@
-import * as moment from 'moment';
 // import { TimePickerProps } from '../time-picker'
 import PropTypes from '../_util/vue-types';
-
+import { TimesType, TimeType } from '../_util/moment-util';
-export const MomentType = {
-  type: Object,
-  validator(value) {
-    return value === undefined || moment.isMoment(value);
-  },
-};
 
 export const PickerProps = () => ({
   name: PropTypes.string,
@@ -37,12 +30,13 @@ export const PickerProps = () => ({
   tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   align: PropTypes.object.def(() => ({})),
   inputReadOnly: PropTypes.bool,
+  valueFormat: PropTypes.string,
 });
 
 export const SinglePickerProps = () => ({
-  value: MomentType,
+  value: TimeType,
-  defaultValue: MomentType,
+  defaultValue: TimeType,
-  defaultPickerValue: MomentType,
+  defaultPickerValue: TimeType,
   renderExtraFooter: PropTypes.any,
   placeholder: PropTypes.string,
   // onChange?: (date: moment.Moment, dateString: string) => void;
@@ -65,27 +59,17 @@ export const MonthPickerProps = () => ({
   placeholder: PropTypes.string,
   monthCellContentRender: PropTypes.func,
 });
-function isMomentArray(value) {
+// export const RangePickerPresetRange = PropTypes.oneOfType([TimesType, PropTypes.func])
-  if (Array.isArray(value)) {
-    return (
-      value.length === 0 || value.findIndex(val => val === undefined || moment.isMoment(val)) !== -1
-    );
-  }
-  return false;
-}
-
-export const RangePickerValue = PropTypes.custom(isMomentArray);
-// export const RangePickerPresetRange = PropTypes.oneOfType([RangePickerValue, PropTypes.func])
 
 export const RangePickerProps = () => ({
   ...PickerProps(),
   tagPrefixCls: PropTypes.string,
-  value: RangePickerValue,
+  value: TimesType,
-  defaultValue: RangePickerValue,
+  defaultValue: TimesType,
-  defaultPickerValue: RangePickerValue,
+  defaultPickerValue: TimesType,
   timePicker: PropTypes.any,
-  // onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
+  // onChange?: (dates: TimesType, dateStrings: [string, string]) => void;
-  // onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void;
+  // onCalendarChange?: (dates: TimesType, dateStrings: [string, string]) => void;
   // onOk?: (selectedTime: moment.Moment) => void;
   showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
   ranges: PropTypes.object,
@@ -95,7 +79,7 @@ export const RangePickerProps = () => ({
   disabledTime: PropTypes.func,
   showToday: PropTypes.bool,
   renderExtraFooter: PropTypes.any,
-  // onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
+  // onPanelChange?: (value?: TimesType, mode?: string | string[]) => void;
 });
 
 export const WeekPickerProps = () => ({

components/date-picker/wrapPicker.js

@@ -1,26 +1,11 @@
 import TimePickerPanel from '../vc-time-picker/Panel';
 import classNames from 'classnames';
-import * as moment from 'moment';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { generateShowHourMinuteSecond } from '../time-picker';
 import enUS from './locale/en_US';
-import interopDefault from '../_util/interopDefault';
 import { getOptionProps, initDefaultProps, getListeners } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-import warning from '../_util/warning';
+import { checkValidate, stringToMoment, momentToString } from '../_util/moment-util';
-
-function checkValidate(value, propName) {
-  const values = Array.isArray(value) ? value : [value];
-  values.forEach(val => {
-    if (!val) return;
-
-    warning(
-      !interopDefault(moment).isMoment(val) || val.isValid(),
-      'DatePicker',
-      `\`${propName}\` provides invalidate moment time. If you want to set empty value, use \`null\` instead.`,
-    );
-  });
-}
 
 const DEFAULT_FORMAT = {
   date: 'YYYY-MM-DD',
@@ -74,9 +59,9 @@ export default function wrapPicker(Picker, props, pickerType) {
       };
     },
     mounted() {
-      const { autoFocus, disabled, value, defaultValue } = this;
+      const { autoFocus, disabled, value, defaultValue, valueFormat } = this;
-      checkValidate(defaultValue, 'defaultValue');
+      checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
-      checkValidate(value, 'value');
+      checkValidate('DatePicker', value, 'value', valueFormat);
       if (autoFocus && !disabled) {
         this.$nextTick(() => {
           this.focus();
@@ -85,7 +70,7 @@ export default function wrapPicker(Picker, props, pickerType) {
     },
     watch: {
       value(val) {
-        checkValidate(val, 'value');
+        checkValidate('DatePicker', val, 'value', this.valueFormat);
       },
     },
     methods: {
@@ -123,7 +108,13 @@ export default function wrapPicker(Picker, props, pickerType) {
       handleMouseLeave(e) {
         this.$emit('mouseleave', e);
       },
-
+      handleChange(date, dateString) {
+        this.$emit(
+          'change',
+          this.valueFormat ? momentToString(date, this.valueFormat) : date,
+          dateString,
+        );
+      },
       focus() {
         this.$refs.picker.focus();
       },
@@ -132,8 +123,21 @@ export default function wrapPicker(Picker, props, pickerType) {
         this.$refs.picker.blur();
       },
 
+      transformValue(props) {
+        if ('value' in props) {
+          props.value = stringToMoment(props.value, this.valueFormat);
+        }
+        if ('defaultValue' in props) {
+          props.defaultValue = stringToMoment(props.defaultValue, this.valueFormat);
+        }
+        if ('defaultPickerValue' in props) {
+          props.defaultPickerValue = stringToMoment(props.defaultPickerValue, this.valueFormat);
+        }
+      },
+
       renderPicker(locale, localeCode) {
         const props = getOptionProps(this);
+        this.transformValue(props);
         const {
           prefixCls: customizePrefixCls,
           inputPrefixCls: customizeInputPrefixCls,
@@ -203,6 +207,7 @@ export default function wrapPicker(Picker, props, pickerType) {
             blur: this.handleBlur,
             mouseenter: this.handleMouseEnter,
             mouseleave: this.handleMouseLeave,
+            change: this.handleChange,
           },
           ref: 'picker',
           scopedSlots: this.$scopedSlots || {},

components/time-picker/index.jsx

@@ -1,4 +1,3 @@
-import * as moment from 'moment';
 import omit from 'omit.js';
 import VcTimePicker from '../vc-time-picker';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
@@ -7,7 +6,6 @@ import PropTypes from '../_util/vue-types';
 import warning from '../_util/warning';
 import Icon from '../icon';
 import enUS from './locale/en_US';
-import interopDefault from '../_util/interopDefault';
 import {
   initDefaultProps,
   hasProp,
@@ -19,6 +17,12 @@ import {
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
+import {
+  checkValidate,
+  stringToMoment,
+  momentToString,
+  TimeOrTimesType,
+} from '../_util/moment-util';
 
 export function generateShowHourMinuteSecond(format) {
   // Ref: http://momentjs.com/docs/#/parsing/string-format/
@@ -28,20 +32,11 @@ export function generateShowHourMinuteSecond(format) {
     showSecond: format.indexOf('s') > -1,
   };
 }
-function isMoment(value) {
+
-  if (Array.isArray(value)) {
-    return (
-      value.length === 0 || value.findIndex(val => val === undefined || moment.isMoment(val)) !== -1
-    );
-  } else {
-    return value === undefined || moment.isMoment(value);
-  }
-}
-const MomentType = PropTypes.custom(isMoment);
 export const TimePickerProps = () => ({
   size: PropTypes.oneOf(['large', 'default', 'small']),
-  value: MomentType,
+  value: TimeOrTimesType,
-  defaultValue: MomentType,
+  defaultValue: TimeOrTimesType,
   open: PropTypes.bool,
   format: PropTypes.string,
   disabled: PropTypes.bool,
@@ -72,6 +67,7 @@ export const TimePickerProps = () => ({
   addon: PropTypes.any,
   clearIcon: PropTypes.any,
   locale: PropTypes.object,
+  valueFormat: PropTypes.string,
 });
 
 const TimePicker = {
@@ -104,22 +100,23 @@ const TimePicker = {
     configProvider: { default: () => ConfigConsumerProps },
   },
   data() {
-    const value = this.value || this.defaultValue;
+    const { value, defaultValue, valueFormat } = this;
-    if (value && !interopDefault(moment).isMoment(value)) {
+
-      throw new Error('The value/defaultValue of TimePicker must be a moment object, ');
+    checkValidate('TimePicker', defaultValue, 'defaultValue', valueFormat);
-    }
+    checkValidate('TimePicker', value, 'value', valueFormat);
     warning(
       !hasProp(this, 'allowEmpty'),
       'TimePicker',
       '`allowEmpty` is deprecated. Please use `allowClear` instead.',
     );
     return {
-      sValue: value,
+      sValue: stringToMoment(value || defaultValue, valueFormat),
     };
   },
   watch: {
     value(val) {
-      this.setState({ sValue: val });
+      checkValidate('TimePicker', val, 'value', this.valueFormat);
+      this.setState({ sValue: stringToMoment(val, this.valueFormat) });
     },
   },
   methods: {
@@ -155,7 +152,11 @@ const TimePicker = {
         this.setState({ sValue: value });
       }
       const { format = 'HH:mm:ss' } = this;
-      this.$emit('change', value, (value && value.format(format)) || '');
+      this.$emit(
+        'change',
+        this.valueFormat ? momentToString(value, this.valueFormat) : value,
+        (value && value.format(format)) || '',
+      );
     },
 
     handleOpenClose({ open }) {

components/vc-calendar/src/Picker.jsx

@@ -7,17 +7,18 @@ import KeyCode from '../../_util/KeyCode';
 import placements from './picker/placements';
 import Trigger from '../../vc-trigger';
 import moment from 'moment';
-import { setTimeout } from 'timers';
+import isNil from 'lodash/isNil';
-function isMoment(value) {
+const TimeType = {
-  if (Array.isArray(value)) {
+  validator(value) {
-    return (
+    if (Array.isArray(value)) {
-      value.length === 0 || value.findIndex(val => val === undefined || moment.isMoment(val)) !== -1
+      return (
-    );
+        value.length === 0 || value.findIndex(val => !isNil(val) && !moment.isMoment(val)) === -1
-  } else {
+      );
-    return value === undefined || moment.isMoment(value);
+    } else {
-  }
+      return isNil(value) || moment.isMoment(value);
-}
+    }
-const MomentType = PropTypes.custom(isMoment);
+  },
+};
 const Picker = {
   name: 'Picker',
   props: {
@@ -34,8 +35,8 @@ const Picker = {
     defaultOpen: PropTypes.bool.def(false),
     prefixCls: PropTypes.string.def('rc-calendar-picker'),
     placement: PropTypes.any.def('bottomLeft'),
-    value: PropTypes.oneOfType([MomentType, PropTypes.arrayOf(MomentType)]),
+    value: TimeType,
-    defaultValue: PropTypes.oneOfType([MomentType, PropTypes.arrayOf(MomentType)]),
+    defaultValue: TimeType,
     align: PropTypes.object.def(() => ({})),
     dropdownClassName: PropTypes.string,
     dateRender: PropTypes.func,

types/calendar.d.ts

@@ -31,7 +31,7 @@ export declare class Calendar extends AntdComponent {
    * @default default date
    * @type Moment
    */
-  defaultValue: Moment;
+  defaultValue: Moment | string;
 
   /**
    * Function that specifies the dates that cannot be selected
@@ -84,5 +84,6 @@ export declare class Calendar extends AntdComponent {
    * @default current date
    * @type Moment
    */
-  value: Moment;
+  value: Moment | string;
+  valueFormat: string;
 }

types/date-picker/common.d.ts

@@ -88,4 +88,5 @@ export declare class DatepickerCommon extends AntdComponent {
   suffixIcon: any;
 
   inputReadOnly: boolean;
+  valueFormat: string;
 }

types/date-picker/date-picker.d.ts

@@ -19,7 +19,7 @@ export declare class DatePicker extends DatepickerCommon {
    * @default undefined
    * @type Moment
    */
-  defaultValue: Moment;
+  defaultValue: Moment | string;
 
   /**
    * Default Picker Value
@@ -27,7 +27,7 @@ export declare class DatePicker extends DatepickerCommon {
    * @default undefined
    * @type Moment
    */
-  defaultPickerValue: Moment;
+  defaultPickerValue: Moment | string;
 
   /**
    * Disabled Time
@@ -77,5 +77,5 @@ export declare class DatePicker extends DatepickerCommon {
    * @default undefined
    * @type Moment
    */
-  value: Moment;
+  value: Moment | string;
 }

types/date-picker/month-picker.d.ts

@@ -10,13 +10,13 @@ export declare class MonthPicker extends DatepickerCommon {
    * to set default date
    * @type Moment
    */
-  defaultValue: Moment;
+  defaultValue: Moment | string;
 
   /**
    * to set default picker date
    * @type Moment
    */
-  defaultPickerValue: Moment;
+  defaultPickerValue: Moment | string;
 
   /**
    * to set the date format, When an array is provided, all values are used for parsing and first value for display. refer to moment.js
@@ -42,5 +42,5 @@ export declare class MonthPicker extends DatepickerCommon {
    * to set date
    * @type Moment
    */
-  value: Moment;
+  value: Moment | string;
 }

types/date-picker/range-picker.d.ts

@@ -10,13 +10,13 @@ export declare class RangePicker extends DatepickerCommon {
    * to set default date
    * @type [Moment, Moment]
    */
-  defaultValue: [Moment, Moment];
+  defaultValue: [Moment, Moment] | [string, string];
 
   /**
    * to set default picker date
    * @type [Moment, Moment]
    */
-  defaultPickerValue: [Moment, Moment];
+  defaultPickerValue: [Moment, Moment] | [string, string];
 
   /**
    * to specify the time that cannot be selected
@@ -56,5 +56,5 @@ export declare class RangePicker extends DatepickerCommon {
    * to set date
    * @type [Moment, Moment]
    */
-  value: [Moment, Moment];
+  value: [Moment, Moment] | [string, string];
 }

types/date-picker/week-picker.d.ts

@@ -10,13 +10,13 @@ export declare class WeekPicker extends DatepickerCommon {
    * to set default date
    * @type Moment
    */
-  defaultValue: Moment;
+  defaultValue: Moment | string;
 
   /**
    * to set default picker date
    * @type Moment
    */
-  defaultPickerValue: Moment;
+  defaultPickerValue: Moment | string;
 
   /**
    * to set the date format, refer to moment.js
@@ -30,5 +30,5 @@ export declare class WeekPicker extends DatepickerCommon {
    * to set date
    * @type Moment
    */
-  value: Moment;
+  value: Moment | string;
 }

types/time-picker.d.ts

@@ -44,7 +44,7 @@ export declare class TimePicker extends AntdComponent {
    * to set default time
    * @type Moment
    */
-  defaultValue: Moment;
+  defaultValue: Moment | string;
 
   /**
    * determine whether the TimePicker is disabled
@@ -158,7 +158,7 @@ export declare class TimePicker extends AntdComponent {
    * to set time
    * @type Moment
    */
-  value: Moment;
+  value: Moment | string;
 
   /**
    * Time picker size