react-datetime-picker - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

dist/DateTimeInput.js

@@ -398,2 +398,3 @@ "use strict";
           dayAriaLabel = _this$props.dayAriaLabel,
+          dayPlaceholder = _this$props.dayPlaceholder,
           showLeadingZeros = _this$props.showLeadingZeros;
@@ -413,4 +414,5 @@ var _this$state = _this.state,
       }, _this.commonInputProps, {
-        dayAriaLabel: dayAriaLabel,
+        ariaLabel: dayAriaLabel,
         month: month,
+        placeholder: dayPlaceholder,
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
@@ -426,2 +428,3 @@ value: day,
           monthAriaLabel = _this$props2.monthAriaLabel,
+          monthPlaceholder = _this$props2.monthPlaceholder,
           showLeadingZeros = _this$props2.showLeadingZeros;
@@ -440,4 +443,5 @@ var _this$state2 = _this.state,
         }, _this.commonInputProps, {
+          ariaLabel: monthAriaLabel,
           locale: locale,
-          monthAriaLabel: monthAriaLabel,
+          placeholder: monthPlaceholder,
           "short": currentMatch.length === 3,
@@ -453,3 +457,4 @@ value: month,
       }, _this.commonInputProps, {
-        monthAriaLabel: monthAriaLabel,
+        ariaLabel: monthAriaLabel,
+        placeholder: monthPlaceholder,
         showLeadingZeros: showLeadingZerosFromFormat || showLeadingZeros,
@@ -462,3 +467,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;
@@ -468,5 +475,6 @@ return _react["default"].createElement(_YearInput["default"], _extends({
       }, _this.commonInputProps, {
+        ariaLabel: yearAriaLabel,
+        placeholder: yearPlaceholder,
         value: year,
-        valueType: "day",
-        yearAriaLabel: yearAriaLabel
+        valueType: "day"
       }));
@@ -484,3 +492,5 @@ });
     _defineProperty(_assertThisInitialized(_this), "renderHour12", function (currentMatch) {
-      var hourAriaLabel = _this.props.hourAriaLabel;
+      var _this$props4 = _this.props,
+          hourAriaLabel = _this$props4.hourAriaLabel,
+          hourPlaceholder = _this$props4.hourPlaceholder;
       var _this$state3 = _this.state,
@@ -499,3 +509,4 @@ amPm = _this$state3.amPm,
         amPm: amPm,
-        hourAriaLabel: hourAriaLabel,
+        ariaLabel: hourAriaLabel,
+        placeholder: hourPlaceholder,
         showLeadingZeros: showLeadingZeros,
@@ -507,3 +518,5 @@ value: hour
     _defineProperty(_assertThisInitialized(_this), "renderHour24", function (currentMatch) {
-      var hourAriaLabel = _this.props.hourAriaLabel;
+      var _this$props5 = _this.props,
+          hourAriaLabel = _this$props5.hourAriaLabel,
+          hourPlaceholder = _this$props5.hourPlaceholder;
       var hour = _this.state.hour;
@@ -519,3 +532,4 @@
       }, _this.commonInputProps, _this.commonTimeInputProps, {
-        hourAriaLabel: hourAriaLabel,
+        ariaLabel: hourAriaLabel,
+        placeholder: hourPlaceholder,
         showLeadingZeros: showLeadingZeros,
@@ -527,3 +541,5 @@ value: hour
     _defineProperty(_assertThisInitialized(_this), "renderMinute", function (currentMatch) {
-      var minuteAriaLabel = _this.props.minuteAriaLabel;
+      var _this$props6 = _this.props,
+          minuteAriaLabel = _this$props6.minuteAriaLabel,
+          minutePlaceholder = _this$props6.minutePlaceholder;
       var _this$state4 = _this.state,
@@ -541,4 +557,5 @@ hour = _this$state4.hour,
       }, _this.commonInputProps, _this.commonTimeInputProps, {
+        ariaLabel: minuteAriaLabel,
         hour: hour,
-        minuteAriaLabel: minuteAriaLabel,
+        placeholder: minutePlaceholder,
         showLeadingZeros: showLeadingZeros,
@@ -550,3 +567,5 @@ value: minute
     _defineProperty(_assertThisInitialized(_this), "renderSecond", function (currentMatch) {
-      var secondAriaLabel = _this.props.secondAriaLabel;
+      var _this$props7 = _this.props,
+          secondAriaLabel = _this$props7.secondAriaLabel,
+          secondPlaceholder = _this$props7.secondPlaceholder;
       var _this$state5 = _this.state,
@@ -565,5 +584,6 @@ hour = _this$state5.hour,
       }, _this.commonInputProps, _this.commonTimeInputProps, {
+        ariaLabel: secondAriaLabel,
         hour: hour,
         minute: minute,
-        secondAriaLabel: secondAriaLabel,
+        placeholder: secondPlaceholder,
         showLeadingZeros: showLeadingZeros,
@@ -575,5 +595,5 @@ value: second
     _defineProperty(_assertThisInitialized(_this), "renderAmPm", function () {
-      var _this$props3 = _this.props,
-          amPmAriaLabel = _this$props3.amPmAriaLabel,
-          locale = _this$props3.locale;
+      var _this$props8 = _this.props,
+          amPmAriaLabel = _this$props8.amPmAriaLabel,
+          locale = _this$props8.locale;
       var amPm = _this.state.amPm;
@@ -583,3 +603,3 @@ return _react["default"].createElement(_AmPm["default"], _extends({
       }, _this.commonInputProps, _this.commonTimeInputProps, {
-        amPmAriaLabel: amPmAriaLabel,
+        ariaLabel: amPmAriaLabel,
         locale: locale,
@@ -615,12 +635,13 @@ onChange: _this.onChangeAmPm,
     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$props9 = this.props,
+          disabled = _this$props9.disabled,
+          maxDate = _this$props9.maxDate,
+          minDate = _this$props9.minDate,
+          name = _this$props9.name,
+          nativeInputAriaLabel = _this$props9.nativeInputAriaLabel,
+          required = _this$props9.required;
       var value = this.state.value;
       return _react["default"].createElement(_NativeInput["default"], {
         key: "time",
+        ariaLabel: nativeInputAriaLabel,
         disabled: disabled,
@@ -630,3 +651,2 @@ maxDate: maxDate || defaultMaxDate,
         name: name,
-        nativeInputAriaLabel: nativeInputAriaLabel,
         onChange: this.onChangeNative,
@@ -763,9 +783,9 @@ required: required,
 
-      var _this$props5 = this.props,
-          className = _this$props5.className,
-          disabled = _this$props5.disabled,
-          isWidgetOpen = _this$props5.isWidgetOpen,
-          maxDate = _this$props5.maxDate,
-          minDate = _this$props5.minDate,
-          required = _this$props5.required;
+      var _this$props10 = this.props,
+          className = _this$props10.className,
+          disabled = _this$props10.disabled,
+          isWidgetOpen = _this$props10.isWidgetOpen,
+          maxDate = _this$props10.maxDate,
+          minDate = _this$props10.minDate,
+          required = _this$props10.required;
       return {
@@ -883,5 +903,7 @@ className: className,
   dayAriaLabel: _propTypes["default"].string,
+  dayPlaceholder: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   format: _propTypes["default"].string,
   hourAriaLabel: _propTypes["default"].string,
+  hourPlaceholder: _propTypes["default"].string,
   isWidgetOpen: _propTypes["default"].bool,
@@ -893,3 +915,5 @@ locale: _propTypes["default"].string,
   minuteAriaLabel: _propTypes["default"].string,
+  minutePlaceholder: _propTypes["default"].string,
   monthAriaLabel: _propTypes["default"].string,
+  monthPlaceholder: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -900,6 +924,8 @@ nativeInputAriaLabel: _propTypes["default"].string,
   secondAriaLabel: _propTypes["default"].string,
+  secondPlaceholder: _propTypes["default"].string,
   showLeadingZeros: _propTypes["default"].bool,
   value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
-  yearAriaLabel: _propTypes["default"].string
+  yearAriaLabel: _propTypes["default"].string,
+  yearPlaceholder: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateTimeInput);

dist/DateTimeInput/__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/DateTimePicker.js

@@ -271,2 +271,3 @@ "use strict";
           dayAriaLabel = _this$props3.dayAriaLabel,
+          dayPlaceholder = _this$props3.dayPlaceholder,
           disableCalendar = _this$props3.disableCalendar,
@@ -276,2 +277,3 @@ disabled = _this$props3.disabled,
           hourAriaLabel = _this$props3.hourAriaLabel,
+          hourPlaceholder = _this$props3.hourPlaceholder,
           locale = _this$props3.locale,
@@ -282,3 +284,5 @@ maxDate = _this$props3.maxDate,
           minuteAriaLabel = _this$props3.minuteAriaLabel,
+          minutePlaceholder = _this$props3.minutePlaceholder,
           monthAriaLabel = _this$props3.monthAriaLabel,
+          monthPlaceholder = _this$props3.monthPlaceholder,
           name = _this$props3.name,
@@ -288,5 +292,7 @@ nativeInputAriaLabel = _this$props3.nativeInputAriaLabel,
           secondAriaLabel = _this$props3.secondAriaLabel,
+          secondPlaceholder = _this$props3.secondPlaceholder,
           showLeadingZeros = _this$props3.showLeadingZeros,
           value = _this$props3.value,
-          yearAriaLabel = _this$props3.yearAriaLabel;
+          yearAriaLabel = _this$props3.yearAriaLabel,
+          yearPlaceholder = _this$props3.yearPlaceholder;
       var _this$state3 = this.state,
@@ -310,5 +316,13 @@ isCalendarOpen = _this$state3.isCalendarOpen,
       };
+      var placeholderProps = {
+        dayPlaceholder: dayPlaceholder,
+        hourPlaceholder: hourPlaceholder,
+        minutePlaceholder: minutePlaceholder,
+        monthPlaceholder: monthPlaceholder,
+        secondPlaceholder: secondPlaceholder,
+        yearPlaceholder: yearPlaceholder
+      };
       return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_DateTimeInput["default"], _extends({}, ariaLabelProps, {
+      }, _react["default"].createElement(_DateTimeInput["default"], _extends({}, ariaLabelProps, placeholderProps, {
         className: "".concat(baseClassName, "__inputGroup"),
@@ -521,2 +535,3 @@ disabled: disabled,
   dayAriaLabel: _propTypes["default"].string,
+  dayPlaceholder: _propTypes["default"].string,
   disableCalendar: _propTypes["default"].bool,
@@ -527,2 +542,3 @@ disableClock: _propTypes["default"].bool,
   hourAriaLabel: _propTypes["default"].string,
+  hourPlaceholder: _propTypes["default"].string,
   isCalendarOpen: _propTypes["default"].bool,
@@ -535,3 +551,5 @@ isClockOpen: _propTypes["default"].bool,
   minuteAriaLabel: _propTypes["default"].string,
+  minutePlaceholder: _propTypes["default"].string,
   monthAriaLabel: _propTypes["default"].string,
+  monthPlaceholder: _propTypes["default"].string,
   name: _propTypes["default"].string,
@@ -547,6 +565,8 @@ nativeInputAriaLabel: _propTypes["default"].string,
   secondAriaLabel: _propTypes["default"].string,
+  secondPlaceholder: _propTypes["default"].string,
   showLeadingZeros: _propTypes["default"].bool,
   value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)]),
-  yearAriaLabel: _propTypes["default"].string
+  yearAriaLabel: _propTypes["default"].string,
+  yearPlaceholder: _propTypes["default"].string
 };
 (0, _reactLifecyclesCompat.polyfill)(DateTimePicker);

package.json

 {
   "name": "react-datetime-picker",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "A date range picker for your React app.",
@@ -54,6 +54,6 @@ "main": "dist/entry.js",
     "react-clock": "^2.3.0",
-    "react-date-picker": "^7.7.0",
+    "react-date-picker": "^7.8.0",
     "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^3.6.1"
+    "react-time-picker": "^3.7.0"
   },
@@ -60,0 +60,0 @@ "devDependencies": {

README.md

@@ -99,2 +99,3 @@ [![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetime-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
 |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`|
@@ -105,2 +106,3 @@ |disableCalendar|When set to `true`, will remove the clock and the button toggling its visibility.|`false`|`true`|
 |hourAriaLabel|`aria-label` for the hour input.|n/a|`"Hour"`|
+|hourPlaceholder|`placeholder` for the hour input.|`"--"`|`"hh"`|
 |isCalendarOpen|Whether the calendar should be opened.|`false`|`true`|
@@ -114,3 +116,5 @@ |isClockOpen|Whether the clock should be opened.|`false`|`true`|
 |minuteAriaLabel|`aria-label` for the minute input.|n/a|`"Minute"`|
+|minutePlaceholder|`placeholder` for the minute input.|`"--"`|`"mm"`|
 |monthAriaLabel|`aria-label` for the month input.|n/a|`"Month"`|
+|monthPlaceholder|`placeholder` for the month input.|`"--"`|`"mm"`|
 |name|Input name.|`"datetime"`|`"myCustomName"`|
@@ -126,5 +130,7 @@ |nativeInputAriaLabel|`aria-label` for the native datetime input.|n/a|`"Date"`|
 |secondAriaLabel|`aria-label` for the second input.|n/a|`"Second"`|
+|secondPlaceholder|`placeholder` for the second input.|`"--"`|`"ss"`|
 |showLeadingZeros|Whether leading zeros should be rendered in datetime 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"`|
 
@@ -131,0 +137,0 @@ ### Calendar

src/__tests__/DateTimePicker.jsx

@@ -77,2 +77,26 @@ import React from 'react';
 
+  it('passes placeholder props to DateInput', () => {
+    const placeholderProps = {
+      dayPlaceholder: 'Day',
+      hourPlaceholder: 'Hour',
+      minutePlaceholder: 'Minute',
+      monthPlaceholder: 'Month',
+      secondPlaceholder: 'Second',
+      yearPlaceholder: 'Year'
+    };
+
+    const component = mount(
+      <DateTimePicker {...placeholderProps} />
+    );
+
+    const dateTimeInput = component.find('DateTimeInput');
+
+    expect(dateTimeInput.prop('dayPlaceholder')).toBe(placeholderProps.dayPlaceholder);
+    expect(dateTimeInput.prop('hourPlaceholder')).toBe(placeholderProps.hourPlaceholder);
+    expect(dateTimeInput.prop('minutePlaceholder')).toBe(placeholderProps.minutePlaceholder);
+    expect(dateTimeInput.prop('monthPlaceholder')).toBe(placeholderProps.monthPlaceholder);
+    expect(dateTimeInput.prop('secondPlaceholder')).toBe(placeholderProps.secondPlaceholder);
+    expect(dateTimeInput.prop('yearPlaceholder')).toBe(placeholderProps.yearPlaceholder);
+  });
+
   describe('passes value to DateTimeInput', () => {
@@ -79,0 +103,0 @@ it('passes single value to DateTimeInput', () => {

src/DateTimeInput.jsx

@@ -544,3 +544,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;
@@ -558,4 +558,5 @@
         {...this.commonInputProps}
-        dayAriaLabel={dayAriaLabel}
+        ariaLabel={dayAriaLabel}
         month={month}
+        placeholder={dayPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
@@ -569,3 +570,8 @@ value={day}
   renderMonth = (currentMatch) => {
-    const { locale, monthAriaLabel, showLeadingZeros } = this.props;
+    const {
+      locale,
+      monthAriaLabel,
+      monthPlaceholder,
+      showLeadingZeros,
+    } = this.props;
     const { month, year } = this.state;
@@ -582,4 +588,5 @@
           {...this.commonInputProps}
+          ariaLabel={monthAriaLabel}
           locale={locale}
-          monthAriaLabel={monthAriaLabel}
+          placeholder={monthPlaceholder}
           short={currentMatch.length === 3}
@@ -598,3 +605,4 @@ value={month}
         {...this.commonInputProps}
-        monthAriaLabel={monthAriaLabel}
+        ariaLabel={monthAriaLabel}
+        placeholder={monthPlaceholder}
         showLeadingZeros={showLeadingZerosFromFormat || showLeadingZeros}
@@ -608,3 +616,3 @@ value={month}
   renderYear = () => {
-    const { yearAriaLabel } = this.props;
+    const { yearAriaLabel, yearPlaceholder } = this.props;
     const { year } = this.state;
@@ -616,5 +624,6 @@
         {...this.commonInputProps}
+        ariaLabel={yearAriaLabel}
+        placeholder={yearPlaceholder}
         value={year}
         valueType="day"
-        yearAriaLabel={yearAriaLabel}
       />
@@ -633,3 +642,3 @@ );
   renderHour12 = (currentMatch) => {
-    const { hourAriaLabel } = this.props;
+    const { hourAriaLabel, hourPlaceholder } = this.props;
     const { amPm, hour } = this.state;
@@ -649,3 +658,4 @@
         amPm={amPm}
-        hourAriaLabel={hourAriaLabel}
+        ariaLabel={hourAriaLabel}
+        placeholder={hourPlaceholder}
         showLeadingZeros={showLeadingZeros}
@@ -658,3 +668,3 @@ value={hour}
   renderHour24 = (currentMatch) => {
-    const { hourAriaLabel } = this.props;
+    const { hourAriaLabel, hourPlaceholder } = this.props;
     const { hour } = this.state;
@@ -673,3 +683,4 @@
         {...this.commonTimeInputProps}
-        hourAriaLabel={hourAriaLabel}
+        ariaLabel={hourAriaLabel}
+        placeholder={hourPlaceholder}
         showLeadingZeros={showLeadingZeros}
@@ -682,3 +693,3 @@ value={hour}
   renderMinute = (currentMatch) => {
-    const { minuteAriaLabel } = this.props;
+    const { minuteAriaLabel, minutePlaceholder } = this.props;
     const { hour, minute } = this.state;
@@ -697,4 +708,5 @@
         {...this.commonTimeInputProps}
+        ariaLabel={minuteAriaLabel}
         hour={hour}
-        minuteAriaLabel={minuteAriaLabel}
+        placeholder={minutePlaceholder}
         showLeadingZeros={showLeadingZeros}
@@ -707,3 +719,3 @@ value={minute}
   renderSecond = (currentMatch) => {
-    const { secondAriaLabel } = this.props;
+    const { secondAriaLabel, secondPlaceholder } = this.props;
     const { hour, minute, second } = this.state;
@@ -722,5 +734,6 @@
         {...this.commonTimeInputProps}
+        ariaLabel={secondAriaLabel}
         hour={hour}
         minute={minute}
-        secondAriaLabel={secondAriaLabel}
+        placeholder={secondPlaceholder}
         showLeadingZeros={showLeadingZeros}
@@ -741,3 +754,3 @@ value={second}
         {...this.commonTimeInputProps}
-        amPmAriaLabel={amPmAriaLabel}
+        ariaLabel={amPmAriaLabel}
         locale={locale}
@@ -783,2 +796,3 @@ onChange={this.onChangeAmPm}
         key="time"
+        ariaLabel={nativeInputAriaLabel}
         disabled={disabled}
@@ -788,3 +802,2 @@ maxDate={maxDate || defaultMaxDate}
         name={name}
-        nativeInputAriaLabel={nativeInputAriaLabel}
         onChange={this.onChangeNative}
@@ -828,5 +841,7 @@ required={required}
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disabled: PropTypes.bool,
   format: PropTypes.string,
   hourAriaLabel: PropTypes.string,
+  hourPlaceholder: PropTypes.string,
   isWidgetOpen: PropTypes.bool,
@@ -838,3 +853,5 @@ locale: PropTypes.string,
   minuteAriaLabel: PropTypes.string,
+  minutePlaceholder: PropTypes.string,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
@@ -845,2 +862,3 @@ nativeInputAriaLabel: PropTypes.string,
   secondAriaLabel: PropTypes.string,
+  secondPlaceholder: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
@@ -852,4 +870,5 @@ value: PropTypes.oneOfType([
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DateTimeInput);

src/DateTimeInput/__tests__/NativeInput.jsx

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

src/DateTimePicker.jsx

@@ -195,2 +195,3 @@ import React, { PureComponent } from 'react';
       dayAriaLabel,
+      dayPlaceholder,
       disableCalendar,
@@ -200,2 +201,3 @@ disabled,
       hourAriaLabel,
+      hourPlaceholder,
       locale,
@@ -206,3 +208,5 @@ maxDate,
       minuteAriaLabel,
+      minutePlaceholder,
       monthAriaLabel,
+      monthPlaceholder,
       name,
@@ -212,5 +216,7 @@ nativeInputAriaLabel,
       secondAriaLabel,
+      secondPlaceholder,
       showLeadingZeros,
       value,
       yearAriaLabel,
+      yearPlaceholder,
     } = this.props;
@@ -232,2 +238,11 @@ const { isCalendarOpen, isClockOpen } = this.state;
 
+    const placeholderProps = {
+      dayPlaceholder,
+      hourPlaceholder,
+      minutePlaceholder,
+      monthPlaceholder,
+      secondPlaceholder,
+      yearPlaceholder,
+    };
+
     return (
@@ -237,2 +252,3 @@ <div className={`${baseClassName}__wrapper`}>
           {...ariaLabelProps}
+          {...placeholderProps}
           className={`${baseClassName}__inputGroup`}
@@ -444,2 +460,3 @@ disabled={disabled}
   dayAriaLabel: PropTypes.string,
+  dayPlaceholder: PropTypes.string,
   disableCalendar: PropTypes.bool,
@@ -450,2 +467,3 @@ disableClock: PropTypes.bool,
   hourAriaLabel: PropTypes.string,
+  hourPlaceholder: PropTypes.string,
   isCalendarOpen: PropTypes.bool,
@@ -458,3 +476,5 @@ isClockOpen: PropTypes.bool,
   minuteAriaLabel: PropTypes.string,
+  minutePlaceholder: PropTypes.string,
   monthAriaLabel: PropTypes.string,
+  monthPlaceholder: PropTypes.string,
   name: PropTypes.string,
@@ -470,2 +490,3 @@ nativeInputAriaLabel: PropTypes.string,
   secondAriaLabel: PropTypes.string,
+  secondPlaceholder: PropTypes.string,
   showLeadingZeros: PropTypes.bool,
@@ -477,4 +498,5 @@ value: PropTypes.oneOfType([
   yearAriaLabel: PropTypes.string,
+  yearPlaceholder: PropTypes.string,
 };
 
 polyfill(DateTimePicker);

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

185647

increased by2.62%

Lines of code

4534

increased by2.39%

Number of lines in readme file

159

increased by3.92%

Dependency changes

• Updatedreact-date-picker@^7.8.0

• Updatedreact-time-picker@^3.7.0