react-date-picker - npm Package Compare versions

Comparing version 7.7.0 to 7.8.0

dist/DateInput.js

@@ -350,2 +350,3 @@ "use strict";
           dayAriaLabel = _this$props.dayAriaLabel,
+          dayPlaceholder = _this$props.dayPlaceholder,
           showLeadingZeros = _this$props.showLeadingZeros;
@@ -365,4 +366,5 @@ var _this$state = _this.state,
       }, _this.commonInputProps, {
-        dayAriaLabel: dayAriaLabel,
+        ariaLabel: dayAriaLabel,
         month: month,
+        placeholder: dayPlaceholder,
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
@@ -378,2 +380,3 @@ value: day,
           monthAriaLabel = _this$props2.monthAriaLabel,
+          monthPlaceholder = _this$props2.monthPlaceholder,
           showLeadingZeros = _this$props2.showLeadingZeros;
@@ -392,4 +395,5 @@ var _this$state2 = _this.state,
         }, _this.commonInputProps, {
+          ariaLabel: monthAriaLabel,
           locale: locale,
-          monthAriaLabel: monthAriaLabel,
+          placeholder: monthPlaceholder,
           "short": currentMatch.length === 3,
@@ -405,3 +409,4 @@ value: month,
       }, _this.commonInputProps, {
-        monthAriaLabel: monthAriaLabel,
+        ariaLabel: monthAriaLabel,
+        placeholder: monthPlaceholder,
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
@@ -414,3 +419,5 @@ value: month,
     _defineProperty(_assertThisInitialized(_this), "renderYear", function () {
-      var yearAriaLabel = _this.props.yearAriaLabel;
+      var _this$props3 = _this.props,
+          yearAriaLabel = _this$props3.yearAriaLabel,
+          yearPlaceholder = _this$props3.yearPlaceholder;
       var year = _this.state.year;
@@ -420,5 +427,6 @@ return _react["default"].createElement(_YearInput["default"], _extends({
       }, _this.commonInputProps, {
+        ariaLabel: yearAriaLabel,
+        placeholder: yearPlaceholder,
         value: year,
-        valueType: _this.valueType,
-        yearAriaLabel: yearAriaLabel
+        valueType: _this.valueType
       }));
@@ -437,7 +445,7 @@ });
     value: function getProcessedValue(value) {
-      var _this$props3 = this.props,
-          minDate = _this$props3.minDate,
-          maxDate = _this$props3.maxDate,
-          maxDetail = _this$props3.maxDetail,
-          returnValue = _this$props3.returnValue;
+      var _this$props4 = this.props,
+          minDate = _this$props4.minDate,
+          maxDate = _this$props4.maxDate,
+          maxDetail = _this$props4.maxDetail,
+          returnValue = _this$props4.returnValue;
 
@@ -474,9 +482,9 @@ switch (returnValue) {
     value: function renderNativeInput() {
-      var _this$props4 = this.props,
-          disabled = _this$props4.disabled,
-          maxDate = _this$props4.maxDate,
-          minDate = _this$props4.minDate,
-          name = _this$props4.name,
-          nativeInputAriaLabel = _this$props4.nativeInputAriaLabel,
-          required = _this$props4.required;
+      var _this$props5 = this.props,
+          disabled = _this$props5.disabled,
+          maxDate = _this$props5.maxDate,
+          minDate = _this$props5.minDate,
+          name = _this$props5.name,
+          nativeInputAriaLabel = _this$props5.nativeInputAriaLabel,
+          required = _this$props5.required;
       var value = this.state.value;
@@ -489,3 +497,3 @@ return _react["default"].createElement(_NativeInput["default"], {
         name: name,
-        nativeInputAriaLabel: nativeInputAriaLabel,
+        ariaLabel: nativeInputAriaLabel,
         onChange: this.onChangeNative,
@@ -543,5 +551,5 @@ required: required,
     get: function get() {
-      var _this$props5 = this.props,
-          format = _this$props5.format,
-          locale = _this$props5.locale;
+      var _this$props6 = this.props,
+          format = _this$props6.format,
+          locale = _this$props6.locale;
 
@@ -563,9 +571,9 @@ if (format) {
 
-      var _this$props6 = this.props,
-          className = _this$props6.className,
-          disabled = _this$props6.disabled,
-          isCalendarOpen = _this$props6.isCalendarOpen,
-          maxDate = _this$props6.maxDate,
-          minDate = _this$props6.minDate,
-          required = _this$props6.required;
+      var _this$props7 = this.props,
+          className = _this$props7.className,
+          disabled = _this$props7.disabled,
+          isCalendarOpen = _this$props7.isCalendarOpen,
+          maxDate = _this$props7.maxDate,
+          minDate = _this$props7.minDate,
+          required = _this$props7.required;
       return {
@@ -657,2 +665,3 @@ className: className,
   dayAriaLabel: _propTypes["default"].string,
+  dayPlaceholder: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
@@ -666,2 +675,3 @@ format: _propTypes["default"].string,
   monthAriaLabel: _propTypes["default"].string,
+  monthPlaceholder: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -674,4 +684,5 @@ nativeInputAriaLabel: _propTypes["default"].string,
   value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
-  yearAriaLabel: _propTypes["default"].string
+  yearAriaLabel: _propTypes["default"].string,
+  yearPlaceholder: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateInput);

dist/DateInput/__tests__/DayInput.js

@@ -53,3 +53,3 @@ "use strict";
     var component = (0, _enzyme.mount)(_react["default"].createElement(_DayInput["default"], _extends({}, defaultProps, {
-      dayAriaLabel: dayAriaLabel
+      ariaLabel: dayAriaLabel
     })));
@@ -59,2 +59,10 @@ var select = component.find('input');
   });
+  it('applies given placeholder properly', function () {
+    var dayPlaceholder = 'dd';
+    var component = (0, _enzyme.mount)(_react["default"].createElement(_DayInput["default"], _extends({}, defaultProps, {
+      placeholder: dayPlaceholder
+    })));
+    var select = component.find('input');
+    expect(select.prop('placeholder')).toBe(dayPlaceholder);
+  });
   it('has proper name defined', function () {
@@ -61,0 +69,0 @@ var component = (0, _enzyme.mount)(_react["default"].createElement(_DayInput["default"], defaultProps));

dist/DateInput/__tests__/MonthInput.js

@@ -53,3 +53,3 @@ "use strict";
     var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthInput["default"], _extends({}, defaultProps, {
-      monthAriaLabel: monthAriaLabel
+      ariaLabel: monthAriaLabel
     })));
@@ -59,2 +59,10 @@ var select = component.find('input');
   });
+  it('applies given placeholder properly', function () {
+    var monthPlaceholder = 'mm';
+    var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthInput["default"], _extends({}, defaultProps, {
+      placeholder: monthPlaceholder
+    })));
+    var select = component.find('input');
+    expect(select.prop('placeholder')).toBe(monthPlaceholder);
+  });
   it('has proper name defined', function () {
@@ -61,0 +69,0 @@ var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthInput["default"], defaultProps));

dist/DateInput/__tests__/MonthSelect.js

@@ -29,3 +29,3 @@ "use strict";
     var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthSelect["default"], _extends({}, defaultProps, {
-      monthAriaLabel: monthAriaLabel
+      ariaLabel: monthAriaLabel
     })));
@@ -35,2 +35,10 @@ var select = component.find('select');
   });
+  it('applies given placeholder properly', function () {
+    var monthPlaceholder = 'mm';
+    var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthSelect["default"], _extends({}, defaultProps, {
+      placeholder: monthPlaceholder
+    })));
+    var select = component.find('select');
+    expect(select.prop('placeholder')).toBe(monthPlaceholder);
+  });
   it('has proper name defined', function () {
@@ -37,0 +45,0 @@ var component = (0, _enzyme.mount)(_react["default"].createElement(_MonthSelect["default"], defaultProps));

dist/DateInput/__tests__/NativeInput.js

@@ -79,3 +79,3 @@ "use strict";
     var component = (0, _enzyme.shallow)(_react["default"].createElement(_NativeInput["default"], _extends({}, defaultProps, {
-      nativeInputAriaLabel: nativeInputAriaLabel
+      ariaLabel: nativeInputAriaLabel
     })));
@@ -82,0 +82,0 @@ var select = component.find('input');

dist/DateInput/__tests__/YearInput.js

@@ -27,3 +27,3 @@ "use strict";
     var component = (0, _enzyme.mount)(_react["default"].createElement(_YearInput["default"], _extends({}, defaultProps, {
-      yearAriaLabel: yearAriaLabel
+      ariaLabel: yearAriaLabel
     })));
@@ -33,2 +33,10 @@ var select = component.find('input');
   });
+  it('applies given placeholder properly', function () {
+    var yearPlaceholder = 'Year';
+    var component = (0, _enzyme.mount)(_react["default"].createElement(_YearInput["default"], _extends({}, defaultProps, {
+      placeholder: yearPlaceholder
+    })));
+    var select = component.find('input');
+    expect(select.prop('placeholder')).toBe(yearPlaceholder);
+  });
   it('has proper name defined', function () {
@@ -35,0 +43,0 @@ var component = (0, _enzyme.mount)(_react["default"].createElement(_YearInput["default"], defaultProps));

dist/DateInput/DayInput.js

@@ -29,8 +29,7 @@ "use strict";
 function DayInput(_ref) {
-  var dayAriaLabel = _ref.dayAriaLabel,
-      maxDate = _ref.maxDate,
+  var maxDate = _ref.maxDate,
       minDate = _ref.minDate,
       month = _ref.month,
       year = _ref.year,
-      otherProps = _objectWithoutProperties(_ref, ["dayAriaLabel", "maxDate", "minDate", "month", "year"]);
+      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "month", "year"]);
 
@@ -49,3 +48,2 @@ var currentMonthMaxDays = function () {
     name: "day",
-    ariaLabel: dayAriaLabel,
     max: maxDay,
@@ -57,4 +55,4 @@ min: minDay
 DayInput.propTypes = {
+  ariaLabel: _propTypes["default"].string,
   className: _propTypes["default"].string.isRequired,
-  dayAriaLabel: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
@@ -68,2 +66,3 @@ itemRef: _propTypes["default"].func,
   onKeyUp: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
   required: _propTypes["default"].bool,
@@ -70,0 +69,0 @@ showLeadingZeros: _propTypes["default"].bool,

dist/DateInput/MonthInput.js

@@ -31,5 +31,4 @@ "use strict";
       minDate = _ref.minDate,
-      monthAriaLabel = _ref.monthAriaLabel,
       year = _ref.year,
-      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "monthAriaLabel", "year"]);
+      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "year"]);
 
@@ -40,3 +39,2 @@ var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dates.getYear)(maxDate) && (0, _dates.getMonth)(maxDate));
     name: "month",
-    ariaLabel: monthAriaLabel,
     max: maxMonth,
@@ -48,2 +46,3 @@ min: minMonth
 MonthInput.propTypes = {
+  ariaLabel: _propTypes["default"].string,
   className: _propTypes["default"].string.isRequired,
@@ -54,6 +53,6 @@ disabled: _propTypes["default"].bool,
   minDate: _propTypes2.isMinDate,
-  monthAriaLabel: _propTypes["default"].string,
   onChange: _propTypes["default"].func,
   onKeyDown: _propTypes["default"].func,
   onKeyUp: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
   required: _propTypes["default"].bool,
@@ -60,0 +59,0 @@ showLeadingZeros: _propTypes["default"].bool,

dist/DateInput/MonthSelect.js

@@ -39,3 +39,4 @@ "use strict";
 function MonthSelect(_ref) {
-  var className = _ref.className,
+  var ariaLabel = _ref.ariaLabel,
+      className = _ref.className,
       itemRef = _ref.itemRef,
@@ -45,7 +46,6 @@ locale = _ref.locale,
       minDate = _ref.minDate,
-      monthAriaLabel = _ref.monthAriaLabel,
       _short = _ref["short"],
       year = _ref.year,
       value = _ref.value,
-      otherProps = _objectWithoutProperties(_ref, ["className", "itemRef", "locale", "maxDate", "minDate", "monthAriaLabel", "short", "year", "value"]);
+      otherProps = _objectWithoutProperties(_ref, ["ariaLabel", "className", "itemRef", "locale", "maxDate", "minDate", "short", "year", "value"]);
 
@@ -62,3 +62,3 @@ var maxMonth = (0, _utils.min)(12, maxDate && year === (0, _dates.getYear)(maxDate) && (0, _dates.getMonth)(maxDate));
   return _react["default"].createElement("select", _extends({
-    "aria-label": monthAriaLabel,
+    "aria-label": ariaLabel,
     className: (0, _mergeClassNames["default"])("".concat(className, "__input"), "".concat(className, "__").concat(name)),
@@ -86,2 +86,3 @@ name: name,
 MonthSelect.propTypes = {
+  ariaLabel: _propTypes["default"].string,
   className: _propTypes["default"].string.isRequired,
@@ -93,6 +94,6 @@ disabled: _propTypes["default"].bool,
   minDate: _propTypes2.isMinDate,
-  monthAriaLabel: _propTypes["default"].string,
   onChange: _propTypes["default"].func,
   onKeyDown: _propTypes["default"].func,
   onKeyUp: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
   required: _propTypes["default"].bool,
@@ -99,0 +100,0 @@ "short": _propTypes["default"].bool,

dist/DateInput/NativeInput.js

@@ -19,7 +19,7 @@ "use strict";
 function NativeInput(_ref) {
-  var disabled = _ref.disabled,
+  var ariaLabel = _ref.ariaLabel,
+      disabled = _ref.disabled,
       maxDate = _ref.maxDate,
       minDate = _ref.minDate,
       name = _ref.name,
-      nativeInputAriaLabel = _ref.nativeInputAriaLabel,
       onChange = _ref.onChange,
@@ -71,3 +71,3 @@ required = _ref.required,
     type: nativeInputType,
-    "aria-label": nativeInputAriaLabel,
+    "aria-label": ariaLabel,
     disabled: disabled,
@@ -91,2 +91,3 @@ max: maxDate ? nativeValueParser(maxDate) : null,
 NativeInput.propTypes = {
+  ariaLabel: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
@@ -96,3 +97,2 @@ maxDate: _propTypes2.isMaxDate,
   name: _propTypes["default"].string,
-  nativeInputAriaLabel: _propTypes["default"].string,
   onChange: _propTypes["default"].func,
@@ -99,0 +99,0 @@ required: _propTypes["default"].bool,

dist/DateInput/YearInput.js

@@ -32,4 +32,3 @@ "use strict";
       valueType = _ref.valueType,
-      yearAriaLabel = _ref.yearAriaLabel,
-      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "valueType", "yearAriaLabel"]);
+      otherProps = _objectWithoutProperties(_ref, ["maxDate", "minDate", "valueType"]);
 
@@ -49,6 +48,4 @@ var maxYear = (0, _utils.min)(275760, maxDate && (0, _dates.getYear)(maxDate));
     name: "year",
-    ariaLabel: yearAriaLabel,
     max: maxYear,
     min: minYear,
-    placeholder: "----",
     step: yearStep
@@ -59,2 +56,3 @@ }, otherProps));
 YearInput.propTypes = {
+  ariaLabel: _propTypes["default"].string,
   className: _propTypes["default"].string.isRequired,
@@ -68,6 +66,9 @@ disabled: _propTypes["default"].bool,
   onKeyUp: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
   required: _propTypes["default"].bool,
   value: _propTypes["default"].number,
-  valueType: _propTypes2.isValueType,
-  yearAriaLabel: _propTypes["default"].string
+  valueType: _propTypes2.isValueType
+};
+YearInput.defaultProps = {
+  placeholder: '----'
 };

dist/DatePicker.js

@@ -208,2 +208,3 @@ "use strict";
           dayAriaLabel = _this$props3.dayAriaLabel,
+          dayPlaceholder = _this$props3.dayPlaceholder,
           disableCalendar = _this$props3.disableCalendar,
@@ -217,2 +218,3 @@ disabled = _this$props3.disabled,
           monthAriaLabel = _this$props3.monthAriaLabel,
+          monthPlaceholder = _this$props3.monthPlaceholder,
           name = _this$props3.name,
@@ -224,3 +226,4 @@ nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
           value = _this$props3.value,
-          yearAriaLabel = _this$props3.yearAriaLabel;
+          yearAriaLabel = _this$props3.yearAriaLabel,
+          yearPlaceholder = _this$props3.yearPlaceholder;
       var isOpen = this.state.isOpen;
@@ -238,5 +241,10 @@
       };
+      var placeholderProps = {
+        dayPlaceholder: dayPlaceholder,
+        monthPlaceholder: monthPlaceholder,
+        yearPlaceholder: yearPlaceholder
+      };
       return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_DateInput["default"], _extends({}, ariaLabelProps, {
+      }, _react["default"].createElement(_DateInput["default"], _extends({}, ariaLabelProps, placeholderProps, {
         className: "".concat(baseClassName, "__inputGroup"),
@@ -404,2 +412,3 @@ disabled: disabled,
   dayAriaLabel: _propTypes["default"].string,
+  dayPlaceholder: _propTypes["default"].string,
   disableCalendar: _propTypes["default"].bool,
@@ -414,2 +423,3 @@ disabled: _propTypes["default"].bool,
   monthAriaLabel: _propTypes["default"].string,
+  monthPlaceholder: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -425,4 +435,5 @@ nativeInputAriaLabel: _propTypes["default"].string,
   value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
-  yearAriaLabel: _propTypes["default"].string
+  yearAriaLabel: _propTypes["default"].string,
+  yearPlaceholder: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DatePicker);

package.json

 {
   "name": "react-date-picker",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "description": "A date picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

README.md

@@ -96,2 +96,3 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-date-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
+|dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
 |disabled|Whether the date picker should be disabled.|`false`|`true`|
@@ -107,2 +108,3 @@ |disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
 |monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
+|monthPlaceholder|`placeholder` for the month input.|`"--"`|`"mm"`|
 |name|Input name.|`"date"`|`"myCustomName"`|
@@ -118,2 +120,3 @@ |nativeInputAriaLabel|`aria-label` for the native date input.|n/a|`"Date"`|
 |yearAriaLabel|`aria-label` for the year input.|n/a|`"Year"`|
+|yearPlaceholder|`aria-label` for the year input.|`"----"`|`"yyyy"`|
 
@@ -120,0 +123,0 @@ ### Calendar

src/__tests__/DatePicker.jsx

@@ -69,2 +69,20 @@ import React from 'react';
 
+  it('passes placeholder props to DateInput', () => {
+    const placeholderProps = {
+      dayPlaceholder: 'dd',
+      monthPlaceholder: 'mm',
+      yearPlaceholder: 'yyyy',
+    };
+
+    const component = mount(
+      <DatePicker {...placeholderProps} />
+    );
+
+    const dateInput = component.find('DateInput');
+
+    expect(dateInput.prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateInput.prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateInput.prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+  });
+
   describe('passes value to DateInput', () => {
@@ -71,0 +89,0 @@ it('passes single value to DateInput', () => {

src/DateInput.jsx

@@ -435,3 +435,3 @@ import React, { PureComponent } from 'react';
   renderDay = (currentMatch) => {
-    const { dayAriaLabel, showLeadingZeros } = this.props;
+    const { dayAriaLabel, dayPlaceholder, showLeadingZeros } = this.props;
     const { day, month, year } = this.state;
@@ -449,4 +449,5 @@
         {...this.commonInputProps}
-        dayAriaLabel={dayAriaLabel}
+        ariaLabel={dayAriaLabel}
         month={month}
+        placeholder={dayPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
@@ -460,3 +461,8 @@ value={day}
   renderMonth = (currentMatch) => {
-    const { locale, monthAriaLabel, showLeadingZeros } = this.props;
+    const {
+      locale,
+      monthAriaLabel,
+      monthPlaceholder,
+      showLeadingZeros,
+    } = this.props;
     const { month, year } = this.state;
@@ -473,4 +479,5 @@
           {...this.commonInputProps}
+          ariaLabel={monthAriaLabel}
           locale={locale}
-          monthAriaLabel={monthAriaLabel}
+          placeholder={monthPlaceholder}
           short={currentMatch.length === 3}
@@ -489,3 +496,4 @@ value={month}
         {...this.commonInputProps}
-        monthAriaLabel={monthAriaLabel}
+        ariaLabel={monthAriaLabel}
+        placeholder={monthPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
@@ -499,3 +507,3 @@ value={month}
   renderYear = () => {
-    const { yearAriaLabel } = this.props;
+    const { yearAriaLabel, yearPlaceholder } = this.props;
     const { year } = this.state;
@@ -507,5 +515,6 @@
         {...this.commonInputProps}
+        ariaLabel={yearAriaLabel}
+        placeholder={yearPlaceholder}
         value={year}
         valueType={this.valueType}
-        yearAriaLabel={yearAriaLabel}
       />
@@ -547,3 +556,3 @@ );
         name={name}
-        nativeInputAriaLabel={nativeInputAriaLabel}
+        ariaLabel={nativeInputAriaLabel}
         onChange={this.onChangeNative}
@@ -587,2 +596,3 @@ required={required}
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disabled: PropTypes.bool,
@@ -596,2 +606,3 @@ format: PropTypes.string,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
@@ -608,4 +619,5 @@ nativeInputAriaLabel: PropTypes.string,
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DateInput);

src/DateInput/__tests__/DayInput.jsx

@@ -74,3 +74,3 @@ import React from 'react';
         {...defaultProps}
-        dayAriaLabel={dayAriaLabel}
+        ariaLabel={dayAriaLabel}
       />
@@ -84,2 +84,17 @@ );
 
+  it('applies given placeholder properly', () => {
+    const dayPlaceholder = 'dd';
+
+    const component = mount(
+      <DayInput
+        {...defaultProps}
+        placeholder={dayPlaceholder}
+      />
+    );
+
+    const select = component.find('input');
+
+    expect(select.prop('placeholder')).toBe(dayPlaceholder);
+  });
+
   it('has proper name defined', () => {
@@ -86,0 +101,0 @@ const component = mount(

src/DateInput/__tests__/MonthInput.jsx

@@ -74,3 +74,3 @@ import React from 'react';
         {...defaultProps}
-        monthAriaLabel={monthAriaLabel}
+        ariaLabel={monthAriaLabel}
       />
@@ -84,2 +84,17 @@ );
 
+  it('applies given placeholder properly', () => {
+    const monthPlaceholder = 'mm';
+
+    const component = mount(
+      <MonthInput
+        {...defaultProps}
+        placeholder={monthPlaceholder}
+      />
+    );
+
+    const select = component.find('input');
+
+    expect(select.prop('placeholder')).toBe(monthPlaceholder);
+  });
+
   it('has proper name defined', () => {
@@ -86,0 +101,0 @@ const component = mount(

src/DateInput/__tests__/MonthSelect.jsx

@@ -32,3 +32,3 @@ import React from 'react';
         {...defaultProps}
-        monthAriaLabel={monthAriaLabel}
+        ariaLabel={monthAriaLabel}
       />
@@ -42,2 +42,17 @@ );
 
+  it('applies given placeholder properly', () => {
+    const monthPlaceholder = 'mm';
+
+    const component = mount(
+      <MonthSelect
+        {...defaultProps}
+        placeholder={monthPlaceholder}
+      />
+    );
+
+    const select = component.find('select');
+
+    expect(select.prop('placeholder')).toBe(monthPlaceholder);
+  });
+
   it('has proper name defined', () => {
@@ -44,0 +59,0 @@ const component = mount(

src/DateInput/__tests__/NativeInput.jsx

@@ -30,3 +30,3 @@ import React from 'react';
         {...defaultProps}
-        nativeInputAriaLabel={nativeInputAriaLabel}
+        ariaLabel={nativeInputAriaLabel}
       />
@@ -33,0 +33,0 @@ );

src/DateInput/__tests__/YearInput.jsx

@@ -30,3 +30,3 @@ import React from 'react';
         {...defaultProps}
-        yearAriaLabel={yearAriaLabel}
+        ariaLabel={yearAriaLabel}
       />
@@ -40,2 +40,17 @@ );
 
+  it('applies given placeholder properly', () => {
+    const yearPlaceholder = 'Year';
+
+    const component = mount(
+      <YearInput
+        {...defaultProps}
+        placeholder={yearPlaceholder}
+      />
+    );
+
+    const select = component.find('input');
+
+    expect(select.prop('placeholder')).toBe(yearPlaceholder);
+  });
+
   it('has proper name defined', () => {
@@ -42,0 +57,0 @@ const component = mount(

src/DateInput/DayInput.jsx

@@ -16,3 +16,2 @@ import React from 'react';
 export default function DayInput({
-  dayAriaLabel,
   maxDate,
@@ -44,3 +43,2 @@ minDate,
       name="day"
-      ariaLabel={dayAriaLabel}
       max={maxDay}
@@ -54,4 +52,4 @@ min={minDay}
 DayInput.propTypes = {
+  ariaLabel: PropTypes.string,
   className: PropTypes.string.isRequired,
-  dayAriaLabel: PropTypes.string,
   disabled: PropTypes.bool,
@@ -65,2 +63,3 @@ itemRef: PropTypes.func,
   onKeyUp: PropTypes.func,
+  placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -67,0 +66,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/MonthInput.jsx

@@ -13,3 +13,2 @@ import React from 'react';
   minDate,
-  monthAriaLabel,
   year,
@@ -24,3 +23,2 @@ ...otherProps
       name="month"
-      ariaLabel={monthAriaLabel}
       max={maxMonth}
@@ -34,2 +32,3 @@ min={minMonth}
 MonthInput.propTypes = {
+  ariaLabel: PropTypes.string,
   className: PropTypes.string.isRequired,
@@ -40,6 +39,6 @@ disabled: PropTypes.bool,
   minDate: isMinDate,
-  monthAriaLabel: PropTypes.string,
   onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
+  placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -46,0 +45,0 @@ showLeadingZeros: PropTypes.bool,

src/DateInput/MonthSelect.jsx

@@ -11,2 +11,3 @@ import React from 'react';
 export default function MonthSelect({
+  ariaLabel,
   className,
@@ -17,3 +18,2 @@ itemRef,
   minDate,
-  monthAriaLabel,
   short,
@@ -32,3 +32,3 @@ year,
     <select
-      aria-label={monthAriaLabel}
+      aria-label={ariaLabel}
       className={mergeClassNames(
@@ -71,2 +71,3 @@ `${className}__input`,
 MonthSelect.propTypes = {
+  ariaLabel: PropTypes.string,
   className: PropTypes.string.isRequired,
@@ -78,6 +79,6 @@ disabled: PropTypes.bool,
   minDate: isMinDate,
-  monthAriaLabel: PropTypes.string,
   onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyUp: PropTypes.func,
+  placeholder: PropTypes.string,
   required: PropTypes.bool,
@@ -84,0 +85,0 @@ short: PropTypes.bool,

src/DateInput/NativeInput.jsx

@@ -12,2 +12,3 @@ import React from 'react';
 export default function NativeInput({
+  ariaLabel,
   disabled,
@@ -17,3 +18,2 @@ maxDate,
   name,
-  nativeInputAriaLabel,
   onChange,
@@ -60,3 +60,3 @@ required,
       type={nativeInputType}
-      aria-label={nativeInputAriaLabel}
+      aria-label={ariaLabel}
       disabled={disabled}
@@ -81,2 +81,3 @@ max={maxDate ? nativeValueParser(maxDate) : null}
 NativeInput.propTypes = {
+  ariaLabel: PropTypes.string,
   disabled: PropTypes.bool,
@@ -86,3 +87,2 @@ maxDate: isMaxDate,
   name: PropTypes.string,
-  nativeInputAriaLabel: PropTypes.string,
   onChange: PropTypes.func,
@@ -89,0 +89,0 @@ required: PropTypes.bool,

src/DateInput/YearInput.jsx

@@ -14,3 +14,2 @@ import React from 'react';
   valueType,
-  yearAriaLabel,
   ...otherProps
@@ -32,6 +31,4 @@ }) {
       name="year"
-      ariaLabel={yearAriaLabel}
       max={maxYear}
       min={minYear}
-      placeholder="----"
       step={yearStep}
@@ -44,2 +41,3 @@ {...otherProps}
 YearInput.propTypes = {
+  ariaLabel: PropTypes.string,
   className: PropTypes.string.isRequired,
@@ -53,6 +51,10 @@ disabled: PropTypes.bool,
   onKeyUp: PropTypes.func,
+  placeholder: PropTypes.string,
   required: PropTypes.bool,
   value: PropTypes.number,
   valueType: isValueType,
-  yearAriaLabel: PropTypes.string,
 };
+
+YearInput.defaultProps = {
+  placeholder: '----',
+};

src/DatePicker.jsx

@@ -124,2 +124,3 @@ import React, { PureComponent } from 'react';
       dayAriaLabel,
+      dayPlaceholder,
       disableCalendar,
@@ -133,2 +134,3 @@ disabled,
       monthAriaLabel,
+      monthPlaceholder,
       name,
@@ -141,2 +143,3 @@ nativeInputAriaLabel,
       yearAriaLabel,
+      yearPlaceholder,
     } = this.props;
@@ -154,2 +157,8 @@ const { isOpen } = this.state;
 
+    const placeholderProps = {
+      dayPlaceholder,
+      monthPlaceholder,
+      yearPlaceholder,
+    };
+
     return (
@@ -159,2 +168,3 @@ <div className={`${baseClassName}__wrapper`}>
           {...ariaLabelProps}
+          {...placeholderProps}
           className={`${baseClassName}__inputGroup`}
@@ -321,2 +331,3 @@ disabled={disabled}
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,
@@ -331,2 +342,3 @@ disabled: PropTypes.bool,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
@@ -346,4 +358,5 @@ nativeInputAriaLabel: PropTypes.string,
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DatePicker);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

217626

increased by2.33%

Lines of code

5411

increased by2.58%

Number of lines in readme file

162

increased by1.89%

No dependency changes