JavaScriptでDatepickerを使う方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでDatepickerを使う方法について現役エンジニアが解説しています。Datepickerとは日付を選択する部品のことで、カレンダーなどで使われています。jQueryやjQueryUI、jQueryUIのCSSを使って実現します。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptでDatepickerを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでDatepickerを使う方法について詳しく説明していくね！
お願いします！
目次
Datepickerとは
日付を選択する部品のことです。
下記の画像のように、カレンダーのような小画面を表示してそこで選択した日付が入力欄に入るという動作をします。
これにより、2020/1/1、2020-1-1など、たくさんの日付のフォーマットを統一してユーザーに楽に入力してもらうことができます。
Datepickerを使ってみよう
Datepickerを使うには、下記の3つを読み込む必要があります。
1、jQuery
2、jQueryUI
3、jQueryUIのcss
今回は多くの部品を配布している下記のサイトから3つのURLを取得します。
cdnjsのサイト
まずは、cdnjsのサイトの検索欄にjqueryと入力してjQueryのリンクを取得します。
このようなURLが取得できると思います。
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js
次に、cdnjsのサイトの検索欄にjqueryuiと入力してjQueryUIのリンクを取得します。
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
最後に、cdnjsのサイトのjqueryuiの検索結果の一覧から、jQueryUIをクリックしCSSのタブよりリンクを取得します。
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css
これで準備は完了です。
この3つを読み込み、JavaScriptで日付の入力欄を取得して.datepicker()と記述することでカレンダーの小画面が表示されます。
なお、jquery-uiを読み込む前にjQueryを読み込まないとエラーになりますのでご注意ください。
Datepickerのオプション
Datepickerには日付のフォーマットを変更したり、カレンダーの月の表示を「1月、2月・・・」というように日本語にしたりと豊富なオプションが用意されています。
オプションはjQueryUIを翻訳したサイトのオプション一覧ページが見やすいのでそちらで確認してみてください。
実際に書いてみよう
ここでは、オプションを指定せずにデフォルトの表示で呼び出す方法とオプションを指定して表示を変更する2つの例を紹介します。
まずはHTMLソースです。冒頭で説明した3つのリンクをheadタグで読み混んでいます。
次に、入力欄であるinputタグを2つ用意して、JavaScriptからのアクセス用にそれぞれidを設定しています。
<!DOCTYPE html> <html lang=ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> </head> <body> <h4>デフォルトの呼び出し</h4> <input type="text" id="datepicker"> <h4>オプションを指定した呼び出し</h4> <input type="text" id="datepicker2"> </body> </html>
続いてJavaScriptソースです。
説明を分けるためにHTMLと分けていますが、HTMLの中にscriptタグで直接記述しても問題ありません。
$("#datepicker").datepicker();
$("#datepicker2").datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1, //0?6 0が日曜、1が月曜、2が火曜・・・・6が土曜
monthNames: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ]// 初期値[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
});
HTMLで用意した2つのinputタグにそれぞれDatepickerをセットしています。入力欄をクリックするとカレンダーの小画面が表示されます。
1行目の$(“#datepicker”).datepicker();は、オプションの指定なしでDatepickerを呼び出しています。
Datepickerをそのまま使う場合はこの1行だけで使えます。
2つ目のDatepickerの呼び出しはオプションをいくつか指定しています。
オプションを指定する場合は、datepicker()の引数に、{}で囲ったオブジェクトの中に記述をしたものを渡します。
ここでは、下記の3つを指定しています。
- 日付のフォーマット（dateFormat）をyy-mm-ddに変更
- 週の始まり（firstDay）を月曜からに変更
- 月の表示（monthNames）を日本語の1月、2月・・・に変更
これでHTMLの2つの入力欄は、それぞれ違う動作と見た目のDatepickerが設定されました。
まとめ
日付の入力を助けてくれるDatepickerは、必要なcssとjsファイル2つを読み込めば、1行のJavaScriptコードで使用できます。
オプションで見た目や動作の変更も簡単です。日付の入力欄には積極的に使ってみてください。
筆者プロフィール
| 横山茂雄（よこやましげお）
フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
