Merge pull request #165 from data-driven-forms/fix-placeholder-date-pf3

fix(pf3): Date time picker placeholder.

Author: martinpovolny

packages/pf3-component-mapper/demo/demo-schemas/sandbox.js

@@ -429,6 +429,7 @@ const output = {
                   label: 'Datepicker with past days',
                   title: 'Datepicker with past days',
                   component: components.DATE_PICKER,
+                  variant: 'date-time',
                 },
               ],
               component: components.SUB_FORM,

packages/pf3-component-mapper/src/form-fields/date-time-picker/date-time-picker.js

@@ -7,6 +7,12 @@ import { createDisabledDays } from './helpers';
 
 import 'react-day-picker/lib/style.css';
 
+const getPlaceholder = (variant, placeholder) => placeholder
+  ? placeholder
+  : variant === 'date'
+    ? 'Click in this input to select date'
+    : 'Click in this input to select date and time';
+
 const selectValidDate = (newDate, disabledDays) => {
   const { after, before } = disabledDays.find(item => typeof item === 'object' && !(item instanceof Date)) || {};
   if (before && newDate < before) {
@@ -110,12 +116,13 @@ export class DateTimePicker extends React.Component {
       disabledDays,
       isClearable,
     } = this.props;
+    const inputPlaceholder = getPlaceholder(variant, placeholder);
     const cleanDisabledDays = createDisabledDays(disabledDays);
     return (
       <div style={{ position: 'relative' }} ref={ this.wrapperRef } >
         <PickerInput
           handleOverlayToggle={ this.handleOverlayToggle }
-          placeholder={ placeholder }
+          placeholder={ inputPlaceholder }
           selectedDay={ selectedDay }
           variant={ variant }
           locale={ locale }
@@ -171,7 +178,6 @@ DateTimePicker.propTypes = {
 DateTimePicker.defaultProps = {
   variant: 'date',
   locale: 'en',
-  placeholder: 'Click in this input to select date',
   showTodayButton: true,
   todayButtonLabel: 'Today',
   closeOnDaySelect: false,