HTML5 Features

`<input type="date">`&`<input type="color">`

Browser support

Date & Time input

Can I Use input-datetime? Data on support for the input-datetime feature across the major browsers from caniuse.com.

Color input type

Can I Use input-color? Data on support for the input-color feature across the major browsers from caniuse.com.

Native Date:

Color:

Fallbacks

When <input type="date"> is not supported the browser will see it as a <input type="text">. You can use the placeholder attribute at the input element like this:
<input type="date" placeholder="mm/dd/yy"> unsupported browsers will see this as: <input type="text" placeholder="mm/dd/yy">. Now it has a placeholder to give the user feedback about the desired format, the server will check the input and if needed convert it to the desired format:

Date:

When <input type="color"> is not supported the browser will see it as a <input type="text">. You can let users type their desired color, but a dropdown menu with a few standard colors would be better in my opinion.

The color input is a <select> with a few standard colors. The server will convert the value string into a hex color code.

Color:

To make this happen, put both elements in your html:


					<input type="color" id="colorpicker">

					

					<select id="colorpicker-fallback">

						<option value="red">red

						<option value="green">green

						<option value="blue">blue

						<option value="orange">orange

						<option value="purple">purple

						<option value="pink">pink

						<option value="brown">brown

						<option value="black">black

						<option value="white">white

						<option value="grey">grey

					<select>

use simple lines of js to check if the input type attr is text and therefore show the default or fallback


					var colorpicker = document.querySelector('#colorpicker');

					var colorpickerAttr = colorpicker.getAttribute('type');

					var colorpickerFallback = document.querySelector('#colorpicker-fallback');

					

					if(colorpickerAttr == text){

						colorpicker.classList.add('hide');

						colorpickerFallback.classList.remove('hide');

					}

Polyfills

Also polyfills can be used as a fallback. You really need to think if it is worth to add a whole library for just one feature.