Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 4x 4x | import React, { FC } from 'react';
import { DataRangeCalendar, DateRangeButton } from 'ag-ems-ui-library';
const styles = require('./DataRange.module.css');
export const DataRangePopupContent: FC<{
startDate: string | Date;
endDate: string | Date;
minDate: string | Date;
maxDate: string | Date;
minButtonDate?: string | Date;
maxButtonDate?: string | Date;
setStartDate: (value: string | Date) => void;
setEndDate: (value: string | Date) => void;
startLabel?: string;
endLabel?: string;
classes?: string;
startFirst?: boolean;
selectHandler: (value: string) => void;
onStartClick?: () => void;
onEndClick?: () => void;
}> = ({
startDate,
endDate,
minButtonDate,
maxButtonDate,
setStartDate,
setEndDate,
minDate,
maxDate,
startLabel,
endLabel,
classes,
startFirst,
selectHandler,
onStartClick,
onEndClick
}) => {
return (
<div className={`${styles.DataRangePopupContent} ${classes ?? ''}`}>
<div className={styles.DataRangePickers}>
<div className={`${styles.DataRangeFromPicker} ${startFirst ? styles.selected : ''}`}>
<DateRangeButton
name="startDate"
value={startDate}
minDate={minButtonDate}
maxDate={endDate}
onChange={setStartDate}
emptyMessage={startLabel}
onClick={onStartClick}
/>
</div>
<div className={`${styles.DataRangeToPicker} ${!startFirst ? styles.selected : ''}`}>
<DateRangeButton
name="endDate"
value={endDate}
minDate={startDate}
maxDate={maxButtonDate}
onChange={setEndDate}
emptyMessage={endLabel}
onClick={onEndClick}
/>
</div>
</div>
<DataRangeCalendar
startDate={startDate}
endDate={endDate}
minDate={minDate}
maxDate={maxDate}
onSelect={selectHandler}
displayedMonths={13}
/>
</div>
);
}; |