[JQuery] Datepickerで日付をカレンダー形式で簡単に入力する方法

photo_00167

公開フォルダの中に jsフォルダを作ってインストールしても良いですが、googleがリンク形式でJQuery関係のファイルを提供しているので、そのリンクを貼って楽に環境を構築します。

JQuery関連の読み込み

デザインの選択

まず、デザインを選択するのにJQueryページを開きます。

1.上部のタブメニューの「themes」を選択すると、左メニューに黒い画面が表示されます。

2. そこの「Gallery」タブを選びます。

JQuery Datepicker デザイン選択画面

左側にカレンダーのギャラリーが出るので、好きな色のパターンをクリックすると、右側のコンテンツがそのデザインに変わりますので気に入ったデザインを選んでください。

3.ファイルをダウンロードしてサーバーに置く場合は、Downloadボタンでファイルをダウンロード。googleのリンクを使う場合は、テンプレートの名前を把握します。(今回はgoogleのリンクを使う形で説明します)

googleのリンクの形式を見てみましょう。

/themes/の後ろのディレクトリがテンプレート名になっています。

一番左上の UI lightness というデザインは ul-lightness という形になります。

リンクの文字を好きなテンプレートに変更するだけで使えます。便利!

Datepickerの表示

Datepickerの設定はとても簡単です。

フォームの要素(inputなど)にidを振っておき、jQueryでそのidを指定します。

数行のjQueryで動きます。

  • Categories

  • タグ

  • アーカイブ

  • 最近の投稿