Making html5 input field of type "datetime-local" compatible with Firefox

Question

I'm using some of the HTML5 date and time input fields in AngularJS based interface:

<input type="datetime-local" ng-model="event.date_time.start" />
<input type="week" ng-model="event.date_time.start" />

I need to make this interface compatible with Firefox which does not support these types of input fields.

Is it the best to detect browser through JavaScript and display different fields accordingly or is there a way to make it compatible?

Answer 1

Better than detecting the browser itself is to detect whether the browser and version are compatible to some input type or not.

Fortunately, there are some easy ways of doing this. I like to use Modernizr.

The code below shows how to test if the browser supports datetime-local using Modernizr and if it is not supported, applies jQuery.ui plug-in called datetimepicker:

<script>
    <!--
    if(!Modernizr.inputtypes['datetime-local']) {
        $('input[type=datetime-local]').datetimepicker();
    }
    -->
</script>