0

I am trying customize my input date pick like this design here:

enter image description here

here is my following code and default design:

  <input
    type="date"
    name="date"
    defaultValue={currentDate || dateInput}
    onChange={(e) => setDateInput(e.target.value)}
    required
  />

enter image description here

How can I edit it with css or scss?

nathan
  • 369
  • 2
  • 14
  • Hi There. You would have to add more details. Are you using any package for the date picker ? What is your approach so far ? Where are you stuck ? – Nisanth Reddy May 15 '21 at 11:18
  • Does this answer your question? [CSS for styling HTML5 date input calendar in Chrome](https://stackoverflow.com/questions/28738112/css-for-styling-html5-date-input-calendar-in-chrome) – Christopher May 15 '21 at 13:12
  • Does this answer your question? [Are there any style options for the HTML5 Date picker?](https://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker) – Martin May 16 '21 at 14:52

1 Answers1

-5

You need to add class:

<input
    className="datePicker"
    type="date"
    name="date"
    defaultValue={currentDate || dateInput}
    onChange={(e) => setDateInput(e.target.value)}
    required
  />

And in css:

.datePicker {
  background-color: red;

}
dodododo97
  • 165
  • 1
  • 10
  • It change the input background not the datepicker – nathan May 15 '21 at 11:22
  • @nathan I don't think there's any cross-browser way of styling it since every browser implements their own calendar differently. If you want to do it you have to create your own calendar with JS. – dodododo97 May 15 '21 at 11:33