🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-datetime-picker

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datetime-picker - npm Package Compare versions

Comparing version

3.4.3
to
3.5.0

69

dist/DateTimeInput.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -66,5 +66,5 @@ Object.defineProperty(exports, "__esModule", {

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

@@ -214,2 +214,6 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var formatNumber = (0, _dateFormatter.getNumberFormatter)({
useGrouping: false
});
var DateTimeInput = /*#__PURE__*/function (_PureComponent) {

@@ -417,4 +421,4 @@ _inherits(DateTimeInput, _PureComponent);

})) {
var year = parseInt(values.year, 10);
var monthIndex = parseInt(values.month, 10) - 1 || 0;
var year = parseInt(values.year, 10) || new Date().getFullYear();
var monthIndex = parseInt(values.month || 1, 10) - 1;
var day = parseInt(values.day || 1, 10);

@@ -451,3 +455,4 @@ var hour = parseInt(values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm) || 0, 10);

}, _this.commonInputProps, {
ariaLabel: dayAriaLabel,
ariaLabel: dayAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -482,3 +487,4 @@ inputRef: _this.dayInput,

}, _this.commonInputProps, {
ariaLabel: monthAriaLabel,
ariaLabel: monthAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -498,3 +504,4 @@ inputRef: _this.monthInput,

}, _this.commonInputProps, {
ariaLabel: monthAriaLabel,
ariaLabel: monthAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -518,3 +525,4 @@ inputRef: _this.monthInput,

}, _this.commonInputProps, {
ariaLabel: yearAriaLabel,
ariaLabel: yearAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -554,3 +562,4 @@ inputRef: _this.yearInput,

amPm: amPm,
ariaLabel: hourAriaLabel,
ariaLabel: hourAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -579,3 +588,4 @@ inputRef: _this.hour12Input,

}, _this.commonInputProps, {
ariaLabel: hourAriaLabel,
ariaLabel: hourAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -606,3 +616,4 @@ inputRef: _this.hour24Input,

}, _this.commonInputProps, {
ariaLabel: minuteAriaLabel,
ariaLabel: minuteAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -635,3 +646,4 @@ hour: hour,

}, _this.commonInputProps, {
ariaLabel: secondAriaLabel,
ariaLabel: secondAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -656,3 +668,4 @@ hour: hour,

}, _this.commonInputProps, {
ariaLabel: amPmAriaLabel,
ariaLabel: amPmAriaLabel // eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: index === 0 && autoFocus,

@@ -687,11 +700,7 @@ inputRef: _this.amPmInput,

return (0, _dateFormatter.getFormatter)(options);
} // eslint-disable-next-line class-methods-use-this
}
}, {
key: "formatNumber",
get: function get() {
var options = {
useGrouping: false
};
return (0, _dateFormatter.getFormatter)(options);
return formatNumber;
}

@@ -887,10 +896,10 @@ }, {

var className = this.props.className;
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
return /*#__PURE__*/_react["default"].createElement("div", {
className: className,
onClick: this.onClick
}, this.renderNativeInput(), this.renderCustomInputs());
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
_react["default"].createElement("div", {
className: className,
onClick: this.onClick
}, this.renderNativeInput(), this.renderCustomInputs())
);
}

@@ -926,4 +935,4 @@ }], [{

if ( // Toggling calendar visibility resets values
nextState.isCalendarOpen // Flag was toggled
|| datesAreDifferent.apply(void 0, _toConsumableArray(values.map(function (value) {
nextState.isCalendarOpen || // Flag was toggled
datesAreDifferent.apply(void 0, _toConsumableArray(values.map(function (value) {
return getDetailValueFrom({

@@ -930,0 +939,0 @@ value: value,

23

dist/DateTimePicker.js
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -60,5 +60,5 @@ Object.defineProperty(exports, "__esModule", {

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

@@ -353,2 +353,3 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

}, /*#__PURE__*/_react["default"].createElement(_DateTimeInput["default"], _extends({}, ariaLabelProps, placeholderProps, {
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: autoFocus,

@@ -406,2 +407,7 @@ className: "".concat(baseClassName, "__inputGroup"),

return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(_ref) {
if (_ref && !isCalendarOpen) {
_ref.removeAttribute('style');
}
},
className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isCalendarOpen ? 'open' : 'closed'))

@@ -440,2 +446,7 @@ }, /*#__PURE__*/_react["default"].createElement(_reactCalendar["default"], _extends({

return /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
ref: function ref(_ref2) {
if (_ref2 && !isClockOpen) {
_ref2.removeAttribute('style');
}
},
className: (0, _mergeClassNames["default"])(className, "".concat(className, "--").concat(isClockOpen ? 'open' : 'closed'))

@@ -467,8 +478,8 @@ }, /*#__PURE__*/_react["default"].createElement(_reactClock["default"], _extends({

onFocus: this.onFocus,
ref: function ref(_ref) {
if (!_ref) {
ref: function ref(_ref3) {
if (!_ref3) {
return;
}
_this3.wrapper = _ref;
_this3.wrapper = _ref3;
}

@@ -475,0 +486,0 @@ }), this.renderInputs(), this.renderCalendar(), this.renderClock());

39

dist/shared/dateFormatter.js

@@ -6,4 +6,5 @@ "use strict";

});
exports.formatDate = void 0;
exports.getFormatter = getFormatter;
exports.formatDate = void 0;
exports.getNumberFormatter = getNumberFormatter;

@@ -14,8 +15,42 @@ var _getUserLocale = _interopRequireDefault(require("get-user-locale"));

var formatterCache = new Map();
function getFormatter(options) {
return function (locale, date) {
return date.toLocaleString(locale || (0, _getUserLocale["default"])(), options);
var localeWithDefault = locale || (0, _getUserLocale["default"])();
if (!formatterCache.has(localeWithDefault)) {
formatterCache.set(localeWithDefault, new Map());
}
var formatterCacheLocale = formatterCache.get(localeWithDefault);
if (!formatterCacheLocale.has(options)) {
formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault, options).format);
}
return formatterCacheLocale.get(options)(date);
};
}
var numberFormatterCache = new Map();
function getNumberFormatter(options) {
return function (locale, date) {
var localeWithDefault = locale || (0, _getUserLocale["default"])();
if (!numberFormatterCache.has(localeWithDefault)) {
numberFormatterCache.set(localeWithDefault, new Map());
}
var numberFormatterCacheLocale = numberFormatterCache.get(localeWithDefault);
if (!numberFormatterCacheLocale.has(options)) {
numberFormatterCacheLocale.set(options, new Intl.NumberFormat(localeWithDefault, options).format);
}
return numberFormatterCacheLocale.get(options)(date);
};
}
var formatDateOptions = {

@@ -22,0 +57,0 @@ day: 'numeric',

4

dist/shared/propTypes.js

@@ -6,3 +6,3 @@ "use strict";

});
exports.isValueType = exports.isMaxDate = exports.isMinDate = void 0;
exports.isValueType = exports.isMinDate = exports.isMaxDate = void 0;

@@ -13,3 +13,3 @@ var _propTypes = _interopRequireDefault(require("prop-types"));

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

@@ -16,0 +16,0 @@ var allViews = ['hour', 'minute', 'second'];

27

package.json
{
"name": "react-datetime-picker",
"version": "3.4.3",
"version": "3.5.0",
"description": "A date range picker for your React app.",

@@ -14,3 +14,2 @@ "main": "dist/entry.js",

"jest": "jest",
"jest-coverage": "jest --coverage",
"lint": "eslint sample/ src/ test/ --ext .jsx,.js",

@@ -43,5 +42,5 @@ "prepack": "yarn clean && yarn build",

"react-clock": "^3.0.0",
"react-date-picker": "^8.3.3",
"react-fit": "^1.0.3",
"react-time-picker": "^4.4.2"
"react-date-picker": "^8.4.0",
"react-fit": "^1.4.0",
"react-time-picker": "^4.5.0"
},

@@ -54,8 +53,10 @@ "devDependencies": {

"@wojtekmaj/enzyme-adapter-react-17": "^0.6.0",
"babel-eslint": "^10.0.0",
"enzyme": "^3.10.0",
"eslint": "~7.19.0",
"eslint-config-wojtekmaj": "^0.5.0",
"eslint": "^8.5.0",
"eslint-config-wojtekmaj": "^0.6.5",
"husky": "^7.0.0",
"jest": "^27.0.0",
"less": "^4.0.0",
"prettier": "^2.5.0",
"pretty-quick": "^3.1.0",
"react": "^17.0.0",

@@ -66,4 +67,4 @@ "react-dom": "^17.0.0",

"peerDependencies": {
"react": "^16.3.0 || ^17.0.0-0",
"react-dom": "^16.3.0 || ^17.0.0-0"
"react": "^16.3.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0"
},

@@ -74,6 +75,4 @@ "resolutions": {

"files": [
"LICENSE",
"README.md",
"dist/",
"src/"
"dist",
"src"
],

@@ -80,0 +79,0 @@ "repository": {

122

README.md

@@ -1,4 +0,2 @@

[![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) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetime-picker.svg
) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![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) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-datetime-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

@@ -9,10 +7,11 @@ # React-DateTime-Picker

* Supports virtually any language
* No moment.js needed
- Supports virtually any language
- No moment.js needed
## tl;dr
* Install by executing `npm install react-datetime-picker` or `yarn add react-datetime-picker`.
* Import by adding `import DateTimePicker from 'react-datetime-picker'`.
* Use by adding `<DateTimePicker />`. Use `onChange` prop for getting new values.
- Install by executing `npm install react-datetime-picker` or `yarn add react-datetime-picker`.
- Import by adding `import DateTimePicker from 'react-datetime-picker'`.
- Use by adding `<DateTimePicker />`. Use `onChange` prop for getting new values.
## Demo

@@ -24,3 +23,3 @@

## Looking for *just* a date picker or a time picker?
## Looking for _just_ a date picker or a time picker?

@@ -36,5 +35,5 @@ React-DateTime-Picker will play nicely with [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker) and [React-Time-Picker](https://github.com/wojtekmaj/react-time-picker). Check them out!

| React version | Newest compatible React-DateTime-Picker version |
|-------|-------|
| ≥16.3 |latest |
| ≥16.0 |2.x |
| ------------- | ----------------------------------------------- |
| ≥16.3 | latest |
| ≥16.0 | 2.x |

@@ -64,6 +63,3 @@ [React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-DateTime-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).

<div>
<DateTimePicker
onChange={onChange}
value={value}
/>
<DateTimePicker onChange={onChange} value={value} />
</div>

@@ -88,49 +84,49 @@ );

|Prop name|Description|Default value|Example values|
|----|----|----|----|
|amPmAriaLabel|`aria-label` for the AM/PM select input.|n/a|`"Select AM/PM"`|
|autoFocus|Automatically focuses the input on mount.|n/a|`true`|
|calendarAriaLabel|`aria-label` for the calendar button.|n/a|`"Toggle calendar"`|
|calendarClassName|Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|calendarIcon|Content of the calendar button. Setting the value explicitly to `null` will hide the icon.|(default icon)|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
|className|Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|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>|
|clockClassName|Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.|n/a|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
|closeWidgets|Whether to close the widgets on value selection.|`true`|`false`|
|dayAriaLabel|`aria-label` for the day input.|n/a|`"Day"`|
|dayPlaceholder|`placeholder` for the day input.|`"--"`|`"dd"`|
|disabled|Whether the datetime picker should be disabled.|`false`|`true`|
|disableCalendar|When set to `true`, will remove the calendar and the button toggling its visibility.|`false`|`true`|
|disableClock|When set to `true`, will remove the clock.|`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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.|n/a|`"y-MM-dd h:mm:ss a"`|
|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`|
|isClockOpen|Whether the clock should be opened.|`false`|`true`|
|locale|Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).|User's browser settings|`"hu-HU"`|
|maxDate|Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected.|n/a|Date: `new Date()`|
|maxDetail|The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)!|`"minute"`|`"second"`|
|minDate|Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-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"`|
|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"`|
|nativeInputAriaLabel|`aria-label` for the native datetime input.|n/a|`"Date"`|
|onCalendarClose|Function called when the calendar closes.|n/a|`() => alert('Calendar closed')`|
|onCalendarOpen|Function called when the calendar opens.|n/a|`() => alert('Calendar opened')`|
|onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
|onClockClose|Function called when the clock closes.|n/a|`() => alert('Clock closed')`|
|onClockOpen|Function called when the clock opens.|n/a|`() => alert('Clock opened')`|
|openWidgetsOnFocus|Whether to open the widgets on input focus.|`true`|`false`|
|returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.|` "start"`|`"range"`|
|required|Whether datetime input should be required.|`false`|`true`|
|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"`|
| Prop name | Description | Default value | Example values |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- |
| amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` |
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
| calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul> |
| className | Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| 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> |
| clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| closeWidgets | Whether to close the widgets on value selection. | `true` | `false` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` |
| disabled | Whether the datetime picker should be disabled. | `false` | `true` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| disableClock | When set to `true`, will remove the clock. | `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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"y-MM-dd h:mm:ss a"` |
| 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` |
| isClockOpen | Whether the clock should be opened. | `false` | `true` |
| locale | Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)! | `"minute"` | `"second"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-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"` |
| 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"` |
| nativeInputAriaLabel | `aria-label` for the native datetime input. | n/a | `"Date"` |
| onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` |
| onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` |
| onChange | Function called when the user picks a valid datetime. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` |
| onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` |
| onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` |
| openWidgetsOnFocus | Whether to open the widgets on input focus. | `true` | `false` |
| returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | ` "start"` | `"range"` |
| required | Whether datetime input should be required. | `false` | `true` |
| 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"` |

@@ -137,0 +133,0 @@ ### Calendar

229

src/DateTimeInput.jsx

@@ -25,7 +25,4 @@ import React, { createRef, PureComponent } from 'react';

import { getFormatter, formatDate } from './shared/dateFormatter';
import {
convert12to24,
convert24to12,
} from './shared/dates';
import { getFormatter, getNumberFormatter, formatDate } from './shared/dateFormatter';
import { convert12to24, convert24to12 } from './shared/dates';
import { isMaxDate, isMinDate } from './shared/propTypes';

@@ -50,5 +47,5 @@ import { between, getAmPmLabels } from './shared/utils';

return (
(date1 && !date2)
|| (!date1 && date2)
|| (date1 && date2 && date1.getTime() !== date2.getTime())
(date1 && !date2) ||
(!date1 && date2) ||
(date1 && date2 && date1.getTime() !== date2.getTime())
);

@@ -59,5 +56,5 @@ }

return (
year === getYear(date).toString()
&& month === getMonthHuman(date).toString()
&& day === getDate(date).toString()
year === getYear(date).toString() &&
month === getMonthHuman(date).toString() &&
day === getDate(date).toString()
);

@@ -86,5 +83,3 @@ }

function getDetailValue({
value, minDate, maxDate,
}, index) {
function getDetailValue({ value, minDate, maxDate }, index) {
const valuePiece = getValue(value, index);

@@ -124,37 +119,39 @@

const pattern = new RegExp(
Object.keys(elementFunctions).map((el) => `${el}+`).join('|'), 'g',
Object.keys(elementFunctions)
.map((el) => `${el}+`)
.join('|'),
'g',
);
const matches = placeholder.match(pattern);
return placeholder.split(pattern)
.reduce((arr, element, index) => {
const divider = element && (
// eslint-disable-next-line react/no-array-index-key
<Divider key={`separator_${index}`}>
{element}
</Divider>
);
const res = [...arr, divider];
const currentMatch = matches && matches[index];
return placeholder.split(pattern).reduce((arr, element, index) => {
const divider = element && (
// eslint-disable-next-line react/no-array-index-key
<Divider key={`separator_${index}`}>{element}</Divider>
);
const res = [...arr, divider];
const currentMatch = matches && matches[index];
if (currentMatch) {
const renderFunction = (
elementFunctions[currentMatch]
|| elementFunctions[
Object.keys(elementFunctions)
.find((elementFunction) => currentMatch.match(elementFunction))
]
);
if (currentMatch) {
const renderFunction =
elementFunctions[currentMatch] ||
elementFunctions[
Object.keys(elementFunctions).find((elementFunction) =>
currentMatch.match(elementFunction),
)
];
if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
res.push(currentMatch);
} else {
res.push(renderFunction(currentMatch, index));
usedFunctions.push(renderFunction);
}
if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
res.push(currentMatch);
} else {
res.push(renderFunction(currentMatch, index));
usedFunctions.push(renderFunction);
}
return res;
}, []);
}
return res;
}, []);
}
const formatNumber = getNumberFormatter({ useGrouping: false });
export default class DateTimeInput extends PureComponent {

@@ -183,9 +180,7 @@ static getDerivedStateFromProps(nextProps, prevState) {

// Toggling calendar visibility resets values
nextState.isCalendarOpen // Flag was toggled
|| datesAreDifferent(
nextState.isCalendarOpen || // Flag was toggled
datesAreDifferent(
...values.map((value) => getDetailValueFrom({ value, minDate, maxDate })),
)
|| datesAreDifferent(
...values.map((value) => getDetailValueTo({ value, minDate, maxDate })),
)
) ||
datesAreDifferent(...values.map((value) => getDetailValueTo({ value, minDate, maxDate })))
) {

@@ -239,3 +234,3 @@ if (nextValue) {

secondInput= createRef();
secondInput = createRef();

@@ -257,7 +252,4 @@ get formatTime() {

// eslint-disable-next-line class-methods-use-this
get formatNumber() {
const options = { useGrouping: false };
return getFormatter(options);
return formatNumber;
}

@@ -287,3 +279,5 @@

function formatDatePiece(name, dateToFormat) {
return getFormatter({ useGrouping: false, [name]: 'numeric' })(locale, dateToFormat).match(/\d{1,}/);
return getFormatter({ useGrouping: false, [name]: 'numeric' })(locale, dateToFormat).match(
/\d{1,}/,
);
}

@@ -312,10 +306,8 @@

return (
this.formatTime(locale, date)
.replace(this.formatNumber(locale, hour12), 'h')
.replace(this.formatNumber(locale, hour24), 'H')
.replace(this.formatNumber(locale, minute), 'mm')
.replace(this.formatNumber(locale, second), 'ss')
.replace(new RegExp(getAmPmLabels(locale).join('|')), 'a')
);
return this.formatTime(locale, date)
.replace(this.formatNumber(locale, hour12), 'h')
.replace(this.formatNumber(locale, hour24), 'H')
.replace(this.formatNumber(locale, minute), 'mm')
.replace(this.formatNumber(locale, second), 'ss')
.replace(new RegExp(getAmPmLabels(locale).join('|')), 'a');
}

@@ -366,10 +358,3 @@

get commonInputProps() {
const {
className,
disabled,
isWidgetOpen,
maxDate,
minDate,
required,
} = this.props;
const { className, disabled, isWidgetOpen, maxDate, minDate, required } = this.props;

@@ -414,3 +399,3 @@ return {

}
}
};

@@ -426,3 +411,4 @@ onKeyDown = (event) => {

const { target: input } = event;
const property = event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
const property =
event.key === 'ArrowLeft' ? 'previousElementSibling' : 'nextElementSibling';
const nextInput = findInput(input, property);

@@ -434,3 +420,3 @@ focus(nextInput);

}
}
};

@@ -455,3 +441,3 @@ onKeyUp = (event) => {

*/
if ((value * 10 > max) || (value.length >= max.length)) {
if (value * 10 > max || value.length >= max.length) {
const property = 'nextElementSibling';

@@ -461,3 +447,3 @@ const nextInput = findInput(input, property);

}
}
};

@@ -481,16 +467,10 @@ /**

case 'hour24': {
this.setState(
{ hour: value },
this.onChangeExternal,
);
this.setState({ hour: value }, this.onChangeExternal);
break;
}
default: {
this.setState(
{ [name]: value },
this.onChangeExternal,
);
this.setState({ [name]: value }, this.onChangeExternal);
}
}
}
};

@@ -533,3 +513,3 @@ /**

onChange(processedValue, false);
}
};

@@ -539,7 +519,4 @@ onChangeAmPm = (event) => {

this.setState(
({ amPm: value }),
this.onChangeExternal,
);
}
this.setState({ amPm: value }, this.onChangeExternal);
};

@@ -580,4 +557,4 @@ /**

) {
const year = parseInt(values.year, 10);
const monthIndex = parseInt(values.month, 10) - 1 || 0;
const year = parseInt(values.year, 10) || new Date().getFullYear();
const monthIndex = parseInt(values.month || 1, 10) - 1;
const day = parseInt(values.day || 1, 10);

@@ -591,14 +568,10 @@ const hour = parseInt(values.hour24 || convert12to24(values.hour12, values.amPm) || 0, 10);

proposedValue.setHours(hour, minute, second, 0);
const processedValue = proposedValue;
onChange(processedValue, false);
}
}
};
renderDay = (currentMatch, index) => {
const {
autoFocus,
dayAriaLabel,
dayPlaceholder,
showLeadingZeros,
} = this.props;
const { autoFocus, dayAriaLabel, dayPlaceholder, showLeadingZeros } = this.props;
const { day, month, year } = this.state;

@@ -617,2 +590,3 @@

ariaLabel={dayAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -627,12 +601,6 @@ inputRef={this.dayInput}

);
}
};
renderMonth = (currentMatch, index) => {
const {
autoFocus,
locale,
monthAriaLabel,
monthPlaceholder,
showLeadingZeros,
} = this.props;
const { autoFocus, locale, monthAriaLabel, monthPlaceholder, showLeadingZeros } = this.props;
const { month, year } = this.state;

@@ -650,2 +618,3 @@

ariaLabel={monthAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -669,2 +638,3 @@ inputRef={this.monthInput}

ariaLabel={monthAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -678,3 +648,3 @@ inputRef={this.monthInput}

);
}
};

@@ -690,2 +660,3 @@ renderYear = (currentMatch, index) => {

ariaLabel={yearAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -698,3 +669,3 @@ inputRef={this.yearInput}

);
}
};

@@ -725,2 +696,3 @@ renderHour = (currentMatch, index) => {

ariaLabel={hourAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -733,3 +705,3 @@ inputRef={this.hour12Input}

);
}
};

@@ -751,2 +723,3 @@ renderHour24 = (currentMatch, index) => {

ariaLabel={hourAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -759,3 +732,3 @@ inputRef={this.hour24Input}

);
}
};

@@ -777,2 +750,3 @@ renderMinute = (currentMatch, index) => {

ariaLabel={minuteAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -786,3 +760,3 @@ hour={hour}

);
}
};

@@ -804,2 +778,3 @@ renderSecond = (currentMatch, index) => {

ariaLabel={secondAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -814,3 +789,3 @@ hour={hour}

);
}
};

@@ -826,2 +801,3 @@ renderAmPm = (currentMatch, index) => {

ariaLabel={amPmAriaLabel}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={index === 0 && autoFocus}

@@ -834,3 +810,3 @@ inputRef={this.amPmInput}

);
}
};

@@ -857,10 +833,3 @@ renderCustomInputs() {

renderNativeInput() {
const {
disabled,
maxDate,
minDate,
name,
nativeInputAriaLabel,
required,
} = this.props;
const { disabled, maxDate, minDate, name, nativeInputAriaLabel, required } = this.props;
const { value } = this.state;

@@ -887,9 +856,5 @@

/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
return (
<div
className={className}
onClick={this.onClick}
>
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className={className} onClick={this.onClick}>
{this.renderNativeInput()}

@@ -907,6 +872,3 @@ {this.renderCustomInputs()}

const isValue = PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]);
const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);

@@ -939,8 +901,5 @@ DateTimeInput.propTypes = {

showLeadingZeros: PropTypes.bool,
value: PropTypes.oneOfType([
isValue,
PropTypes.arrayOf(isValue),
]),
value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
yearAriaLabel: PropTypes.string,
yearPlaceholder: PropTypes.string,
};

450

src/DateTimeInput.spec.jsx

@@ -55,5 +55,3 @@ import React from 'react';

it('renders a native input and custom inputs', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
);
const component = mount(<DateTimeInput {...defaultProps} />);

@@ -68,8 +66,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

it('does not render second input when maxDetail is "minute" or less', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="minute"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="minute" />);

@@ -95,8 +88,3 @@ const customInputs = component.find('input[type="number"]');

it('does not render second and minute inputs when maxDetail is "hour" or less', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="hour"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="hour" />);

@@ -124,9 +112,3 @@ const customInputs = component.find('input[type="number"]');

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" value={date} />);

@@ -148,9 +130,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" value={date} />);

@@ -172,9 +148,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" value={date} />);

@@ -197,8 +167,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
locale="de-DE"
maxDetail="second"
value={date}
/>,
<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" value={date} />,
);

@@ -218,58 +183,48 @@

itIfFullICU('shows a given date in all inputs correctly given array of Date objects (24-hour format)', () => {
const date = [new Date(2017, 8, 30, 22, 17, 0), new Date(2017, 8, 30, 0, 0, 0, -1)];
itIfFullICU(
'shows a given date in all inputs correctly given array of Date objects (24-hour format)',
() => {
const date = [new Date(2017, 8, 30, 22, 17, 0), new Date(2017, 8, 30, 0, 0, 0, -1)];
const component = mount(
<DateTimeInput
{...defaultProps}
locale="de-DE"
maxDetail="second"
value={date}
/>,
);
const component = mount(
<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" value={date} />,
);
const nativeInput = component.find('input[type="datetime-local"]');
const customInputs = component.find('input[type="number"]');
const nativeInput = component.find('input[type="datetime-local"]');
const customInputs = component.find('input[type="number"]');
expect(nativeInput.prop('value')).toBe('2017-09-30T22:17:00');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(customInputs.at(3).prop('value')).toBe('22');
expect(customInputs.at(4).prop('value')).toBe('17');
expect(customInputs.at(5).prop('value')).toBe('0');
});
expect(nativeInput.prop('value')).toBe('2017-09-30T22:17:00');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(customInputs.at(3).prop('value')).toBe('22');
expect(customInputs.at(4).prop('value')).toBe('17');
expect(customInputs.at(5).prop('value')).toBe('0');
},
);
itIfFullICU('shows a given date in all inputs correctly given ISO string (24-hour format)', () => {
const date = '2017-09-30T22:17:00.000';
itIfFullICU(
'shows a given date in all inputs correctly given ISO string (24-hour format)',
() => {
const date = '2017-09-30T22:17:00.000';
const component = mount(
<DateTimeInput
{...defaultProps}
locale="de-DE"
maxDetail="second"
value={date}
/>,
);
const component = mount(
<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" value={date} />,
);
const nativeInput = component.find('input[type="datetime-local"]');
const customInputs = component.find('input[type="number"]');
const nativeInput = component.find('input[type="datetime-local"]');
const customInputs = component.find('input[type="number"]');
expect(nativeInput.prop('value')).toBe('2017-09-30T22:17:00');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(customInputs.at(3).prop('value')).toBe('22');
expect(customInputs.at(4).prop('value')).toBe('17');
expect(customInputs.at(5).prop('value')).toBe('0');
});
expect(nativeInput.prop('value')).toBe('2017-09-30T22:17:00');
expect(customInputs.at(0).prop('value')).toBe('2017');
expect(customInputs.at(1).prop('value')).toBe('9');
expect(customInputs.at(2).prop('value')).toBe('30');
expect(customInputs.at(3).prop('value')).toBe('22');
expect(customInputs.at(4).prop('value')).toBe('17');
expect(customInputs.at(5).prop('value')).toBe('0');
},
);
it('shows empty value in all inputs correctly given null', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={null}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" value={null} />);

@@ -290,7 +245,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={[null, null]}
/>,
<DateTimeInput {...defaultProps} maxDetail="second" value={[null, null]} />,
);

@@ -313,9 +264,3 @@

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" value={date} />);

@@ -337,8 +282,3 @@ component.setProps({ value: null });

it('renders custom inputs in a proper order (12-hour format)', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="second" />);

@@ -356,9 +296,3 @@ const customInputs = component.find('input[type="number"]');

itIfFullICU('renders custom inputs in a proper order (24-hour format)', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
locale="de-DE"
maxDetail="second"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} locale="de-DE" maxDetail="second" />);

@@ -377,8 +311,3 @@ const customInputs = component.find('input[type="number"]');

it('renders "y" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="y"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="y" />);

@@ -393,8 +322,3 @@ const componentInput = component.find('YearInput');

it('renders "yyyy" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="yyyy"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="yyyy" />);

@@ -409,8 +333,3 @@ const componentInput = component.find('YearInput');

it('renders "M" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="M"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="M" />);

@@ -425,8 +344,3 @@ const componentInput = component.find('MonthInput');

it('renders "MM" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="MM"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="MM" />);

@@ -442,8 +356,3 @@ const componentInput = component.find('MonthInput');

it('renders "MMM" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="MMM"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="MMM" />);

@@ -459,8 +368,3 @@ const componentSelect = component.find('MonthSelect');

it('renders "MMMM" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="MMMM"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="MMMM" />);

@@ -476,8 +380,3 @@ const componentSelect = component.find('MonthSelect');

it('renders "d" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="d"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="d" />);

@@ -492,8 +391,3 @@ const componentInput = component.find('DayInput');

it('renders "dd" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="dd"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="dd" />);

@@ -511,8 +405,3 @@ const componentInput = component.find('DayInput');

const renderComponent = () => mount(
<DateTimeInput
{...defaultProps}
format="ddd"
/>,
);
const renderComponent = () => mount(<DateTimeInput {...defaultProps} format="ddd" />);

@@ -525,8 +414,3 @@ expect(renderComponent).toThrow('Unsupported token: ddd');

it('renders "yyyy-MM-dd" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="yyyy-MM-d"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="yyyy-MM-d" />);

@@ -548,8 +432,3 @@ const monthInput = component.find('MonthInput');

it('renders "h" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="h"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="h" />);

@@ -564,8 +443,3 @@ const componentInput = component.find('Hour12Input');

it('renders "hh" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="hh"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="hh" />);

@@ -583,8 +457,3 @@ const componentInput = component.find('Hour12Input');

const renderComponent = () => mount(
<DateTimeInput
{...defaultProps}
format="hhh"
/>,
);
const renderComponent = () => mount(<DateTimeInput {...defaultProps} format="hhh" />);

@@ -597,8 +466,3 @@ expect(renderComponent).toThrow('Unsupported token: hhh');

it('renders "H" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="H"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="H" />);

@@ -613,8 +477,3 @@ const componentInput = component.find('Hour24Input');

it('renders "HH" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="HH"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="HH" />);

@@ -632,8 +491,3 @@ const componentInput = component.find('Hour24Input');

const renderComponent = () => mount(
<DateTimeInput
{...defaultProps}
format="HHH"
/>,
);
const renderComponent = () => mount(<DateTimeInput {...defaultProps} format="HHH" />);

@@ -646,8 +500,3 @@ expect(renderComponent).toThrow('Unsupported token: HHH');

it('renders "m" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="m"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="m" />);

@@ -662,8 +511,3 @@ const componentInput = component.find('MinuteInput');

it('renders "mm" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="mm"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="mm" />);

@@ -681,8 +525,3 @@ const componentInput = component.find('MinuteInput');

const renderComponent = () => mount(
<DateTimeInput
{...defaultProps}
format="mmm"
/>,
);
const renderComponent = () => mount(<DateTimeInput {...defaultProps} format="mmm" />);

@@ -695,8 +534,3 @@ expect(renderComponent).toThrow('Unsupported token: mmm');

it('renders "s" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="s"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="s" />);

@@ -711,8 +545,3 @@ const componentInput = component.find('SecondInput');

it('renders "ss" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="ss"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="ss" />);

@@ -730,8 +559,3 @@ const componentInput = component.find('SecondInput');

const renderComponent = () => mount(
<DateTimeInput
{...defaultProps}
format="sss"
/>,
);
const renderComponent = () => mount(<DateTimeInput {...defaultProps} format="sss" />);

@@ -744,8 +568,3 @@ expect(renderComponent).toThrow('Unsupported token: sss');

it('renders "a" properly', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
format="a"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} format="a" />);

@@ -761,5 +580,3 @@ const componentInput = component.find('AmPm');

it('renders proper input separators', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
);
const component = mount(<DateTimeInput {...defaultProps} />);

@@ -777,8 +594,3 @@ const separators = component.find('.react-datetime-picker__inputGroup__divider');

it('renders proper amount of separators', () => {
const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="hour"
/>,
);
const component = mount(<DateTimeInput {...defaultProps} maxDetail="hour" />);

@@ -793,6 +605,3 @@ const separators = component.find('.react-datetime-picker__inputGroup__divider');

it('jumps to the next field when right arrow is pressed', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -813,6 +622,3 @@ const customInputs = component.find('input[type="number"]');

it('jumps to the next field when date separator key is pressed', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -836,6 +642,3 @@ const customInputs = component.find('input[type="number"]');

it('jumps to the next field when time separator key is pressed', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -859,6 +662,3 @@ const customInputs = component.find('input[type="number"]');

it('does not jump to the next field when right arrow is pressed when the last input is focused', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -877,6 +677,3 @@ const select = component.find('select');

it('jumps to the previous field when left arrow is pressed', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -897,6 +694,3 @@ const customInputs = component.find('input[type="number"]');

it('does not jump to the previous field when left arrow is pressed when the first input is focused', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -915,7 +709,4 @@ const customInputs = component.find('input[type="number"]');

it('jumps to the next field when a value which can\'t be extended to another valid value is entered', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
it("jumps to the next field when a value which can't be extended to another valid value is entered", () => {
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -935,6 +726,3 @@ const customInputs = component.find('input[type="number"]');

it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -954,6 +742,3 @@ const customInputs = component.find('input[type="number"]');

it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
const component = mount(
<DateTimeInput {...defaultProps} />,
{ attachTo: container },
);
const component = mount(<DateTimeInput {...defaultProps} />, { attachTo: container });

@@ -975,9 +760,3 @@ const customInputs = component.find('input[type="number"]');

const component = mount(
<DateTimeInput
{...defaultProps}
onChange={onChange}
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} onChange={onChange} value={date} />);

@@ -1000,9 +779,3 @@ const customInputs = component.find('input[type="number"]');

const component = mount(
<DateTimeInput
{...defaultProps}
onChange={onChange}
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} onChange={onChange} value={date} />);

@@ -1023,2 +796,22 @@ const customInputs = component.find('input[type="number"]');

it('triggers onChange correctly when changed custom input with no year', () => {
const onChange = jest.fn();
const date = new Date(2017, 8, 30, 22, 17, 0);
const component = mount(
<DateTimeInput {...defaultProps} format="dd.MM HH:mm" onChange={onChange} value={date} />,
);
const customInputs = component.find('input[type="number"]');
const hourInput = customInputs.at(2);
hourInput.getDOMNode().value = '20';
hourInput.simulate('change');
const currentYear = new Date().getFullYear();
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith(new Date(currentYear, 8, 30, 20, 17, 0), false);
});
it('triggers onChange correctly when cleared custom inputs', () => {

@@ -1029,8 +822,3 @@ const onChange = jest.fn();

const component = mount(
<DateTimeInput
{...defaultProps}
maxDetail="second"
onChange={onChange}
value={date}
/>,
<DateTimeInput {...defaultProps} maxDetail="second" onChange={onChange} value={date} />,
);

@@ -1041,3 +829,3 @@

customInputs.forEach((customInput) => {
customInput.getDOMNode().value = ''; // eslint-disable-line no-param-reassign
customInput.getDOMNode().value = '';
customInput.simulate('change');

@@ -1054,9 +842,3 @@ });

const component = mount(
<DateTimeInput
{...defaultProps}
onChange={onChange}
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} onChange={onChange} value={date} />);

@@ -1078,9 +860,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
onChange={onChange}
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} onChange={onChange} value={date} />);

@@ -1104,9 +880,3 @@ const nativeInput = component.find('input[type="datetime-local"]');

const component = mount(
<DateTimeInput
{...defaultProps}
onChange={onChange}
value={date}
/>,
);
const component = mount(<DateTimeInput {...defaultProps} onChange={onChange} value={date} />);

@@ -1113,0 +883,0 @@ const nativeInput = component.find('input[type="datetime-local"]');

8

src/DateTimeInput/NativeInput.jsx

@@ -28,3 +28,4 @@ import React from 'react';

case 'minute':
return (receivedValue) => `${getISOLocalDate(receivedValue)}T${getHoursMinutes(receivedValue)}`;
return (receivedValue) =>
`${getISOLocalDate(receivedValue)}T${getHoursMinutes(receivedValue)}`;
case 'second':

@@ -84,7 +85,4 @@ return getISOLocalDateTime;

required: PropTypes.bool,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]),
value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
valueType: isValueType,
};

171

src/DateTimeInput/NativeInput.spec.jsx

@@ -13,5 +13,3 @@ import React from 'react';

it('renders an input', () => {
const component = shallow(
<NativeInput {...defaultProps} />,
);
const component = shallow(<NativeInput {...defaultProps} />);

@@ -26,8 +24,3 @@ const input = component.find('input');

const component = shallow(
<NativeInput
{...defaultProps}
ariaLabel={nativeInputAriaLabel}
/>,
);
const component = shallow(<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />);

@@ -42,8 +35,3 @@ const select = component.find('input');

const component = shallow(
<NativeInput
{...defaultProps}
name={name}
/>,
);
const component = shallow(<NativeInput {...defaultProps} name={name} />);

@@ -60,14 +48,7 @@ const input = component.find('input');

${'hour'} | ${'2017-09-30T22:00'}
`('displays given value properly if valueType is $valueType', ({
valueType,
parsedValue,
}) => {
`('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
const value = new Date(2017, 8, 30, 22, 17, 41);
const component = shallow(
<NativeInput
{...defaultProps}
value={value}
valueType={valueType}
/>,
<NativeInput {...defaultProps} value={value} valueType={valueType} />,
);

@@ -82,5 +63,3 @@

it('does not disable input by default', () => {
const component = shallow(
<NativeInput {...defaultProps} />,
);
const component = shallow(<NativeInput {...defaultProps} />);

@@ -93,8 +72,3 @@ const input = component.find('input');

it('disables input given disabled flag', () => {
const component = shallow(
<NativeInput
{...defaultProps}
disabled
/>,
);
const component = shallow(<NativeInput {...defaultProps} disabled />);

@@ -107,5 +81,3 @@ const input = component.find('input');

it('is not required input by default', () => {
const component = shallow(
<NativeInput {...defaultProps} />,
);
const component = shallow(<NativeInput {...defaultProps} />);

@@ -118,8 +90,3 @@ const input = component.find('input');

it('required input given required flag', () => {
const component = shallow(
<NativeInput
{...defaultProps}
required
/>,
);
const component = shallow(<NativeInput {...defaultProps} required />);

@@ -132,5 +99,3 @@ const input = component.find('input');

it('has no min by default', () => {
const component = shallow(
<NativeInput {...defaultProps} />,
);
const component = shallow(<NativeInput {...defaultProps} />);

@@ -147,18 +112,18 @@ const input = component.find('input');

${'hour'} | ${'2017-09-30T22:00'}
`('has proper min for minDate which is a full hour if valueType is $valueType', ({
valueType,
parsedMin,
}) => {
const component = shallow(
<NativeInput
{...defaultProps}
minDate={new Date(2017, 8, 30, 22, 0, 0)}
valueType={valueType}
/>,
);
`(
'has proper min for minDate which is a full hour if valueType is $valueType',
({ valueType, parsedMin }) => {
const component = shallow(
<NativeInput
{...defaultProps}
minDate={new Date(2017, 8, 30, 22, 0, 0)}
valueType={valueType}
/>,
);
const input = component.find('input');
const input = component.find('input');
expect(input.prop('min')).toBe(parsedMin);
});
expect(input.prop('min')).toBe(parsedMin);
},
);

@@ -170,23 +135,21 @@ it.each`

${'hour'} | ${'2017-09-30T22:00'}
`('has proper min for minDate which is not a full hour if valueType is $valueType', ({
valueType,
parsedMin,
}) => {
const component = shallow(
<NativeInput
{...defaultProps}
minDate={new Date(2017, 8, 30, 22, 17, 41)}
valueType={valueType}
/>,
);
`(
'has proper min for minDate which is not a full hour if valueType is $valueType',
({ valueType, parsedMin }) => {
const component = shallow(
<NativeInput
{...defaultProps}
minDate={new Date(2017, 8, 30, 22, 17, 41)}
valueType={valueType}
/>,
);
const input = component.find('input');
const input = component.find('input');
expect(input.prop('min')).toBe(parsedMin);
});
expect(input.prop('min')).toBe(parsedMin);
},
);
it('has no max by default', () => {
const component = shallow(
<NativeInput {...defaultProps} />,
);
const component = shallow(<NativeInput {...defaultProps} />);

@@ -203,18 +166,18 @@ const input = component.find('input');

${'hour'} | ${'2017-09-30T22:00'}
`('has proper max for maxDate which is a full hour if valueType is $valueType', ({
valueType,
parsedMax,
}) => {
const component = shallow(
<NativeInput
{...defaultProps}
maxDate={new Date(2017, 8, 30, 22, 0, 0)}
valueType={valueType}
/>,
);
`(
'has proper max for maxDate which is a full hour if valueType is $valueType',
({ valueType, parsedMax }) => {
const component = shallow(
<NativeInput
{...defaultProps}
maxDate={new Date(2017, 8, 30, 22, 0, 0)}
valueType={valueType}
/>,
);
const input = component.find('input');
const input = component.find('input');
expect(input.prop('max')).toBe(parsedMax);
});
expect(input.prop('max')).toBe(parsedMax);
},
);

@@ -226,18 +189,18 @@ it.each`

${'hour'} | ${'2017-09-30T22:00'}
`('has proper max for maxDate which is not a full hour if valueType is $valueType', ({
valueType,
parsedMax,
}) => {
const component = shallow(
<NativeInput
{...defaultProps}
maxDate={new Date(2017, 8, 30, 22, 17, 41)}
valueType={valueType}
/>,
);
`(
'has proper max for maxDate which is not a full hour if valueType is $valueType',
({ valueType, parsedMax }) => {
const component = shallow(
<NativeInput
{...defaultProps}
maxDate={new Date(2017, 8, 30, 22, 17, 41)}
valueType={valueType}
/>,
);
const input = component.find('input');
const input = component.find('input');
expect(input.prop('max')).toBe(parsedMax);
});
expect(input.prop('max')).toBe(parsedMax);
},
);
});

82

src/DateTimePicker.jsx

@@ -43,8 +43,3 @@ import React, { PureComponent } from 'react';

const { isCalendarOpen, isClockOpen } = this.state;
const {
onCalendarClose,
onCalendarOpen,
onClockClose,
onClockOpen,
} = this.props;
const { onCalendarClose, onCalendarOpen, onClockClose, onClockOpen } = this.props;

@@ -83,3 +78,3 @@ const isWidgetOpen = isCalendarOpen || isClockOpen;

}
}
};

@@ -102,5 +97,4 @@ onDateChange = (value, closeWidgets) => {

}
}
};
// eslint-disable-next-line react/destructuring-assignment
onChange = (value, closeWidgets = this.props.closeWidgets) => {

@@ -116,10 +110,6 @@ const { onChange } = this.props;

}
}
};
onFocus = (event) => {
const {
disabled,
onFocus,
openWidgetsOnFocus,
} = this.props;
const { disabled, onFocus, openWidgetsOnFocus } = this.props;

@@ -155,3 +145,3 @@ if (onFocus) {

}
}
};

@@ -162,3 +152,3 @@ onKeyDown = (event) => {

}
}
};

@@ -170,3 +160,3 @@ openClock = () => {

});
}
};

@@ -178,3 +168,3 @@ openCalendar = () => {

});
}
};

@@ -186,3 +176,3 @@ toggleCalendar = () => {

}));
}
};

@@ -200,3 +190,3 @@ closeWidgets = () => {

});
}
};

@@ -211,3 +201,4 @@ stopPropagation = (event) => event.stopPropagation();

const shouldListenWithFallback = typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
const shouldListenWithFallback =
typeof shouldListen !== 'undefined' ? shouldListen : isWidgetOpen;
const fnName = shouldListenWithFallback ? 'addEventListener' : 'removeEventListener';

@@ -280,2 +271,3 @@ outsideActionEvents.forEach((eventName) => document[fnName](eventName, this.onOutsideAction));

{...placeholderProps}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={autoFocus}

@@ -347,3 +339,13 @@ className={`${baseClassName}__inputGroup`}

<Fit>
<div className={mergeClassNames(className, `${className}--${isCalendarOpen ? 'open' : 'closed'}`)}>
<div
ref={(ref) => {
if (ref && !isCalendarOpen) {
ref.removeAttribute('style');
}
}}
className={mergeClassNames(
className,
`${className}--${isCalendarOpen ? 'open' : 'closed'}`,
)}
>
<Calendar

@@ -384,3 +386,10 @@ className={calendarClassName}

<Fit>
<div className={mergeClassNames(className, `${className}--${isClockOpen ? 'open' : 'closed'}`)}>
<div
ref={(ref) => {
if (ref && !isClockOpen) {
ref.removeAttribute('style');
}
}}
className={mergeClassNames(className, `${className}--${isClockOpen ? 'open' : 'closed'}`)}
>
<Clock

@@ -471,6 +480,3 @@ className={clockClassName}

const isValue = PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(Date),
]);
const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]);

@@ -481,17 +487,8 @@ DateTimePicker.propTypes = {

calendarAriaLabel: PropTypes.string,
calendarClassName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
calendarClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
calendarIcon: PropTypes.node,
className: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
clearAriaLabel: PropTypes.string,
clearIcon: PropTypes.node,
clockClassName: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
clockClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
closeWidgets: PropTypes.bool,

@@ -529,8 +526,5 @@ dayAriaLabel: PropTypes.string,

showLeadingZeros: PropTypes.bool,
value: PropTypes.oneOfType([
isValue,
PropTypes.arrayOf(isValue),
]),
value: PropTypes.oneOfType([isValue, PropTypes.arrayOf(isValue)]),
yearAriaLabel: PropTypes.string,
yearPlaceholder: PropTypes.string,
};

208

src/DateTimePicker.spec.jsx

@@ -8,5 +8,3 @@ import React from 'react';

it('passes default name to DateTimeInput', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -21,5 +19,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker name={name} />,
);
const component = mount(<DateTimePicker name={name} />);

@@ -32,5 +28,4 @@ const dateTimeInput = component.find('DateTimeInput');

it('passes autoFocus flag to DateTimeInput', () => {
const component = mount(
<DateTimePicker autoFocus />,
);
// eslint-disable-next-line jsx-a11y/no-autofocus
const component = mount(<DateTimePicker autoFocus />);

@@ -43,5 +38,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('passes disabled flag to DateTimeInput', () => {
const component = mount(
<DateTimePicker disabled />,
);
const component = mount(<DateTimePicker disabled />);

@@ -56,5 +49,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker format={format} />,
);
const component = mount(<DateTimePicker format={format} />);

@@ -80,5 +71,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker {...ariaLabelProps} />,
);
const component = mount(<DateTimePicker {...ariaLabelProps} />);

@@ -111,5 +100,3 @@ const calendarButton = component.find('button.react-datetime-picker__calendar-button');

const component = mount(
<DateTimePicker {...placeholderProps} />,
);
const component = mount(<DateTimePicker {...placeholderProps} />);

@@ -130,5 +117,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker value={value} />,
);
const component = mount(<DateTimePicker value={value} />);

@@ -144,5 +129,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker value={[value1, value2]} />,
);
const component = mount(<DateTimePicker value={[value1, value2]} />);

@@ -158,5 +141,3 @@ const dateTimeInput = component.find('DateTimeInput');

const component = mount(
<DateTimePicker className={className} />,
);
const component = mount(<DateTimePicker className={className} />);

@@ -172,6 +153,3 @@ const wrapperClassName = component.prop('className');

const component = mount(
<DateTimePicker
calendarClassName={calendarClassName}
isCalendarOpen
/>,
<DateTimePicker calendarClassName={calendarClassName} isCalendarOpen />,
);

@@ -188,8 +166,3 @@

const component = mount(
<DateTimePicker
clockClassName={clockClassName}
isClockOpen
/>,
);
const component = mount(<DateTimePicker clockClassName={clockClassName} isClockOpen />);

@@ -203,5 +176,3 @@ const clock = component.find('Clock');

it('renders DateTimeInput component', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -214,5 +185,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('renders clear button', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -225,5 +194,3 @@ const clearButton = component.find('button.react-datetime-picker__clear-button');

it('renders calendar button', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -236,5 +203,3 @@ const calendarButton = component.find('button.react-datetime-picker__calendar-button');

it('renders DateTimeInput and Calendar components when given isCalendarOpen flag', () => {
const component = mount(
<DateTimePicker isCalendarOpen />,
);
const component = mount(<DateTimePicker isCalendarOpen />);

@@ -249,5 +214,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('renders DateTimeInput and Clock components when given isClockOpen flag', () => {
const component = mount(
<DateTimePicker isClockOpen />,
);
const component = mount(<DateTimePicker isClockOpen />);

@@ -262,5 +225,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('does not render Calendar component when given disableCalendar & isCalendarOpen flags', () => {
const component = mount(
<DateTimePicker disableCalendar isCalendarOpen />,
);
const component = mount(<DateTimePicker disableCalendar isCalendarOpen />);

@@ -275,5 +236,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('does not render Clock component when given disableClock & isClockOpen flags', () => {
const component = mount(
<DateTimePicker disableClock isClockOpen />,
);
const component = mount(<DateTimePicker disableClock isClockOpen />);

@@ -288,5 +247,3 @@ const dateTimeInput = component.find('DateTimeInput');

it('opens Calendar component when given isCalendarOpen flag by changing props', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -306,5 +263,3 @@ const calendar = component.find('Calendar');

it('opens Clock component when given isClockOpen flag by changing props', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -324,5 +279,3 @@ const clock = component.find('Clock');

it('opens Calendar component when clicking on a button', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -344,5 +297,3 @@ const calendar = component.find('Calendar');

it('opens Calendar component when focusing on an input inside by default', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -363,5 +314,3 @@ const calendar = component.find('Calendar');

it('opens Calendar component when focusing on an input inside given openWidgetsOnFocus = true', () => {
const component = mount(
<DateTimePicker openWidgetsOnFocus />,
);
const component = mount(<DateTimePicker openWidgetsOnFocus />);

@@ -382,5 +331,3 @@ const calendar = component.find('Calendar');

it('does not open Calendar component when focusing on an input inside given openWidgetsOnFocus = false', () => {
const component = mount(
<DateTimePicker openWidgetsOnFocus={false} />,
);
const component = mount(<DateTimePicker openWidgetsOnFocus={false} />);

@@ -401,5 +348,3 @@ const calendar = component.find('Calendar');

it('does not open Calendar component when focusing on a select element', () => {
const component = mount(
<DateTimePicker format="dd.MMMM.yyyy hh:mm:ss a" />,
);
const component = mount(<DateTimePicker format="dd.MMMM.yyyy hh:mm:ss a" />);

@@ -422,5 +367,3 @@ const calendar = component.find('Calendar');

it('opens Clock component when focusing on an input inside by default', () => {
const component = mount(
<DateTimePicker />,
);
const component = mount(<DateTimePicker />);

@@ -441,5 +384,3 @@ const clock = component.find('Clock');

it('opens Clock component when focusing on an input inside given openWidgetsOnFocus = true', () => {
const component = mount(
<DateTimePicker openWidgetsOnFocus />,
);
const component = mount(<DateTimePicker openWidgetsOnFocus />);

@@ -460,5 +401,3 @@ const clock = component.find('Clock');

it('does not open Clock component when focusing on an input inside given openWidgetsOnFocus = false', () => {
const component = mount(
<DateTimePicker openWidgetsOnFocus={false} />,
);
const component = mount(<DateTimePicker openWidgetsOnFocus={false} />);

@@ -479,5 +418,3 @@ const clock = component.find('Clock');

it('does not open Clock component when focusing on a select element', () => {
const component = mount(
<DateTimePicker format="dd.MMMM.yyyy hh:mm:ss a" />,
);
const component = mount(<DateTimePicker format="dd.MMMM.yyyy hh:mm:ss a" />);

@@ -502,6 +439,3 @@ const clock = component.find('Clock');

const component = mount(
<DateTimePicker isCalendarOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isCalendarOpen />, { attachTo: root });

@@ -520,6 +454,3 @@ const event = document.createEvent('MouseEvent');

const component = mount(
<DateTimePicker isCalendarOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isCalendarOpen />, { attachTo: root });

@@ -538,6 +469,3 @@ const event = document.createEvent('FocusEvent');

const component = mount(
<DateTimePicker isCalendarOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isCalendarOpen />, { attachTo: root });

@@ -556,6 +484,3 @@ const event = document.createEvent('TouchEvent');

const component = mount(
<DateTimePicker isClockOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isClockOpen />, { attachTo: root });

@@ -574,6 +499,3 @@ const event = document.createEvent('MouseEvent');

const component = mount(
<DateTimePicker isClockOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isClockOpen />, { attachTo: root });

@@ -592,6 +514,3 @@ const event = document.createEvent('FocusEvent');

const component = mount(
<DateTimePicker isClockOpen />,
{ attachTo: root },
);
const component = mount(<DateTimePicker isClockOpen />, { attachTo: root });

@@ -607,5 +526,3 @@ const event = document.createEvent('TouchEvent');

it('does not close Calendar component when focused within date inputs', () => {
const component = mount(
<DateTimePicker isCalendarOpen />,
);
const component = mount(<DateTimePicker isCalendarOpen />);

@@ -625,5 +542,3 @@ const customInputs = component.find('input[type="number"]');

it('does not close Clock component when focused within time inputs', () => {
const component = mount(
<DateTimePicker isClockOpen />,
);
const component = mount(<DateTimePicker isClockOpen />);

@@ -643,5 +558,3 @@ const customInputs = component.find('input[type="number"]');

it('closes Clock when Calendar is opened by a click on the calendar icon', () => {
const component = mount(
<DateTimePicker isClockOpen />,
);
const component = mount(<DateTimePicker isClockOpen />);

@@ -662,5 +575,3 @@ const clock = component.find('Clock');

it('closes Calendar when calling internal onChange by default', () => {
const component = mount(
<DateTimePicker isCalendarOpen />,
);
const component = mount(<DateTimePicker isCalendarOpen />);

@@ -675,8 +586,3 @@ const { onChange } = component.instance();

it('does not close Calendar when calling internal onChange with prop closeWidgets = false', () => {
const component = mount(
<DateTimePicker
closeWidgets={false}
isCalendarOpen
/>,
);
const component = mount(<DateTimePicker closeWidgets={false} isCalendarOpen />);

@@ -691,5 +597,3 @@ const { onChange } = component.instance();

it('does not close Calendar when calling internal onChange with closeWidgets = false', () => {
const component = mount(
<DateTimePicker isCalendarOpen />,
);
const component = mount(<DateTimePicker isCalendarOpen />);

@@ -704,5 +608,3 @@ const { onChange } = component.instance();

it('closes Clock when calling internal onChange by default', () => {
const component = mount(
<DateTimePicker isClockOpen />,
);
const component = mount(<DateTimePicker isClockOpen />);

@@ -717,8 +619,3 @@ const { onChange } = component.instance();

it('does not close Clock when calling internal onChange with prop closeWidgets = false', () => {
const component = mount(
<DateTimePicker
closeWidgets={false}
isClockOpen
/>,
);
const component = mount(<DateTimePicker closeWidgets={false} isClockOpen />);

@@ -733,5 +630,3 @@ const { onChange } = component.instance();

it('does not close Clock when calling internal onChange with closeWidgets = false', () => {
const component = mount(
<DateTimePicker isClockOpen />,
);
const component = mount(<DateTimePicker isClockOpen />);

@@ -749,8 +644,3 @@ const { onChange } = component.instance();

const component = mount(
<DateTimePicker
onChange={onChange}
value={new Date(2018, 6, 17)}
/>,
);
const component = mount(<DateTimePicker onChange={onChange} value={new Date(2018, 6, 17)} />);

@@ -790,5 +680,3 @@ const { onChange: onChangeInternal } = component.instance();

const component = mount(
<DateTimePicker onChange={onChange} />,
);
const component = mount(<DateTimePicker onChange={onChange} />);

@@ -795,0 +683,0 @@ const calendar = component.find('Calendar');

6

src/Divider.jsx

@@ -5,7 +5,3 @@ import React from 'react';

export default function Divider({ children }) {
return (
<span className="react-datetime-picker__inputGroup__divider">
{children}
</span>
);
return <span className="react-datetime-picker__inputGroup__divider">{children}</span>;
}

@@ -12,0 +8,0 @@

41

src/shared/dateFormatter.js
import getUserLocale from 'get-user-locale';
const formatterCache = new Map();
export function getFormatter(options) {
return (locale, date) => date.toLocaleString(locale || getUserLocale(), options);
return (locale, date) => {
const localeWithDefault = locale || getUserLocale();
if (!formatterCache.has(localeWithDefault)) {
formatterCache.set(localeWithDefault, new Map());
}
const formatterCacheLocale = formatterCache.get(localeWithDefault);
if (!formatterCacheLocale.has(options)) {
formatterCacheLocale.set(options, new Intl.DateTimeFormat(localeWithDefault, options).format);
}
return formatterCacheLocale.get(options)(date);
};
}
const numberFormatterCache = new Map();
export function getNumberFormatter(options) {
return (locale, date) => {
const localeWithDefault = locale || getUserLocale();
if (!numberFormatterCache.has(localeWithDefault)) {
numberFormatterCache.set(localeWithDefault, new Map());
}
const numberFormatterCacheLocale = numberFormatterCache.get(localeWithDefault);
if (!numberFormatterCacheLocale.has(options)) {
numberFormatterCacheLocale.set(
options,
new Intl.NumberFormat(localeWithDefault, options).format,
);
}
return numberFormatterCacheLocale.get(options)(date);
};
}
const formatDateOptions = { day: 'numeric', month: 'numeric', year: 'numeric' };
export const formatDate = getFormatter(formatDateOptions);

17

src/shared/dates.spec.js

@@ -1,5 +0,2 @@

import {
convert12to24,
convert24to12,
} from './dates';
import { convert12to24, convert24to12 } from './dates';

@@ -33,7 +30,3 @@ describe('convert12to24', () => {

${11} | ${'pm'} | ${23}
`('returns $hour24 for $hour12 $amPm', ({
hour12,
amPm,
hour24,
}) => {
`('returns $hour24 for $hour12 $amPm', ({ hour12, amPm, hour24 }) => {
expect(convert12to24(hour12, amPm)).toBe(hour24);

@@ -70,9 +63,5 @@ });

${23} | ${11} | ${'pm'}
`('returns $hour12 $amPm for $hour24', ({
hour24,
hour12,
amPm,
}) => {
`('returns $hour12 $amPm for $hour24', ({ hour24, hour12, amPm }) => {
expect(convert24to12(hour24)).toEqual([hour12, amPm]);
});
});

16

src/shared/propTypes.js

@@ -14,3 +14,5 @@ import PropTypes from 'prop-types';

if (!(minDate instanceof Date)) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
);
}

@@ -21,3 +23,5 @@

if (maxDate && minDate > maxDate) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof minDate}\` supplied to \`${componentName}\`, minDate cannot be larger than maxDate.`,
);
}

@@ -36,3 +40,5 @@

if (!(maxDate instanceof Date)) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, expected instance of \`Date\`.`,
);
}

@@ -43,3 +49,5 @@

if (minDate && maxDate < minDate) {
return new Error(`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`);
return new Error(
`Invalid prop \`${propName}\` of type \`${typeof maxDate}\` supplied to \`${componentName}\`, maxDate cannot be smaller than minDate.`,
);
}

@@ -46,0 +54,0 @@

4

src/shared/utils.spec.js

@@ -1,4 +0,2 @@

import {
between,
} from './utils';
import { between } from './utils';

@@ -5,0 +3,0 @@ describe('between', () => {

dist/DateTimePicker.less

Sorry, the diff of this file is not supported yet

src/DateTimePicker.less

Sorry, the diff of this file is not supported yet