affiliate/common/components/forms/DateRangePicker.js

/**
 * This uses react-daterange-picker and embed it with formik.
 * And to resolve CSS clash please apply styling as intructed.
 * I will be more than happy,if you contribute to make it better.
 * For more info on props to send, please visit: https://github.com/wojtekmaj/react-daterange-picker
 * @author Roushan Sourav
 */
import React, {memo} from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
import {makeStyles} from '@material-ui/core/styles';

/**
 * How to use this component:
 * 	datePickerContainer: {
		marginTop: '4px',
		borderBottom: '1px solid gray',
		width: 'fit-content',
		marginLeft: 'auto',
	},
	use this styling on Input as 'container={{className: classes.datePickerContainer}'.
**To Resolve CSS clashes
 */
/**
 * To use without formik(I haven't tested it, so test it before sending for production).
 * pass a object containing property value and name to prop field.
 * and to use custom onChange send onChange prop.
 */
const useStyles = makeStyles({
	datePicker: {
		'& .react-daterange-picker__wrapper': {
			border: '0px',
		},
		'& .react-daterange-picker__range-divider': {
			fontSize: 'large',
		},
		'& .react-daterange-picker__button svg': {
			stroke: 'rgba(0, 0, 0, 0.54)',
		},
		'& .react-daterange-picker__inputGroup__input': {
			margin: '0rem !important',
			marginLeft: '-0.54em !important',
			paddingLeft: 'calc(1px + 0.54em) !important',
			height: '100% !important',
		},
	},
});

export default memo(({field, form, clearIcon = null, format = 'dd-MM-yyyy', onChange, ...rest}) => {
	const {setFieldValue} = form;
	const {value, name} = field;
	onChange = onChange ? onChange : (v) => setFieldValue(name, v);
	const classes = useStyles();
	return (
		<span>
			Date &nbsp;
			<DateRangePicker
				className={classes.datePicker}
				clearIcon={clearIcon}
				format={format}
				id='daterangepicker'
				name={name}
				onChange={onChange}
				value={value ? value.map((d) => new Date(d)) : []}
				{...rest}
			/>
		</span>
	);
});