Apply suggestions from code review

Co-authored-by: Stefan Dirix <sdirix@eclipsesource.com>

content/docs/date-time-picker.mdx

@@ -1,6 +1,6 @@
 ---
 id: date-time-picker
-title: Date and Time Picker
+title: Date and Time Pickers
 description: Configure Date and Time Picker
 ---
 
@@ -21,24 +21,29 @@ import {
   DateTimeOptionTable
 } from '../../src/components/docs/date-time-picker';
 
-JSON Forms supports Time and Date Picker as well as a Date-Time Picker, that combines both functionalities. Options for customizing the Date/Time Picker are available for the React Material Renderer.
+JSON Forms supports JSON Schema's "date", "time" and "date-time" formats. Additional options to customize the "date", "time" and "date-time" pickers are offered for the React Material renderer set.
 
 ## Time Picker
-There are two ways to integrate the Time Picker. It can be embedded via the schema or the UI schema. The Time Picker supports a variety of options, that can be configured in the UI schema.
+The time picker will be used when `format: "time"` is specified for a string property in the JSON Schema. Alternatively `format: "time"` can also be specified via the UI Schema options.
 
 ### Schema Based
-An Input Field will be displayed as Time Picker by setting the format of the corresponding field to “time” in the schema.
+A control will be rendered as a time picker when the format of the corresponding string property is set to "time" in the JSON Schema.
 <TimeSchema />
 
 ### UI Schema Based
-An Input Field will also be displayed as Time Picker by setting the property "format" to "time" in the options in the UI schema.
+A string control will also be rendered as a time picker by setting the property "format" to "time" in the UI Schema options.
 <TimeUiSchema />
 
 ### Options
-An overview over the options can be seen in the example and the table below. Please note, that these options are only available for the Material Ui Renderer Set.
-<TimeUiOptionSchema/>
+The React Material renderer set offers additional UI Schema options to customize the appearance of the time picker text input as well as the picker itself.
 <TimeOptionTable />
 
+The following example showcases some of the options.
+The text input is configured to only show the full hours while both hours and minutes are saved into the data.
+The picker presents itself in `am/pm` format.
+<TimeUiOptionSchema/>
+
+
 ## Date Picker
 There are two ways to integrate the Date Picker. It can be embedded via the schema or the UI schema. The Date Picker supports a variety of options, that can be configured in the UI schema.
 

src/components/docs/date-time-picker.js

@@ -295,27 +295,28 @@ export const TimeOptionTable = () => (
       <TableBody>
         <TableRow>
           <TableCell>ampm</TableCell>
-          <TableCell>If set to true, 12-hour format is used, otherwise 24-hour time format is used.</TableCell>
+          <TableCell>If set to true, the time picker modal is presented in 12-hour format, otherwise the 24-hour format is used</TableCell>
         </TableRow>
         <TableRow>
           <TableCell>timeFormat</TableCell>
-          <TableCell>Defines the used format</TableCell>
+          <TableCell>The time format used for the text input, can be different from the save format</TableCell>
         </TableRow>
         <TableRow>
           <TableCell>timeSaveFormat</TableCell>
-          <TableCell>Defines the save format of the time</TableCell>
+          <TableCell>The format in which the time is saved in the data. Note that if you specify a format which is incompatible with JSON Schema's "time" format then
+           you should use the UI Schema based invocation, otherwise the control will be marked with an error.</TableCell>
         </TableRow>
         <TableRow>
           <TableCell>clearLabel</TableCell>
-          <TableCell>Label of the clear-input option</TableCell>
+          <TableCell>Label of the "clear" action in the time picker modal</TableCell>
         </TableRow>
         <TableRow>
           <TableCell>cancelLabel</TableCell>
-          <TableCell>Label of the cancle option</TableCell>
+          <TableCell>Label of the "cancel" action in the time picker modal</TableCell>
         </TableRow>
         <TableRow>
           <TableCell>okLabel</TableCell>
-          <TableCell>Label of the confirm option</TableCell>
+          <TableCell>Label of the "confirm" action in the time picker modal</TableCell>
         </TableRow>
       </TableBody>
     </Table>