HTML5 Date Input with jQuery Fallback

HTML5 introduced a new date input type which allows a user to enter a date using a date picker.

<input id="date" type="date" value="2018-05-26">

This is what it looks like in Chrome:

However, not all browsers support this input type. In unsupported browsers, such as Internet Explorer, you will simply see a text input field.

In this post, I will show how you can detect if a browser supports the date input type and how you can fall back to using jQuery's date picker if it doesn't.

Checking if the browser supports date input:

The following code creates an input element and sets its type to date. If the browser does not support date input, this operation will not work and the input type will degrade to text.

var input = document.createElement("input");
input.setAttribute("type", "date");
if (input.type !== "date") {
    console.log("browser does not support date input");
}

Alternatively, use the Modernizr library, which makes it easy to detect the features that a browser supports:

if (!Modernizr.inputtypes.date) {
    console.log("browser does not support date input");
}

Falling back to jQuery's date picker:

The JSFiddle below shows how you would use jQuery's date picker if the browser does not support date input.

HTML: Disabling a Form on Submit

The following HTML snippet shows how you can disable the Submit button on a form to prevent multiple submissions. When the Submit button is clicked, the button is disabled and a progress bar is displayed.

HTML5 - Styling a Progress Bar

The progress tag introduced in HTML5 can be used to represent the progress of a task.

For example, the following code:

<progress value="80" max="100"></progress>

displays:

Unsupported browser

Different browsers display the progress bar in different styles:

Changing the colour of the progress bar:
Now let's say that you wish to change the colour of the progress bar so that it is red if the value is less than the maximum and green when it equals the maximum. In order to do this, you can use the following CSS, which should work in Chrome, Firefox and IE:
[JSFiddle]

Creating a progress bar without HTML5:
If, like me, you would rather not have browser-specific CSS, then another approach is to create a progress bar without using the HTML5 progress tag. This is quite easy, as demonstrated here:
[JSFiddle]

Ext JS - Changing the "Today" button in a date field

The datefield in Ext JS has a date picker dropdown containing a handy "Today" button, which allows you to quickly select today's date. But what if you're not interested in today's date? This post shows how you can change the text and the handler of the "Today" button in order to select a different date e.g. yesterday.

My jsfiddle for changing the "Today" button is embedded below. After the date field has been rendered, it gets a reference to the Today button via the date field's picker object and then changes its handler to select yesterday's date instead.