jquery.datetime-input.js

// <input type=datetime> の代わりに type=date と type=time を並べる
// $("input[type=datetime]").datetimeInput()
jQuery.fn.datetimeInput = function(options) {
  var $ = jQuery;
  var usable = function(type) {
    return $("<input>").attr('type', type).prop('type') == type;
  }
  // datetime を扱えるブラウザなら何もしない
  if (usable("datetime")) return;
  // date, time を扱えないブラウザなら何もしない
  if (!usable("date") || !usable("time")) return;

  this.each(function() {
    var $dateInput = $("<input type=date>");
    var $timeInput = $("<input type=time>");
    var $dtInput = $(this);

    var m = $dtInput.val().match(/(\d+[-/]\d+[-/]\d+)[T ](\d+:\d+)?/);
    if (m) {
      $dateInput.val(m[1]);
      $timeInput.val(m[2]);
    }

    $dtInput
      .after($timeInput).after($dateInput)
      .css({position: 'absolute', transform: 'scale(0)'});
    var onchange = function() {
      $dtInput.val($dateInput.val() + ' ' + $timeInput.val());
    }
    $dateInput.on('change', onchange);
    $timeInput.on('change', onchange);
  });
  return this;
}