jQuery UI Datepicker

戻る

カテゴリー

JavaScript 　jQuery

投稿日時

2016-12-28 21:00:46

今回はDatepickerというjQueryの機能を紹介したいと思います（Datepicker自体はjQuery以外の実装もあるんですが、自分が使ったことがあるのがjQueryのものだけなので、あくまで今回はjQueryに限った話です）。 Datepickerとは、テキストボックスをクリックするとカレンダーが出てくるやつで、皆さんも入力フォームとかでよく見るかと思います。 ![Datepicker1](/larablog/pictures/201708161617_datepicker1.png) これが・・・ ![Datepicker2](/larablog/pictures/201708161610_datepicker2.png) こんな感じになるやつです。使い方については[こちら](http://www.webdesign-fan.com/jquery-ui-datepicker)を見ていただければわかるかと思いますが、結構簡単です。ちなみに、リンク先ではid="datepicker"としていますが、クラスでやることもできます。クラスだと該当するクラス名の箇所では全てDatepickerが使えるようになります。クラスの場合だと、functionの中は ```JavaScript $("".datepicker).datepicker(); ``` となります。なぜ今回Datepickerを紹介しようと思ったかと言いますと、最近Datepickerでちょっとやらかして、うまく使えていないことがありまして、その備忘録も兼ねてということです。ちなみに何があったかと言いますと、テキストボックスをクリックしてもカレンダーが出てこず、しかもページの下の方を見ると本来カレンダーの中に含まれるはずの内容が延々と表示されていました。（注意、画像は結構長いです） ![Datapicker error1](/larablog/pictures/201708161620_datepicker_err1.png) ![Datapicker error2](/larablog/pictures/201708161629_datepicker_err2.png) 最初一瞬何事かと思いましたが、右クリックで検証ツールを開いてコードをよく見てみると、datepickerのcssが当たっていないことがわかりました。何でcssが当たっていないのか調べるためにbladeを見てみると、ちゃんと機能しているページではJavaScriptを読み込んでいるところとCSSを読み込んでいるところの順番の対応がうまく取れていたようなのですが、今回の現象が起きた箇所ではその順番の対応に問題があったようで（詳しく書くと長くなるので詳細は略します）、読み込む順番を機能しているページと同じ順番にすると、ちゃんとうまくいきました。今回の教訓としては、便利なツールもちゃんと読み込めるよう正しく使ってこそ、ということですね。

まだコメントはありません

新規コメント

カテゴリー
PHP (5)
JavaScript (5)
HTML (1)
CSS (2)
MySQL (2)
インフラ (2)
Laravel (9)
プログラミング学習 (1)
jQuery (1)
正規表現 (1)
Vue.js (3)
このブログについて (1)
Docker (1)
Linux (0)
セキュリティ (1)

最新の投稿
* ログインしていないときにURL直打ちでファイルにアクセスできなくする
* MySQLで文字列を好きな順番でソートしたいとき
* SplFileObjectでのCSVファイル読み込みでの文字化け対策
* Laravelのページネーション
* TCPDFでサポートされているHTMLタグ、CSSプロパティ