Add support for placeholder props

README.md

@@ -90,6 +90,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |clearAriaLabel|`aria-label` for the clear button.|n/a|`"Clear value"`|
 |clearIcon|Content of the clear button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
 |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
+|dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
 |disabled|Whether the date range picker should be disabled.|`false`|`true`|
 |disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
 |format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`.|n/a|`"y-MM-dd"`|
@@ -100,6 +101,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.|n/a|Date: `new Date()`|
 |minDetail|The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`.|`"century"`|`"decade"`|
 |monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
+|monthPlaceholder|`placeholder` for the month input.|`"--"`|`"mm"`|
 |name|Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively.|`"daterange"`|`"myCustomName"`|
 |nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
 |onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
@@ -109,6 +111,7 @@ Displays an input field complete with custom inputs, native input, and a calenda
 |showLeadingZeros|Whether leading zeros should be rendered in date inputs.|`false`|`true`|
 |value|Input value.|n/a|<ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul>|
 |yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
+|yearPlaceholder|`aria-label` for the year input.|`"----"`|`"yyyy"`|
 
 ### Calendar
 

package.json

@@ -45,7 +45,7 @@
     "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0",
     "react-calendar": "^2.18.0",
-    "react-date-picker": "^7.7.0",
+    "react-date-picker": "^7.8.0",
     "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4"
   },

src/DateRangePicker.jsx

@@ -132,6 +132,7 @@ export default class DateRangePicker extends PureComponent {
       clearAriaLabel,
       clearIcon,
       dayAriaLabel,
+      dayPlaceholder,
       disableCalendar,
       disabled,
       format,
@@ -140,12 +141,14 @@ export default class DateRangePicker extends PureComponent {
       maxDetail,
       minDate,
       monthAriaLabel,
+      monthPlaceholder,
       name,
       nativeInputAriaLabel,
       required,
       showLeadingZeros,
       value,
       yearAriaLabel,
+      yearPlaceholder,
     } = this.props;
     const { isOpen } = this.state;
 
@@ -158,8 +161,15 @@ export default class DateRangePicker extends PureComponent {
       yearAriaLabel,
     };
 
+    const placeholderProps = {
+      dayPlaceholder,
+      monthPlaceholder,
+      yearPlaceholder,
+    };
+
     const commonProps = {
       ...ariaLabelProps,
+      ...placeholderProps,
       className: `${baseClassName}__inputGroup`,
       disabled,
       format,
@@ -338,6 +348,7 @@ DateRangePicker.propTypes = {
   clearAriaLabel: PropTypes.string,
   clearIcon: PropTypes.node,
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,
   disabled: PropTypes.bool,
   format: PropTypes.string,
@@ -347,6 +358,7 @@ DateRangePicker.propTypes = {
   maxDetail: PropTypes.oneOf(allViews),
   minDate: isMinDate,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
   nativeInputAriaLabel: PropTypes.string,
   onCalendarClose: PropTypes.func,
@@ -361,6 +373,7 @@ DateRangePicker.propTypes = {
     PropTypes.arrayOf(isValue),
   ]),
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DateRangePicker);

src/__tests__/DateRangePicker.jsx

@@ -73,6 +73,27 @@ describe('DateRangePicker', () => {
     expect(dateInput.at(1).prop('yearAriaLabel')).toBe(ariaLabelProps.yearAriaLabel);
   });
 
+  it('passes placeholder props to DateInput components', () => {
+    const placeholderProps = {
+      dayPlaceholder: 'dd',
+      monthPlaceholder: 'mm',
+      yearPlaceholder: 'yyyy',
+    };
+
+    const component = mount(
+      <DateRangePicker {...placeholderProps} />
+    );
+
+    const dateInput = component.find('DateInput');
+
+    expect(dateInput.at(0).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateInput.at(0).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateInput.at(0).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+    expect(dateInput.at(1).prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateInput.at(1).prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateInput.at(1).prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+  });
+
   describe('passes value to DateInput components', () => {
     it('passes single value to DateInput components', () => {
       const value = new Date(2019, 0, 1);

test/Test.jsx

@@ -24,6 +24,12 @@ const ariaLabelProps = {
   yearAriaLabel: 'Year',
 };
 
+const placeholderProps = {
+  dayPlaceholder: 'dd',
+  monthPlaceholder: 'mm',
+  yearPlaceholder: 'yyyy',
+};
+
 /* eslint-disable no-console */
 
 export default class Test extends Component {
@@ -112,6 +118,7 @@ export default class Test extends Component {
             >
               <DateRangePicker
                 {...ariaLabelProps}
+                {...placeholderProps}
                 className="myCustomDateRangePickerClassName"
                 calendarClassName="myCustomCalendarClassName"
                 disabled={disabled}

yarn.lock

@@ -4429,10 +4429,10 @@ react-calendar@^2.18.0:
     prop-types "^15.6.0"
     react-lifecycles-compat "^3.0.4"
 
-react-date-picker@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-7.7.0.tgz#2649978fdf59f3e71934d612d24d787cd721710b"
-  integrity sha512-I9w3imWFk1WpW63aohnhDxpSXrPETHONgyVDZ26EAlYTOi0Ti8UizFJEKl+hjENzffUEdPfJHZ7zDXFXD6Bpww==
+react-date-picker@^7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-7.8.0.tgz#f5a2d7c6f479c19397598a6e74ebe61feecef720"
+  integrity sha512-goD0XKDFU/j6Wkm7kNTcoL2GifDCUPkn9SIcl50LWLFQcElNVvronleQJsqkk2ZWvHak7sKOTSwhR5Gi+iqzpg==
   dependencies:
     get-user-locale "^1.1.1"
     make-event-props "^1.1.0"