Modify calendar icon to close icon input type date react

Asked Feb 11 '22 at 10:16

Active Feb 14 '22 at 09:38

Viewed 326 times

Hi, I have been using useState inside react, when date is selected. But, if the date is empty or null I want to modify the calendar icon to close icon. when close icon is clicked it should clear the state.

const [selectedDate, setSelectedDate] = useState([null]);

<input className={CSS.dateSearch}
type="date"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}/>

edited Feb 14 '22 at 09:38

asked Feb 11 '22 at 10:16

ReactDev

you can use inline if `selected ? 'yes' : 'no'` – Martin Rützy Feb 11 '22 at 12:42
Yeah but the problem is I cant able to change the icon using css – ReactDev Feb 11 '22 at 14:28
what calendar do you use? please share your code! no one is able to answer without code or demo – Martin Rützy Feb 13 '22 at 07:52
I have added the image on the top. In that there is a calendar icon. When a date is selected from the picker, the icon should be changed to a close icon and when a user clicks on close icon it should clear the date input – ReactDev Feb 14 '22 at 09:40
you should use inline if statement in your JSX codes. something like toggle – Martin Rützy Feb 15 '22 at 08:27

Modify calendar icon to close icon input type date react

0 Answers0