Fix #3381: Calendar allow override of parse/format time

api-generator/components/calendar.js

@@ -359,6 +359,12 @@ const CalendarProps = [
         default: 'null',
         description: 'Function that gets a date information and returns the cell content in datepicker.'
     },
+    {
+        name: 'decadeTempate',
+        type: 'function',
+        default: 'null',
+        description: 'Function that gets a navigator information and returns the decade selections in the panel.'
+    },
     {
         name: 'monthNavigatorTemplate',
         type: 'function',
@@ -369,13 +375,25 @@ const CalendarProps = [
         name: 'yearNavigatorTemplate',
         type: 'function',
         default: 'null',
-        description: 'Function that gets a navigator information and returns the novigator in header.'
+        description: 'Function that gets a navigator information and returns the navigator in header.'
     },
     {
         name: 'transitionOptions',
         type: 'object',
         default: 'null',
         description: 'The properties of <a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">CSSTransition</a> can be customized, except for "nodeRef" and "in" properties.'
+    },
+    {
+        name: 'formatDateTime',
+        type: 'function',
+        default: 'null',
+        description: 'Function for overriding default behavior that formats a Date to the string representation.'
+    },
+    {
+        name: 'parseDateTime',
+        type: 'function',
+        default: 'null',
+        description: 'Function for overriding default behavior that parses text into the Date.'
     }
 ];
 

components/doc/calendar/index.js

@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const CalendarDoc = memo(() => {
     const sources = {
@@ -1221,6 +1221,12 @@ const monthNavigatorTemplate = (options) => {
                                     <td>null</td>
                                     <td>Function that gets a date information and returns the cell content in datepicker.</td>
                                 </tr>
+                                <tr>
+                                    <td>decadeTempate</td>
+                                    <td>function</td>
+                                    <td>null</td>
+                                    <td>Function that gets a navigator information and returns the decade selections in the panel.</td>
+                                </tr>
                                 <tr>
                                     <td>monthNavigatorTemplate</td>
                                     <td>function</td>
@@ -1233,6 +1239,18 @@ const monthNavigatorTemplate = (options) => {
                                     <td>null</td>
                                     <td>Function that gets a navigator information and returns the novigator in header.</td>
                                 </tr>
+                                <tr>
+                                    <td>formatDateTime</td>
+                                    <td>function</td>
+                                    <td>null</td>
+                                    <td>Function for overriding default behavior that formats a Date to the string representation.</td>
+                                </tr>
+                                <tr>
+                                    <td>parseDateTime</td>
+                                    <td>function</td>
+                                    <td>null</td>
+                                    <td>Function for overriding default behavior that parses text into the Date.</td>
+                                </tr>
                                 <tr>
                                     <td>transitionOptions</td>
                                     <td>object</td>

components/lib/calendar/Calendar.js

@@ -1997,6 +1997,10 @@ export const Calendar = React.memo(
         };
 
         const formatDateTime = (date) => {
+            if (props.formatDateTime) {
+                return props.formatDateTime(date);
+            }
+
             let formattedValue = null;
 
             if (date) {
@@ -2173,6 +2177,10 @@ export const Calendar = React.memo(
         };
 
         const parseDateTime = (text) => {
+            if (props.parseDateTime) {
+                return props.parseDateTime(text);
+            }
+
             let date;
             let parts = text.split(' ');
 

components/lib/calendar/calendar.d.ts

@@ -137,6 +137,8 @@ export interface CalendarProps {
     visible?: boolean;
     yearNavigator?: boolean;
     yearRange?: string;
+    formatDateTime?(date: Date): string;
+    parseDateTime?(text: string): Date;
     dateTemplate?(e: CalendarDateTemplateParams): React.ReactNode;
     decadeTempate?(yearValues: number[]): React.ReactNode;
     footerTemplate?(): React.ReactNode;