「jsで日付の計算」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jsで日付の計算

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jsで日付の計算</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  9. <style type="text/css">
  10. table
  11. {
  12.   border-collapse:collapse;
  13.   margin-top:0.5em;
  14. }
  15. th
  16. {
  17.   background:#ffe0ff;
  18. }
  19. th, td
  20. {
  21.   text-align:left;
  22.   border:1px solid #ccc;
  23.   padding:3px 5px;
  24. }
  25. </style>
  27. </head>
  28. <body>
  29. <h1>jsで日付の計算</h1>
  31. <p>
  32. 「<a href="//tips.recatnap.info/wiki/Js%E3%81%AE%E6%97%A5%E4%BB%98%E9%96%A2%E9%80%A3" target="_blank">Jsの日付関連</a>」のまとめ
  33. </p>
  35. <script type="text/javascript">
  36.   function addDate(ymdDate, target, add)
  37.   {
  38.     addNum = parseFloat(add);
  39.     yea = ymdDate.getFullYear();
  40.     mon = ymdDate.getMonth();
  41.     day = ymdDate.getDate();
  43.     if(target == "y")
  44.     {
  45.       yea += addNum;
  46.     }
  47.     else if(target == "m")
  48.     {
  49.       mon += addNum;
  50.     }
  51.     else if(target == "d")
  52.     {
  53.       day += addNum;
  54.     }
  56.     return new Date(yea, mon, day);
  57.   }
  59.   document.write( "<h2>Date()の引数を「2012年5月1日」にする</h2>" );
  60.   document.write( "<table>" );
  61.   document.write( "<tr><th>new Date(2012, 5, 1)の結果</th><td>" + new Date(2012, 5, 1) + "</td></tr>" );
  62.   document.write( "<tr><th>new Date(2012, 5-1, 1)の結果</th><td>" + new Date(2012, 5-1, 1) + "</td></tr>" );
  63.   document.write( "<tr><th>new Date(\"2012/05/01\")の結果</th><td>" + new Date("2012/05/01") + "</td></tr>" );
  64.   document.write( "</table>" );
  65.   
  66.   // ベースになる年月日にn年(or n月 or n日)を足す
  67.   target = "d"; // y、m、dのいずれか：年月日の増やしたい項目
  68.   addNum = 4;   // 増減値（target=yの時：年数、target=mの時：月数、target=dの時：日数）
  69.   baseY = 2012; // ベースになる年
  70.   baseM = 6;    // ベースになる月
  71.   baseD = 30;   // ベースになる日
  73.   rDate = addDate(new Date(baseY, baseM-1, baseD), target, addNum);
  75.   // 計算した年月日を分ける。
  76.   rDatY = rDate.getFullYear();
  77.   rDatM = rDate.getMonth() + 1;
  78.   rDatD = rDate.getDate();
  79.   rYMD  = rDatY + "/" + rDatM + "/" + rDatD;
  81.   document.write( "<h2>ベースになる年月日にn年(or n月 or n日)を足す</h2>" );
  82.   document.write( "<table>" );
  83.   document.write( "<tr><th>ベースになる日</th><td>" + baseY + "/"+ baseM + "/"+ baseD + "</td></tr>" );
  84.   document.write( "<tr><th>+4日したときの戻り値</th><td>" + rDate + "</td></tr>" );
  85.   document.write( "<tr><th>戻り値を年月日だけに整形したもの</th><td>" + rYMD + "</td></tr>" );
  86.   document.write( "</table>" );
  88.   // 期間
  89.   dayA = new Date();
  90.   dayB = new Date(baseY, baseM-1, baseD);
  91.   diffDay = Math.ceil(( dayB-dayA )/( 60*60*24*1000 ) );
  92.   document.write( "<h2>2つの日付の差</h2>" );
  93.   document.write( "<table>" );
  94.   document.write( "<tr><th>" + dayA + "から<br />" + dayB + "までの日数</th><td>" + diffDay + "日</td></tr>" );
  95.   document.write( "</table>" );
  97. </script>
  99. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  100. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  101. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  102. </div>
  104. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  105. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  106. </div>
  108. </body>
  109. </html>