TOPページへ戻る

JavaScript Part3

JavaScriptと日付とカレンダーについて

JavaScriptで日付を扱う方法について記述します。
JavaScript標準では、日付を扱うためDateオブジェクトがあります。

HTML5のカレンダーについて
HTMLタグでカレンダーを表示させるためinputタグのtypeにdateがHTML5で追加されました。他にもtimeやemail、urlなどがあります。
これを使えば、jQuery UIのDatepicker等を使う必要はありません。

        ※Microsoft Edgeの場合の画像です。

詳細は、とほほのWWW入門の日付（Date）ととほほのWWW入門の<input> - フォーム部品：入力欄のページをご覧ください。

とほほのWWW入門 日付（Date）
とほほのWWW入門 <input> - フォーム部品：入力欄

以下は、サンプルです。

サンプル


ポイント サンプルソース
<html charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>JavaScriptサンプル3</title>
<style>
body {
background-color: white;
}
</style>
<script>
function today_tomorrow(){
   today = new Date();
   year = today.getFullYear();
   month = ('0' + (today.getMonth() + 1)).slice(-2);
   date = ('0' + today.getDate()).slice(-2);
   document.form1.today.value = year + "-" + month + "-" + date;
   time = today.getTime();
   time += 1*24*60*60*1000;
   tomorrow = new Date(time);
   year = tomorrow.getFullYear();
   month = ('0' + (tomorrow.getMonth() + 1)).slice(-2);
   date = ('0' + tomorrow.getDate()).slice(-2);
   document.form1.nextDate.value = year + "-" + month + "-" + date;
}
function nextDay(){
   [year, month, day] = document.form1.today.value.split('-');
   time = new Date(year, month -1, day).getTime();
   time += 1*24*60*60*1000;
   nextDate = new Date(time);
   year = nextDate.getFullYear();
   month = ('0' + (nextDate.getMonth() + 1)).slice(-2);
   day = ('0' + nextDate.getDate()).slice(-2);
   document.form1.nextDate.value = year + "-" + month + "-" + day;
}

</script>
</head>

<body onload="today_tomorrow()">
<h2>日付とカレンダー</h2>
<form name=form1>

デフォルト<input type="date" name="default" value="">
<br>
<br>
本日
<input type="date" name="today" onchange="nextDay()">
翌日
<input type="date" name="nextDate">
<br>
※本日の日付を変更すると翌日の日付も変わります。
<br>
</form>
</body>
</html>
以上