react-modern-calendar-datepicker

react-modern-calendar-datepicker copied to clipboard

We need this button (remove icon) for clear selected date

Hi, It's quite easy to achieve that. You can render a custom input using renderInput prop and use a button in that, and by attaching an event listener to the button, you can clear the state containing the date picker value. Another way is to nest the <DatePicker /> component in a div element with position: relative;, and have the button as absolute in the div.

@Kiarash-Z , there is a problem when the clear button clicked, the datepicker will appear again to select a date and won't disappear until click away. It would be nice to have destroy method to kill datepicker after remove button clicked.

@Kiarash-Z , there is a problem when the clear button clicked, the datepicker will appear again to select a date and won't disappear until click away. It would be nice to have destroy method to kill datepicker after remove button clicked.

I tried to handle it via event bubbling but it didn't work.

I used a code like this and it worked properly.

export default ({ value, onChange, ...otherProps}) => {
	const onClear = useCallback(() => {
		onChange(null);
	}, [onChange]);

	return (
		<div className="relative container">
			<DatePicker
				value={value}
				onChange={onChange}
				{...otherProps} />
			{value ? <CrossIcon onClick={onClear} className="clear-button" /> : null}
		</div>
	);
};

.container {
    .clear-button {
        position: absolute;
        margin-left: 8px;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);

        z-index: 100; // because input's z-index is 100

        color: hsl(0,0%,80%);
        &:hover {
            color: hsl(0, 0%, 60%);
        }
    }
}