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:
parent
1c79f72486
commit
5421473a1c
|
@ -11,9 +11,9 @@ import { EuiDatePicker } from '@elastic/eui';
|
||||||
import { DatetimeInput } from '../datetime_input';
|
import { DatetimeInput } from '../datetime_input';
|
||||||
import './datetime_calendar.scss';
|
import './datetime_calendar.scss';
|
||||||
|
|
||||||
export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
|
export const DatetimeCalendar = ({ value, onValueChange, onSelect, startDate, endDate }) => (
|
||||||
<div className="canvasDateTimeCal">
|
<div className="canvasDateTimeCal">
|
||||||
<DatetimeInput moment={dateMath.parse(value)} setMoment={onSelect} />
|
<DatetimeInput moment={dateMath.parse(value)} setMoment={onValueChange} />
|
||||||
<EuiDatePicker
|
<EuiDatePicker
|
||||||
inline
|
inline
|
||||||
showTimeSelect
|
showTimeSelect
|
||||||
|
@ -29,7 +29,8 @@ export const DatetimeCalendar = ({ value, onSelect, startDate, endDate }) => (
|
||||||
|
|
||||||
DatetimeCalendar.propTypes = {
|
DatetimeCalendar.propTypes = {
|
||||||
value: PropTypes.object,
|
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
|
startDate: PropTypes.object, // a moment
|
||||||
endDate: PropTypes.object, // a moment
|
endDate: PropTypes.object, // a moment
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import moment from 'moment';
|
||||||
import { DatetimeCalendar } from '../datetime_calendar';
|
import { DatetimeCalendar } from '../datetime_calendar';
|
||||||
import './datetime_range_absolute.scss';
|
import './datetime_range_absolute.scss';
|
||||||
|
|
||||||
|
@ -16,7 +17,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
|
||||||
value={from}
|
value={from}
|
||||||
startDate={from}
|
startDate={from}
|
||||||
endDate={to}
|
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>
|
||||||
<div>
|
<div>
|
||||||
|
@ -24,7 +31,13 @@ export const DatetimeRangeAbsolute = ({ from, to, onSelect }) => (
|
||||||
value={to}
|
value={to}
|
||||||
startDate={from}
|
startDate={from}
|
||||||
endDate={to}
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue