97 lines
3.5 KiB
JavaScript
97 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import DatePicker from 'react-datepicker';
|
|
import 'react-datepicker/dist/react-datepicker.css';
|
|
|
|
const DateRangeSelector = ({
|
|
startDate,
|
|
endDate,
|
|
onStartDateChange,
|
|
onEndDateChange,
|
|
onApply
|
|
}) => {
|
|
return (
|
|
<div style={{
|
|
marginTop: 10,
|
|
backgroundColor: '#f5f5f5',
|
|
padding: '15px',
|
|
borderRadius: '4px'
|
|
}}>
|
|
<div style={{
|
|
marginBottom: '10px',
|
|
fontWeight: '500',
|
|
color: '#555'
|
|
}}>
|
|
Укажите диапазон дат:
|
|
</div>
|
|
<div style={{
|
|
display: 'flex',
|
|
gap: '10px',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'flex-end'
|
|
}}>
|
|
<div style={{ flex: '1 1 200px' }}>
|
|
<DatePicker
|
|
selected={startDate}
|
|
onChange={onStartDateChange}
|
|
showTimeSelect
|
|
timeFormat="HH:mm"
|
|
timeIntervals={15}
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
placeholderText="Начальная дата"
|
|
customInput={
|
|
<input style={{
|
|
backgroundColor: '#f9f9f9',
|
|
color: "#555",
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
border: '1px solid #ddd'
|
|
}} />
|
|
}
|
|
/>
|
|
</div>
|
|
<div style={{ flex: '1 1 200px' }}>
|
|
<DatePicker
|
|
selected={endDate}
|
|
onChange={onEndDateChange}
|
|
showTimeSelect
|
|
timeFormat="HH:mm"
|
|
timeIntervals={15}
|
|
dateFormat="yyyy-MM-dd HH:mm"
|
|
placeholderText="Конечная дата"
|
|
customInput={
|
|
<input style={{
|
|
backgroundColor: '#f9f9f9',
|
|
color: "#555",
|
|
width: '100%',
|
|
padding: '8px 12px',
|
|
borderRadius: '4px',
|
|
border: '1px solid #ddd'
|
|
}} />
|
|
}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={onApply}
|
|
style={{
|
|
padding: '8px 16px',
|
|
backgroundColor: '#4a6baf',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.2s',
|
|
flex: '0 0 auto',
|
|
height: '36px'
|
|
}}
|
|
onMouseOver={(e) => e.target.style.backgroundColor = '#3a5a9f'}
|
|
onMouseOut={(e) => e.target.style.backgroundColor = '#4a6baf'}
|
|
>
|
|
Применить
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DateRangeSelector; |