エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説

      2017/12/09

CakePHP3に「jQuery UI DatePicker」を実装

 

CakePHP3に「jQuery UI DatePicker」を実装する手順解説の前置き

 
日付を入力する項目に、カレンダーから日付を選択して日付を入力するインターフェイスを提供する「デイトピッカー」。
 
これを CakePHP3の入力画面に実装したい!ということで、その手順を解説します。
 
ちなみに、この記事では「jQuery UI DatePicker」を実装します。
 
 
実装するテーブルは「Topics」、
項目名は「topics_date」です。
 
「Topics」という「お知らせ」を入力する CMSの日付を入力する項目に、デイトピッカーを導入する、という想定です。
 
【Before】
01_CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 
【After】
02_CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 
 
jQuery UIの DatePickerは、以下のページにあります。
 http://jqueryui.com/datepicker/
 
 

CakePHP3に「jQuery UI DatePicker」を実装する手順

 

1.add.ctp、edit.ctpに DatePickerの処理を記述

 
まず最初に、DatePickerに関連する処理を記述します。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/add.ctp
 /src/Template/Topics/edit.ctp
 
下記のソースコードを追記します。
追記する箇所は、ファイルのどこでも OKですが、個人的には分かりやすさを優先して、ファイルの先頭に追記しています。
 

 
 
また、実際にデイトピッカーを導入する項目である「topics_date」に、「ID」を設定します。
 

 
加えて、入力形式を「text」にして、ラベルを「日付」にする設定を加えています。
 
CakePHP3の FormHelperに関しては「CakePHP3のForm Helperの使い方のまとめ」に記事を書いていますので、あわせて参照してください。
 
 

2.default.ctpに jQueryを読み込む設定を記述

 
続けて、default.ctpに jQueryを読み込む設定を記述します。
 
記述する対象ファイルは、以下です。
 /src/Template/Layout/default.ctp
 
下記のソースコードを追記します。
追記する場所は、「<head>~</head>」の間です。
 

 
とはいえ、この記述は、CakePHP3のデフォルトテンプレートにはあらかじめ記述されていますので、すでに記述されている場合は「default.ctp」を変更する必要はありません。
 
 
これだけで、デイトピッカーを導入することができます!
controllerなどを修正する必要はありません。
 
 
詳細な解説をしていませんが、上記のサンプルの通りの処理を書くことで、JavaScriptはブロック化の処理によって、指定のページだけで読み込まれて実行されるようになります。
ブロック化の処理についての解説は「CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説」に記載しましたので、あわせてご確認ください。
 
 

jQuery UIのライブラリ、および、DatePickerのスクリプトを default.ctpに直接読み込む場合

 
前項の説明は、「add.ctp」「edit.ctp」にブロック化したスクリプトを記述し、それを「default.ctp」で読み込む、という処理になっています。
 
ですが、ほとんどのページで「DatePicker」を使うため、直接「default.ctp」に書きたい、という場合は、「default.ctp」に下記の処理を追記します。
 

 
「,[‘block’ => true])」の部分がなくなっていますが、それ以外は同じになります。
 
 

CakePHP3に実装した「jQuery UI DatePicker」のカスタマイズ、および、詳細解説

 
「jQuery UI DatePicker」の導入そのものは、上記に書いた箇所を追記することで実装することは可能です。
 
ただ、もう少し便利に使うため、理解を深めるために、カスタマイズの方法と実装方法の詳細解説を行います。
 
 

jQueryをダウンロードして利用する

 
先にも書いていた下記のサンプルソースは、「jquery.com」にある jQueryのライブラリをそのまま利用することを想定しています。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/add.ctp
 /src/Template/Topics/edit.ctp
 

 
 
ですが、jQueryのライブラリをダウンロードしてサーバ内に設置したい場合は、下記の様に記述します。
 

 
ダウンロードした jQueryのライブラリは「/webroot/js」の中に入れます。
 
 
もし、「/webroot/js」とは違う場所に入れたい場合は、下記の様にパスも含めて記述します。
 

 
 
HtmlHelperの詳細は、下記のオフィシャルサイトを参照してください。
https://book.cakephp.org/3.0/ja/views/helpers/html.html#javascript
 
 
ちなみに、HtmlHelperを利用する理由は、環境が変わった時にも柔軟に対応できるようにするためです。
そのため、「まずは動作させたい」という場合などは、下記の様に直接記述する方法でも問題ありません。
 

 
 

デイトピッカーのテーマ(カラー)を変更する

 
デイトピッカーだけではありませんが、jQuery UIにはあらかじめテーマが用意されています。
 
先に紹介した、下記のサンプルソースは「base」というテーマを使用しています。
下記の URL内にある「base」がテーマの指定です。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/add.ctp
 /src/Template/Topics/edit.ctp
 

 
 
これをサイトのデザインにあったものに変更したい場合は、下記の jQueryのテーマのページからテーマの名前を確認します。
http://jqueryui.com/themeroller/
 
03_CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 
このテーマのリストの中から「UI lightness」を選択する場合は、大文字を小文字にして、スペースを「-(ハイフン)」でつないだ「ui-lightness」を指定します。
 

 
 
「Roll Your Own」を利用すれば、より自由なデザインを実装することも可能です。
 
 

jQuery UI DatePickerのカレンダーの表示を日本語化する

 
jQuery UI DatePickerのカレンダーの表示は、デフォルトでは英語表記です。
これは、前項のテーマを変更しても変わりません。
 
というわけで、カレンダーを日本語化する方法の解説です。
 
まず、下記のサイト(公式の GitHubリポジトリ)から日本語化ファイル「datepicker-ja.js」をダウンロードします。
https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js
 
画面の「Raw」のリンクを右クリックして、ファイルに保存すれば OKです。
 
ダウンロードしたファイルは「/webroot/js」の中に入れます。
 
そして、ファイルを呼び出す処理を記述します。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/add.ctp
 /src/Template/Topics/edit.ctp
 
下記のソースコードを追記します。
 

 
これで、下記の様に日本語になります。
04_CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
 
 

選択した日付の表記を「2017/12/24」に変更する

 
jQuery UI DatePickerで、カレンダーを選択した場合のデフォルトの表記は「12/24/2017」のようになっています。
 
これを日本で一般的な表記である「2017/12/24」「2017-12-24」の表記にするには、下記の様に記述します。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/add.ctp
 /src/Template/Topics/edit.ctp
 

 
最初のサンプルとは 3~5行目が変更されています。
上記では「2017/12/24」の表記になりますが、他の表記を希望する場合は 4行目の記述の部分を変更してみてください。
 
 
ちなみに、前の項目の日本語化スクリプトを利用している場合は、日本語化処理の中で「2017/12/24」の表記になりますので、このカスタマイズは必要なくなります。
 
 

更新画面で表示される日付の表記「2017/12/24」に変更する

 
カレンダーを選択した際に表示される表記を変更する方法は、前項で説明したとおりです。
 
ですが、それだけでは更新画面で画面を表示した際に表示される表記は「12/24/17」のようになっています。
 
これを「2017/12/24」のように変更する方法です。
 
下記の 2つの方法は、デイトピッカーとは関係なく、また、無理やり感がある方法ですので、もっとスマートな方法もあるように感じます。
もしくは、JavaScriptで置換する方法も採れるであろうと思います。
 
記述する対象ファイルは、以下です。
 /src/Template/Topics/edit.ctp
 

 

 
CakePHP3で日付項目のフォーマットを指定する方法は、下記に解説がしてあります。
https://book.cakephp.org/3.0/ja/core-libraries/time.html#id3
 
 

その他の、jQuery UI DatePickerのカスタマイズ方法

 
その他の、jQuery UI DatePickerのカスタマイズ方法、例えば、

  • 表示するカレンダーを当月分だけではなく、2カ月、3カ月と増やす方法
  • 選択できる日付を制限する方法
  • 年、月の選択をプルダウンで選択できるようにする方法

など、より望んでいるインターフェイスに変更する方法は、下記にまとめましたので、あわせて参考にしてください。
jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説
jQuery UI DatePickerに時間を入力できる機能を追加する方法解説
 
 

CakePHP3のブロック化を利用した WYSIWYGエディタの導入方法

 
入力フォームに導入する仕組みとして、デイトピッカーと同じくらいの頻度で導入することがある WYSIWYGエディタについても記事を書いています。
CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
 
ここで解説をしたブロック化の仕組みを利用した導入方法の解説です。
 
また、WYSIWYGエディタとしては、CKEditor4、CKEditor5を利用して解説をしています。
そもそもの CKEditor4、CKEditor5の導入方法、カスタマイズの方法については下記の記事を参考にしてください。
WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説
WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説
 
 

CakePHP3の関連記事

CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法
CakePHP3のデバッグキット(DebugKit)を強制的に有効、無効に変更する方法

CakePHP3に付属しているデバッグのためのツール、デバッグキットを強制的に有効化、無効化する方法を解説。初期設定では開発環境としてありそうなドメインの場合のみ有効になるように設定されている。

CakePHP 2.3でOn Duplicate Key構文を実装

CakePHPで On Duplicate Key構文を Queryを利用して実装する方法をサンプルソース付きで解説します。

CakePHP3で値を入力直後にバリデーションする方法解説
CakePHP3で値を入力直後にバリデーションする方法解説

CakePHP3でバリデーションの実行を保存する時から入力情報を受け取るときに変更する処理の解説。CakePHP3ではnewEntity()の処理でバリデートするため1行追加で対応可能。

CakePHP 2.3 連携先のテーブルの項目で条件抽出する場合

アソシエーション(連携)している先のテーブルの項目で条件抽出する際の考え方と注意点をサンプルソースを用いて説明しています。

CakePHP 2.3 Search Pluginで検索処理 その7queryを使って 日付の範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で queryを使って日付の範囲検索の方法です。

CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得
CakePHP3でDocumentRootやwebroot、imgフォルダのURLやドメイン、パスを取得

URLやドメイン、フォルダへのパスの取得は、ビューではUrlHelperを使い、コントローラーではRouterクラスを使います。第2引数の指定でURLを取得することも可能。

CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)
CakePHP3のメッセージ日本語化の設定(国際化と地域化の機能の使い方の解説)

CakePHP3の英語のメッセージを日本語化(多言語化)する手順を解説。オリジナルのメッセージを作成する方法やプログラムで文言を追加する場合の対応なども解説。

CakePHP 2.3でファイルをアップロード・その2 ファイル名を乱数で設定

CakePHPのアップロードするファイル名を乱数で変更しセキュリティを高める方法を解説。

CakePHP3でテーブルにカラムを追加したときに変更するポイントのまとめ
CakePHP3でテーブルにカラム(項目)を追加したときに変更するポイントのまとめ

CakePHP3でシステム開発をする際、途中でカラムを追加した場合に何を変更すればいいかを確認。カラムを追加する前後で Bakeした結果を比較し、変更になった点をリストアップした。

URL短縮サービス「TTTオンライン(https://ttt.onl)」公開
URL短縮サービス「TTTオンライン(https://ttt.onl)」公開

URL短縮サービス「TTTオンライン(https://ttt.onl)」を公開。メールやSNSでは使いにくい長いURLを短いURLに変換するサービス。QRコードも。Google URL Shortenerが2019年3月にサービス終了。