《 11:00 AM 公開/更新》
日付を取り扱うスクリプトを書くとき、指定の日が何曜日なのかを調べたい(表示したい)ことがあります。曜日は日付から計算可能ですが、JavaScriptなら自力で計算するまでもなく簡単に曜日が得られます。(^_^;) 方法はとても簡単で、何らかの日付が表されたDateオブジェクトに対してgetDayメソッドを使うだけです。
日付を取り扱うスクリプトを書くとき、指定の日が何曜日なのかを表示したいことがあります。
曜日は日付から計算可能ですが、自力で計算するまでもなく、JavaScriptなら簡単に曜日が得られます。(^_^;)
JavaScriptでDateオブジェクトから曜日を得る方法はとても簡単で、以下のようにgetDayメソッドを使えば良いだけです。
var dObj = new Date( /* 何らかの日付 */ );
var wDay = dObj.getDay();
上記のように書くと、変数「wDay」に、Dateオブジェクト「dObj」が示す日付の『曜日』が数値で格納されます。
曜日を表す文字列が直接入るわけではなく、0~6までの数値(0が日曜日・1が月曜日……6が土曜日)が入ります。
したがって、曜日を文字列で得たい場合には、以下のように曜日の文字列を並べた適当な配列を用意しておいて、それを使うのが良いでしょうね。
JavaScriptソース
// 曜日を表す文字列の配列を作っておく var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ]; // 日付オブジェクトから曜日を得る var dObj = new Date( /* 何らかの日付 */ ); var wDay = dObj.getDay(); alert("指定の日は、" + WeekChars[wDay] + "です。");
こうすると、Dateオブジェクト「dObj」が示す日付の曜日を、日本語の曜日文字列で表示することができます。もちろん、配列の中身を書き換えれば、英語でもフランス語でも何でも使えます。
※/* 何らかの日付 */
部分には、何も書かなければ「その瞬間の日時」を表すDateオブジェクトになります。"2017/06/15"
のような日付文字列を指定すれば「その日時」を表したDateオブジェクトになります。(後述)
例えば、今日の曜日を表示するのであれば、以下のように書けば良いでしょう。
JavaScriptソース
var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ]; var dObj = new Date(); // 今日の日付 var wDay = dObj.getDay(); // 曜日を得る alert("今日は、" + WeekChars[wDay] + "です。");
上記のJavaScriptをボタンクリックで実行されるようにすると、例えば以下のようになります。
ボタンを押せば、今日の曜日がアラートボックスに表示されます。
さて、ここまでくれば、指定の日付の曜日を得るのはとても簡単です。ユーザから指定日(年月日)の入力を受け付けて、それを元にDateオブジェクトを作って、getDayメソッドで曜日を得れば良いだけです。
例えば以下のように書けば良いでしょう。
まず、入力欄として、年月日それぞれの入力フォームをinput要素で作っておきます。入力された値をJavaScript側から取得できるように、各入力欄に固有のid名を割り振るのを忘れないようにして下さい。
HTMLソース
<input type="text" id="userYear">年 <input type="text" id="userMonth">月 <input type="text" id="userDate">日 <input type="button" value="上記の日付の曜日を調べる" onclick="showUserWeekDay();" />
ボタンクリックで、以下に作成するshowUserWeekDay関数が呼ばれます。
showUserWeekDay関数では、以下のようにgetElementByIdメソッドを使ってユーザの入力した年月日を得て、Dateオブジェクトを作り、曜日を求めます。
JavaScriptソース
function showUserWeekDay() { // 曜日の配列を作る var WeekChars = [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ]; // ユーザの入力を得る var inputYear = document.getElementById("userYear").value; var inputMonth = document.getElementById("userMonth").value; var inputDate = document.getElementById("userDate").value; // 入力された数値から日付オブジェクトを作る var userDate = new Date( inputYear, inputMonth-1, inputDate ); // 日付と曜日を表示する alert("指定された「" + userDate.getFullYear() + "年" + (userDate.getMonth()+1) + "月" + userDate.getDate() + "日」は、" + WeekChars[userDate.getDay()] + "です。"); }
まあ、実際に使う際には、もうちょっとエラー処理(ユーザが入力した文字列が数字ではなかった場合や、数字であっても日付として成立しない値だったなどの処理)が必要でしょうけども。
上記では、「32日」などカレンダーとしてあり得ない数値が入力された場合でも、それなりに表示されます。例えば、「2014年2月51日」を指定すると、2014年3月23日として解釈されます。カレンダーとして成立しない「余分な日数」分を単純に足し算して、カレンダーとして成立する日付に変換してくれるわけですね。(^_^;)
これはあえてそういう工夫を加えたわけではなく、単にDateコンストラクタの仕様です。
なお、上記のJavaScriptソースでは、最後に「指定された日付」をアラートボックスに表示させる際、getDateメソッドやgetMonthメソッドを使って「Dateオブジェクトから改めて年月日を取り出す」ように記述しているため、ユーザが「51日」などと入力していても、ちゃんとカレンダー的に成立する日付が表示されます。(^_^;)
※Dateオブジェクトを生成する際、月の数値は「0が1月、1が2月……11が12月」を表すので、ユーザの入力値から1を引くのを忘れないように注意して下さい。(^_^;;; この紛らわしい仕様はもうちょっと何とかならなかったんですかね?(^_^;)
上記のソースを使って、ユーザが入力した日付の曜日を表示させるフォームを表示すると、以下のようになります。年月日欄に数値を入れて試してみて下さい。
年月日
ちなみに上記では、多少の(とても簡単な)エラー処理を加えてあって、自然数以外が入った場合にはエラーメッセージを表示するようにしてあります。
()
▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)