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 <herbert.lin.7@gmail.com>

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);
 }