Merge branch 'PrasadKasireddy-PrasadKasireddy-patch-1' into dev

Author: estruyf

docs/documentation/docs/controls/DateTimePicker.md

@@ -68,6 +68,7 @@ The `DateTimePicker` control can be configured with the following properties:
 | showSeconds | boolean | no | Specifies, if seconds dropdown should be shown, defaults to false. |
 | timeDisplayControlType | TimeDisplayControlType | no | Specifies what type of control to use when rendering time part. |
 | showLabels | boolean | no | Specifies if labels in front of date and time parts should be rendered. |
+| placeholder | string | no | Placeholder text for the DatePicker. |
 
 Enum `TimeDisplayControlType`
 

src/controls/dateTimePicker/DateTimePicker.tsx

@@ -204,6 +204,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
       value = this.state.day,
       strings: dateStrings = new DateTimePickerStrings(), // Defines the DatePicker control labels
       timeDisplayControlType,
+      placeholder,
       showLabels
     } = this.props;
 
@@ -291,6 +292,7 @@ export class DateTimePicker extends React.Component<IDateTimePickerProps, IDateT
                 showGoToToday={showGoToToday}
                 showMonthPickerAsOverlay={showMonthPickerAsOverlay}
                 showWeekNumbers={showWeekNumbers}
+                placeholder={placeholder}
               />
             </div>
           </div>

src/controls/dateTimePicker/IDateTimePickerProps.ts

@@ -102,4 +102,9 @@ export interface IDateTimePickerProps {
    * Specify if labels in front of date and time parts should be rendered. True by default
    */
   showLabels?: boolean;
+  
+  /**
+   * Placeholder text for the DatePicker
+   */
+  placeholder?: string;
 }

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -450,7 +450,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           } />
 
 
-        <DateTimePicker label="DateTime Picker (unspecified = date and time)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} />
+        <DateTimePicker label="DateTime Picker (unspecified = date and time)" isMonthPickerVisible={false} showSeconds={false} onChange={(value) => console.log("DateTimePicker value:", value)} placeholder="Pick a date" />
         <DateTimePicker label="DateTime Picker 12-hour clock" showSeconds={true} onChange={(value) => console.log("DateTimePicker value:", value)} />
         <DateTimePicker label="DateTime Picker 24-hour clock" showSeconds={true} timeConvention={TimeConvention.Hours24} onChange={(value) => console.log("DateTimePicker value:", value)} />
         <DateTimePicker label="DateTime Picker no seconds" value={new Date()} onChange={(value) => console.log("DateTimePicker value:", value)} />