CODEWITHSUNDEEP
javascriptcsshtmldatepicker
kaiser soze
kaiser soze

Reputation: 67

HTML date picker view

How can I change the view of the date picker? Can I, for example, remove some elements or replace the entire picker by my own? It's important for me to use type="date". Is it only possible for type="text"? By default, date picker looks like this

default view http://clip2net.com/clip/m309328/8030a-clip-12kb.png?nocache=1

It's standard date picker without any attributes and classes

Code:

<form>
    Birthday:
    <input type="date">
</form>

I want to get this, for example custom view

Upvotes: 1

Views: 646

Answers (1)

Joel Fazio
Joel Fazio

Reputation: 172

You are pretty limited in terms of style customization because the HTML5 date input UI is pulled from the OS of the device being used, rather than being rendered in the browser.

From this site:

You cannot currently style the appearance of the date picker. In WebKit, we have previously provided ways to style form controls with the -webkit-appearance CSS property or the ::-webkit-foo pseudo class selector. However the calendar popup does not provide such ways in WebKit because it is separate from the document, like a popup menu for , and there is not currently a standard for how to control styling on its sub-elements.

You are better off using a custom date picker, like jQuery for example.

Upvotes: 2

Related Questions