Sets time to start/end of day when selecting date in the timepicker (#27186)

* Sets start date time to start of day and end date time to  end of day when clicking a date in the date picker

* Added check for if date or time was selected in date picker

* Updated comment
This commit is contained in:
Catherine Liu 2018-12-17 10:22:27 -07:00 committed by GitHub
parent 1c79f72486
commit 5421473a1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 5 deletions

View file

@ -11,9 +11,9 @@ import { EuiDatePicker } from '@elastic/eui';
import { DatetimeInput } from '../datetime_input';
import './datetime_calendar.scss';
export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
export const DatetimeCalendar = ({ value, onValueChange, onSelect, startDate, endDate }) => (
<div className="canvasDateTimeCal">
<DatetimeInput moment={dateMath.parse(value)} setMoment={onSelect} />
<DatetimeInput moment={dateMath.parse(value)} setMoment={onValueChange} />
<EuiDatePicker
inline
showTimeSelect
@ -29,7 +29,8 @@ export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
DatetimeCalendar.propTypes = {
value: PropTypes.object,
onSelect: PropTypes.func, // Called with a moment
onSelect: PropTypes.func,
onValueChange: PropTypes.func, // Called with a moment
startDate: PropTypes.object, // a moment
endDate: PropTypes.object, // a moment
};

View file

@ -6,6 +6,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { DatetimeCalendar } from '../datetime_calendar';
import './datetime_range_absolute.scss';
@ -16,7 +17,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
value={from}
startDate={from}
endDate={to}
onSelect={val => onSelect(val, to)}
onValueChange={val => onSelect(val, to)}
onSelect={val => {
// sets the time to start of day if only the date was selected
if (moment(from).format('hh:mm:ss a') === val.format('hh:mm:ss a'))
onSelect(val.startOf('day'), to);
else onSelect(val, to);
}}
/>
</div>
<div>
@ -24,7 +31,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
value={to}
startDate={from}
endDate={to}
onSelect={val => onSelect(from, val)}
onValueChange={val => onSelect(from, val)}
onSelect={val => {
// set the time to end of day if only the date was selected
if (moment(to).format('hh:mm:ss a') === val.format('hh:mm:ss a'))
onSelect(from, moment(val).endOf('day'));
else onSelect(from, val);
}}
/>
</div>
</div>