「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

フォーム入力でテキストボックスなどへ日付項目を作成する際、ユーザに直接日付を入力してもらうのではかなり勝手が良くありません。
こういう場合は日付項目をクリックした時に「カレンダーダイアログ」を表示してあげるとユーザビリティが格段に向上します。
今回はjQueryプラグイン「Datepicker」を使用した「カレンダーダイアログ」の導入方法をご紹介致します。

導入手順

  1. プラグイン「Datepicker」のダウンロード
    • ダウンロード先:http://jqueryui.com/themeroller/
      プラグイン「Datepicker」のダウンロードサイト
      メニュー「Themes」→サイドメニュー「Gallery」タブをクリックし、24種類のテーマ下にある「Download」ボタンをクリックします。
  2. カレンダー入力の導入で必要となるファイル
    • ダウンロードしたファイルの内、カレンダー表示に必要となるのは以下のファイルとなります。
      分類ファイル名 or フォルダ名パス備考
      jsjquery.ui.core.min.jsjquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified
      jsjquery.ui.datepicker.min.jsjquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified
      jsjquery.ui.datepicker-ja.jsjquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified\i18n日本語表示する際、必要になります。
      css、画像dot-luv
      ※選択したテーマによりフォルダ名は変わります
      jquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\themes\dot-luv
  3. ダウンロードしたファイルの読み込み設定
    CSSファイルは「jquery.ui.all.css」を読み込むと全てのCSSファイルが読み込まれます。
  4. HTMLに用意したテキストボックスやボタンへidかclassを設定し、jsファイルへ「datepicker」を実行するように記述すれば設定終了です。

カレンダーのサイズを変更したい場合

  • カレンダーのサイズを変更したい時は、カレンダーのフォントサイズを以下の様に変更するとカレンダーサイズを変更出来ます。

カレンダーの土日の色を変更したい場合

  • 通常ダウンロードしたままの状態では土日も平日と同じ色で表示されますが、CSSとjQueryへ以下の様に設定する事で土日日付の色を変更する事が出来ます。

実行サンプル

  • 上記設定を一通り設定すると以下の様な表示となります。
    日付項目:

Ads by Google

jQuery 「Datepicker」でカレンダー入力」に2件のコメント

  1. Termite Inspectiion Mc Gregor より:

    I am sure this article has touched all the internet users,
    its really really nice article on building
    up new weblog.

  2. おばか父さん より:

    Stable (Themes) (1.11.0: for jQuery1.6+)
    というのをダウンロードしたら、必要なファイルが見つからなくて
    戸惑いました。

    Legacy (Themes) (1.10.4: for jQuery1.6+)
    というのをダウンロードしたら、
    development-bundle というフォルダがあって、
    そこ(正確にはさらにそのサブフォルダ)にありました。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">