Merge pull request #31 from DHTMLX/next

[update] date formatting info

docs/api/config/js_eventcalendar_editorshape_config.md

@@ -74,6 +74,7 @@ editorShape?: [
 
         // for a "date" type only
         time?: boolean,
+        format?: string,
 
         // for a "files" type only
         uploadURL?: string,
@@ -183,6 +184,12 @@ For a **colorSchema** type only. Unless you specify *colors* for the **colorSche
 #### - Parameters for a "date" type
 
 - `time` - (optional) - enables/disables a *timepicker* (besides a *datepicker*)
+- `format` - (optional) - defines a date format for an editor field. For more information, refer to the [**Configuring date format for editor fields**
+](/howtos/#configuring-date-format-for-editor-fields)
+
+:::tip
+Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
+:::
 
 #### - Parameters for a "files" type
 

docs/guides/localization.md

@@ -413,9 +413,11 @@ en.calendar.timeFormat = 24;
 ~~~
 
 :::tip
-Refer to the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information.
+Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
 :::
 
+To get more information on how to specify a custom date format for editor fields, refer to the [**Configuring date format for editor fields**](/howtos/#configuring-date-format-for-editor-fields) section.
+
 ## Example
 
 In this snippet you can see how to switch between the *EN*, *DE* and *RU* locales:

docs/howtos.md

@@ -107,6 +107,47 @@ In this section you can find out how to work with an events editor
 | [Configuring an editor appearance](api/config/js_eventcalendar_editorshape_config.md) | Learn how to configure an editor appearance                         |
 | [Updating editor settings](api/methods/js_eventcalendar_setconfig_method.md) | Learn how to update editor settings in a runtime                             |
 
+### Configuring date format for editor fields
+
+You can specify a custom date format for editor fields via the [`editorShape.config.format`](/api/config/js_eventcalendar_editorshape_config/#--parameters-for-a-date-type) property:
+
+![Event Calendar Date Formar](assets/006_date_format.png)
+
+~~~jsx {6,15,24}
+const editorShape = [
+    {
+        type: "date",
+        key: "start_date",
+        config:{
+            format: "%d/%m/%Y", // you can specify any other format 
+        },
+        label: "Start date",
+        time: true
+    },
+    {
+        type: "date",
+        key: "end_date",
+        config:{
+            format: "%d/%m/%Y", // you can specify any other format 
+        },
+        label: "End date",
+        time: true
+    },
+    // other editor fields
+];
+
+new eventCalendar.EventCalendar("#root", {
+    editorShape,
+    // other configuration properties
+});
+~~~
+
+:::tip
+Explore the [**Format**](https://date-fns.org/v3.3.1/docs/format) topic for more information about available date formats!
+:::
+
+To get more information on how to configure the time and date format in the Event Calendar, refer to the [**Time and Date format**](/guides/localization/#time-and-date-format) section.
+
 ## How to work with inner events
 
 | Topic                                                                          | Description                                               |
@@ -173,4 +214,4 @@ The ***!important*** directive is required for this style to work!
 
 :::info
 You can also leave your questions in the comments below!
-:::
+:::