datetime-localをサポートしていないブラウザの時に代替ライブラリを使う

日時を入力するフォームを実装する際に、datetime-localを使うことで、対応端末・ブラウザに適した形で入力を行えます。
しかし、IE11やSafariといった一部ブラウザで利用ができないため、代替機能を提供する必要があります

inputタグのtypeのサポートをチェックする方法

実装

今回は代替として
https://github.com/xdan/datetimepicker
利用します

<input class="datetime" type="text" value="2017/01/01 00:00" min="2017/01/01 00:00" step="60">

//datetime-localのサポートチェック
function checkDatetimeSupport() {
    var input = document.createElement('input');
    input.setAttribute('type','datetime');

    var notADateValue = 'not-a-date';
    input.setAttribute('value', notADateValue); 

    return (input.value !== notADateValue);
}

if (!checkDatetimeSupport()) {
    //サポートしていない場合はライブラリを設定する
    $('input.datetime').datetimepicker({
        format:'Y/m/d H:i',
        step:1,
        minDate:"2017/01/01",
    });
} else {
    //サポートしている場合はdatetime-localに切り替える
    $('input.datetime').each(function() {
        var val = $(this).val();
        $(this).attr("type", "datetime-local");
        if (val) {
            //datetime-localのフォーマット yyyy-mm-ddThh:MM:ss に書き換え
            val = val.replace(" ", "T");
            val = val.replace(/\//g, "-");
            $(this).val(val);
        }
    });
}

注意点

• ライブラリの場合、yyyy/mm/dd hh:MM:ss、datetime-localの場合はyyyy-MM-ddThh:MM:ssのフォーマットでリクエストされるので、submit時またはサーバサイドで加工が必要です