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 './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
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue