Skip to content
experimental changing of input type=date formatting
Branch: master
Clone or download
Latest commit cd55553 Oct 13, 2016

2016 notice: Recent versions of Chrome no longer allow ::before and ::after pseudo-selectors on shadow elements, breaking this example. A different strategy would have to be used, if possible.

custom input date format

Experimental changing of input type=date formatting.


###Supported on Windows Chrome, Mac Chrome + browsers that may support it.

###Dependencies CSS (preferably SASS), jQuery, Adobe Blank font.

###How it works Data attributes are generated and assigned to the data type=input element. The input's shadow DOM elements are hidden using AdobeBlank font. The desired format is appended to the year, month and day elements using the CSS ::after pseudo-element.

###Why To test the capabilities of CSS/Shadow DOM interaction and explore the customizing of the native HTML5/5.1 date picker. This is not something for use in production but simply a not-so-simple experiment.

###Shortcomings Typing or clearing the input can be problematic but I imagine more conditions can be added to handle this.

I could find no way to simply hide the original elements of the date picker (like setting font-size or font-shrink to 0), so I resorted to AdobeBlank font to hide the original text of the input element. Thankfully, the ::after psuedo-element can have its own font specified, allowing custom content to be appended and displayed.

Although the Shadow DOM elements of the date input have attributes indicating the date (like [aria-valuenow]) for the year, month and day, CSS is unable to read them. So JS is used to apply attributes directly to the input element.

You can’t perform that action at this time.