ITに関するさまざまなトピックを紹介するサイトです
このコンテンツはお使いのブラウザには対応しておりません。
新しいバージョンのブラウザでアクセスしてください。

カレンダー形式の日付選択


JavaScriptでカレンダー表示機能を実装しました。
「日付選択」ボタンを押すと、カレンダーが表示されます。
デフォルトではシステム日付の年月が表示されます。
下部のプルダウンで年月を変更することができます。年は当年から5年が選択できます。
この日付選択機能はクラス化しています。スタイルはクラス外で指定するようになっています。
選択結果はインスタンス生成時に指定したコールバック関数で受け取るようにしています。
このページのコールバック関数は、選択した日付をalert表示するものになっています。

HTML5で追加されたinput要素の"date"type属性

HTML5では、input要素のtype属性に指定できるデータタイプが追加されています。
フォームの入力データとして日付を入力させるためには、"date"をtype属性に指定します。
上記のJavaScript実装と同じように、カレンダー形式で日付を入力することができます。
ただし、一部のブラウザしか対応しておらず、主要なブラウザではChromeとOperaが対応しているようです。
日時関連では、他にもdatetime、datetime-local、month、week、timeなどがあります。
対応していないブラウザでは"text"として扱われるようです。
以下に、実際にtype属性に"date"を指定したinput要素を配置しました。
Chromeで表示させると、以下のようになりました。
(バージョン 30)
input要素にフォーカスすると下矢印が現れ、クリックするとプルダウンのように1ヶ月のカレンダー形式の日付選択画面が表示されます。

当サイトでは、第三者配信による広告サービスを利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報(氏名、住所、メール アドレス、電話番号は含まれません)を使用することがあります。 このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。