読者です 読者をやめる 読者になる 読者になる

input type="date" のメモ

input type="date"を使うと日付を入力するフォームを作れる。
見た目上、2013/03/06のように /(スラッシュ)区切りになっているが、valueは2013-03-06のように -(ハイフン)で区切られている。
valueをセットするときには、月、日のところはゼロパディングが必要。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
$(function() {
  var p = function(num) {
    return ((num + "").length == 1) ? "0" + num : num;
  }
  var now = new Date();
  $('#d1').val(now); //NG
  $('#d2').val('2013-3-6'); //NG
  $('#d3').val('2013-3-07'); //NG
  $('#d4').val('2013-03-07'); //OK
  $('#d5').val('2013/03/07'); //NG
  $('#d6').val(now.getFullYear() + '-' + p(now.getMonth() + 1) + '-' + p(now.getDate())); // TODAY
 
  $('#v6').val($('#d4').val());
});
  </script>
  </head>
  <body>
    <input id="d1" type="date" value="">
    <input id="d2" type="date" value="">
    <input id="d3" type="date" value="">
    <input id="d4" type="date" value="">
    <input id="d5" type="date" value="">
    <input id="d6" type="date" value="">
    <br/>
    value : <input id="v6" type="text" value="">
  </body>
</html>

https://gist.github.com/chris4403/5263889