feat: date picker custom format (#2276)

* Add function support for format

* Add function proptype support for format in date-picker

* Handle format not returning a string

* Add function support to formatDate in vc-calendar

* Add PropType.func to format props

Co-authored-by: Herbert Lin <[email protected]>

Author: XcrossD

components/date-picker/interface.js

@@ -7,7 +7,7 @@ export const PickerProps = () => ({
   transitionName: PropTypes.string,
   prefixCls: PropTypes.string,
   inputPrefixCls: PropTypes.string,
-  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
   disabled: PropTypes.bool,
   allowClear: PropTypes.bool,
   suffixIcon: PropTypes.any,

components/date-picker/utils.js

@@ -1,9 +1,21 @@
 export function formatDate(value, format) {
+  const isFunction = function(obj) {
+    return !!(obj && obj.constructor && obj.call && obj.apply);
+  };
+  
   if (!value) {
     return '';
   }
   if (Array.isArray(format)) {
     format = format[0];
   }
+  if (isFunction(format)) {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
   return value.format(format);
 }

components/vc-calendar/src/Calendar.jsx

@@ -25,7 +25,7 @@ const Calendar = {
   name: 'Calendar',
   props: {
     locale: PropTypes.object.def(enUs),
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     // prefixCls: PropTypes.string,

components/vc-calendar/src/FullCalendar.jsx

@@ -12,7 +12,7 @@ const FullCalendar = {
   name: 'FullCalendar',
   props: {
     locale: PropTypes.object.def(enUs),
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     defaultType: PropTypes.string.def('date'),

components/vc-calendar/src/Picker.jsx

@@ -25,7 +25,7 @@ const Picker = {
     animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     disabled: PropTypes.bool,
     transitionName: PropTypes.string,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     // onChange: PropTypes.func,
     // onOpenChange: PropTypes.func,
     children: PropTypes.func,

components/vc-calendar/src/RangeCalendar.jsx

@@ -110,7 +110,7 @@ const RangeCalendar = {
     // onValueChange: PropTypes.func,
     // onHoverChange: PropTypes.func,
     // onPanelChange: PropTypes.func,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     // onClear: PropTypes.func,
     type: PropTypes.any.def('both'),
     disabledDate: PropTypes.func,

components/vc-calendar/src/date/DateInput.jsx

@@ -16,7 +16,7 @@ const DateInput = {
     timePicker: PropTypes.object,
     value: PropTypes.object,
     disabledTime: PropTypes.any,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     locale: PropTypes.object,
     disabledDate: PropTypes.func,
     // onChange: PropTypes.func,

components/vc-calendar/src/util/index.js

@@ -92,6 +92,10 @@ export function isAllowedDate(value, disabledDate, disabledTime) {
 }
 
 export function formatDate(value, format) {
+  const isFunction = function(obj) {
+    return !!(obj && obj.constructor && obj.call && obj.apply);
+  };
+  
   if (!value) {
     return '';
   }
@@ -100,5 +104,14 @@ export function formatDate(value, format) {
     format = format[0];
   }
 
+  if (isFunction(format)) {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
+
   return value.format(format);
 }