CODEWITHSUNDEEP
html
user6683711
user6683711

Reputation:

How do you change the calendar?

<input type="date"></input>

When you run this in HTML it give you a input element with a calendar widget attached to it. Is there a way to change the widget? If not is there a way to change the color?

Upvotes: 0

Views: 439

Answers (2)

Nasik Shafeek
Nasik Shafeek

Reputation: 961

If you try and go with just HTML, it'll be varied across browsers. Just try some browsers across.

A solution will be using a plugin such as https://jqueryui.com/datepicker/ jquery datepicker. There are alot available for free, just google for calender plugins for HTML or JS.

Upvotes: 1

JBartus
JBartus

Reputation: 440

The calendar input on the <input type="date"></input> is browser specific, styling for it is not especially well supported. The WebKit date picker (the one I assume you are referring to) can be styled with the following pesudo-elements:

::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator

A more robust cross-browser solution would be to use something like JQuery UI's datepicker: https://jqueryui.com/datepicker/

Upvotes: 0

Related Questions