diff --git a/CHANGELOG.md b/CHANGELOG.md index e867ac9c646..343c6359563 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ - Convert `EuiIcon` to TypeScript ([#1355](https://github.com/elastic/eui/pull/1355)) +**Bug fixes** + +- `react-datepicker` set milliseconds to zero when selecting time ([#1361](https://github.com/elastic/eui/pull/1361)) + ## [`5.5.1`](https://github.com/elastic/eui/tree/v5.5.1) **Bug fixes** diff --git a/packages/react-datepicker.js b/packages/react-datepicker.js index 521886523a4..10dd96d0a25 100644 --- a/packages/react-datepicker.js +++ b/packages/react-datepicker.js @@ -785,9 +785,10 @@ function safeDateFormat(date, _ref2) { function setTime(date, _ref3) { var hour = _ref3.hour, minute = _ref3.minute, - second = _ref3.second; + second = _ref3.second, + millisecond = _ref3.millisecond; - date.set({ hour: hour, minute: minute, second: second }); + date.set({ hour: hour, minute: minute, second: second, millisecond: millisecond }); return date; } @@ -801,6 +802,10 @@ function setYear(date, year) { // ** Date Getters ** +function getMillisecond(date) { + return get$1(date, "millisecond"); +} + function getSecond(date) { return get$1(date, "second"); } @@ -2651,7 +2656,8 @@ var Time = function (_React$Component) { var closestTime = setTime(newDate(), { hour: Math.floor(closestMinutes / 60), minute: closestMinutes % 60, - second: 0 + second: 0, + millisecond: 0 }); this.setState({ preSelection: closestTime }); } @@ -8240,7 +8246,8 @@ var DatePicker = function (_React$Component) { changedDate = setTime(newDate(changedDate), { hour: getHour(selected), minute: getMinute(selected), - second: getSecond(selected) + second: getSecond(selected), + millisecond: getMillisecond(selected) }); } if (!_this.props.inline) { @@ -8274,7 +8281,8 @@ var DatePicker = function (_React$Component) { var changedDate = setTime(cloneDate(selected), { hour: getHour(time), minute: getMinute(time), - second: 0 + second: 0, + millisecond: 0 }); _this.setState({ diff --git a/packages/react-datepicker/docs-site/bundle.js b/packages/react-datepicker/docs-site/bundle.js index b41fa75d32a..181d3e7da23 100644 --- a/packages/react-datepicker/docs-site/bundle.js +++ b/packages/react-datepicker/docs-site/bundle.js @@ -26921,7 +26921,8 @@ changedDate = (0, _date_utils.setTime)((0, _date_utils.newDate)(changedDate), { hour: (0, _date_utils.getHour)(selected), minute: (0, _date_utils.getMinute)(selected), - second: (0, _date_utils.getSecond)(selected) + second: (0, _date_utils.getSecond)(selected), + millisecond: (0, _date_utils.getMillisecond)(selected) }); } if (!_this.props.inline) { @@ -26955,7 +26956,8 @@ var changedDate = (0, _date_utils.setTime)((0, _date_utils.cloneDate)(selected), { hour: (0, _date_utils.getHour)(time), minute: (0, _date_utils.getMinute)(time), - second: 0 + second: 0, + millisecond: 0 }); _this.setState({ @@ -29869,6 +29871,7 @@ exports.setMonth = setMonth; exports.setYear = setYear; exports.setUTCOffset = setUTCOffset; + exports.getMillisecond = getMillisecond; exports.getSecond = getSecond; exports.getMinute = getMinute; exports.getHour = getHour; @@ -30029,9 +30032,10 @@ function setTime(date, _ref3) { var hour = _ref3.hour, minute = _ref3.minute, - second = _ref3.second; + second = _ref3.second, + millisecond = _ref3.millisecond; - date.set({ hour: hour, minute: minute, second: second }); + date.set({ hour: hour, minute: minute, second: second, millisecond: millisecond }); return date; } @@ -30049,6 +30053,10 @@ // ** Date Getters ** + function getMillisecond(date) { + return get(date, "millisecond"); + } + function getSecond(date) { return get(date, "second"); } @@ -48724,7 +48732,8 @@ var closestTime = (0, _date_utils.setTime)((0, _date_utils.newDate)(), { hour: Math.floor(closestMinutes / 60), minute: closestMinutes % 60, - second: 0 + second: 0, + millisecond: 0 }); this.setState({ preSelection: closestTime }); } diff --git a/packages/react-datepicker/src/date_utils.js b/packages/react-datepicker/src/date_utils.js index 080ce0aceb0..6ef389ff960 100644 --- a/packages/react-datepicker/src/date_utils.js +++ b/packages/react-datepicker/src/date_utils.js @@ -97,8 +97,8 @@ export function safeDateFormat(date, { dateFormat, locale }) { // ** Date Setters ** -export function setTime(date, { hour, minute, second }) { - date.set({ hour, minute, second }); +export function setTime(date, { hour, minute, second, millisecond }) { + date.set({ hour, minute, second, millisecond }); return date; } @@ -116,6 +116,10 @@ export function setUTCOffset(date, offset) { // ** Date Getters ** +export function getMillisecond(date) { + return get(date, "millisecond"); +} + export function getSecond(date) { return get(date, "second"); } diff --git a/packages/react-datepicker/src/index.jsx b/packages/react-datepicker/src/index.jsx index 39424b72538..03735555bed 100644 --- a/packages/react-datepicker/src/index.jsx +++ b/packages/react-datepicker/src/index.jsx @@ -14,6 +14,7 @@ import { isAfter, equals, setTime, + getMillisecond, getSecond, getMinute, getHour, @@ -443,7 +444,8 @@ export default class DatePicker extends React.Component { changedDate = setTime(newDate(changedDate), { hour: getHour(selected), minute: getMinute(selected), - second: getSecond(selected) + second: getSecond(selected), + millisecond: getMillisecond(selected), }); } if (!this.props.inline) { @@ -484,7 +486,8 @@ export default class DatePicker extends React.Component { const changedDate = setTime(cloneDate(selected), { hour: getHour(time), minute: getMinute(time), - second: 0 + second: 0, + millisecond: 0, }); this.setState({ diff --git a/packages/react-datepicker/src/time.jsx b/packages/react-datepicker/src/time.jsx index d79bc34d292..c151c16f2cc 100644 --- a/packages/react-datepicker/src/time.jsx +++ b/packages/react-datepicker/src/time.jsx @@ -98,7 +98,8 @@ export default class Time extends React.Component { const closestTime = setTime(newDate(), { hour: Math.floor(closestMinutes / 60), minute: closestMinutes % 60, - second: 0 + second: 0, + millisecond: 0, }); this.setState({ preSelection: closestTime }); } @@ -107,7 +108,7 @@ export default class Time extends React.Component { componentDidUpdate() { // scroll to the preSelected time const scrollToElement = this.preselectedLi; - + if (scrollToElement) { // an element matches the selected time, scroll to it scrollToElement.scrollIntoView({ @@ -164,6 +165,8 @@ export default class Time extends React.Component { return; } + + this.props.onChange(time); }; diff --git a/src-docs/src/views/date_picker/time_select.js b/src-docs/src/views/date_picker/time_select.js index 1e8192f349e..ae070bdeefc 100644 --- a/src-docs/src/views/date_picker/time_select.js +++ b/src-docs/src/views/date_picker/time_select.js @@ -36,6 +36,7 @@ export default class extends Component { showTimeSelect selected={this.state.startDate} onChange={this.handleChange} + dateFormat="MM/DD/YYYY HH:mm.ss.SSS" />