TechNote

とあるエンジニアのただのメモ

jQueryUI の Datepicker によるカレンダー機能実装が簡単便利

今更ながらjQueryUIのDatepickerが簡単かつ便利だったので実装方法のメモを残す。

1.jQueryUIをダウンロードする

http://jqueryui.com/download/

最終的に必要なのは以下の4つなのでこれらが揃うように。

cssに関しては、テーマを選んでダウンロードができる。個人的に気に入ったのは「flick」というテーマ。

f:id:kojikoji75:20130622215136j:plain


日本語化用のjquery.ui.datepicker-ja.jsは「i18n」フォルダの中にある。


2.任意の場所へ配置する
3.記述方法

(1) head内で呼び出す
 上記4つを読み込む。

(2) body内へ下記を記述

$(function() {
  $("#datepicker").datepicker();
  $("#datepicker").datepicker("option", "showOn", 'both');
});

日付: <input type="text" id="datepicker">

ちなみに以下のように細かい指定もできるとのこと。

$(function(){
  $("#datepicker").datepicker({
  showOn: 'button', // ボタンクリックでカレンダー表示
  autoSize: true, // のサイズ自動調整
  dateFormat: 'yy-mm-dd', // 日付フォーマット 例:2011-06-24
  numberOfMonths: [1,2], // 2ヶ月分を表示
  showButtonPanel: true, // カレンダーの下部にボタンパネル表示
  duration: 'slow', // 表示を遅く
  showAnim: 'fade', //fade アニメーションで表示
  maxDate: '+1y', // 最大1年先の日付が選択可能
  minDate: '-1y', // 過去1年まで日付が選択可能
  });
});


ただし、自分の環境では、bootstrapと併用した場合に限ってデザインが崩れてしまった。自分で深追いする前に、何か簡単な解決方法が存在しないかをとりあえず「bootstrap datepicker」等でググってみたところ、TwitterBootstrapが提供しているデートピッカーが存在するようだったので、原因追究をやめてこれを試すことを優先する。詳細は後日メモに残す。

あわせて読みたい

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など...

jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNotejQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャ...

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

コアjQuery+プラグイン/jQuery UI 開発実践技法 (Programmer’s SELECTION)

jQuery UI+厳選プラグイン41 実践サンプル集

jQuery UI+厳選プラグイン41 実践サンプル集

広告を非表示にする