How to Tell If a Browser Supports <Input Type='Date'>

How to check if a browser supports input type=time /

Invalid values will be rejected when assigned to the .type property of an input element.

try {
    var input = document.createElement("input");

    input.type = "time";

    if (input.type === "time") {
        console.log("supported");
    } else {
        console.log("not supported");
    }
} catch(e) {
    console.log("not supported");
}

If there's some browser issue I'm not aware of, then using .innerHTML should do the same.

var div = document.createElement("div");
div.innerHTML = "<input type='time'>";

if (div.firstChild.type === "time")
    console.log("supported");
else
    console.log("not supported");

How to make input type=date supported on all browsers? Any alternatives?

Any browser that does not support the input type date will default to the standard type, which is text, so all you have to do is check the type property (not the attribute), if it's not date, the date input is not supported by the browser, and you add your own datepicker:

if ( $('[type="date"]').prop('type') != 'date' ) {
    $('[type="date"]').datepicker();
}

FIDDLE

You can of course use any datepicker you want, jQuery UI's datepicker is probably the one most commonly used, but it does add quite a bit of javascript if you're not using the UI library for anything else, but there are hundreds of alternative datepickers to choose from.

The type attribute never changes, the browser will only fall back to the default text type for the property, so one has to check the property.

The attribute can still be used as a selector, as in the example above.

HTML5 date picker doesn't show on Safari

Safari does not include a native datepicker for its desktop version (although it does for iOS). Incidentally, neither does IE. It's very frustrating as it could save developers a lot of time if they did.

This is a useful link for tracking support for it: http://caniuse.com/#feat=input-datetime

Can I use an HTML input type date to collect only a year?

No, you can't, it doesn't support only year, so to do that you need a script, like jQuery or the webshim link you have, which shows year only.

If jQuery would be an option, here is one, borrowed from Sibu:

Javascript

$(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy'});
});

CSS

.ui-datepicker-calendar {
   display: none;
}

Src: https://stackoverflow.com/a/13528855/2827823

Src fiddle: http://jsfiddle.net/vW8zc/

Here is an updated fiddle, without the month and prev/next buttons

If bootstrap is an option, check this link, they have a layout how you want.

How to use input type=date in all browsers

To answer your first question

Is it possible to add some simple code or javascript which emulates input type='date' in unsupported browsers?

There are plenty of jquery datepicker library available, you can search and implement

How to dedect if input type='date' is supported in browser ?

Since you are using ASP.NET MVC 4, the Modernizr.js is built in, so you can try this:

if (Modernizr.inputtypes.date) {
    $('label').text("Support");
} 
else {
    // do your datapicker here
}