JavaScript

Javascript

「jQuery ui Datepicker」の基本的な使い方

先日フォームの作成依頼があった際に、

日付欄はユーザーに直接入力させるのではなく、datepickerで選択出来るようにしたいと

お客様から要望がありました。

 

ということで、

久しぶりに

jQuery ui Datepicker

を使うことに!!

 

設置方法は簡単です!!

 

jQuery ui Datepickerの設定方法

まず、<head>~</head>の間に、

の3行を追記して、CSSとjQueryのコードを読み込んでやります。

 

さらに、

を<head>~</head>の間の適当な場所に追記します。

 

あとは、

該当のテキストボックスに「id="datepicker"」を追記するだけです。

 

まとめるとこんなソースになります↓↓

これだけで動作するので、

非常にシンプルで便利ですね!!

 

テキストボックスをクリックすると以下の様な感じでdatepickerが立ちあがります。
jQuery_Datepicker サンプル

 

jQuery UI Datepicker デモ

 

テーマ(デザインカラー)の変更

テーマも複数用意されているので、

好みやサイトに合わせたデザインカラーに変更することも出来ます。
http://jqueryui.com/themeroller/

 

例えば、「UI lightness」というテーマを使いたい場合には、

読み込むCSSを

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">

に変更すればいいだけです。

 

見た目はこのようになります↓↓
jQuery_Datepicker UI lightness

WordPress短期学習プログラム

関連記事

  1. JavaScript

    Javascript

    flatpickr【デートピッカー用ライブラリ】

    flatpickrについて先日、という日付け選択用のデート…

  2. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  3. JavaScript

    Javascript

    history.back()

    履歴を残したまま全ページに戻りたい場合、history.back(…

  4. JavaScript

    Javascript

    Google Static Maps API V1の終了

    かなり前に組んだガラケーサイトでGoogle Mapを表示させていたの…

  5. JavaScript
  6. JavaScript

    Javascript

    jQuery - $("select") / $('select[name="name属性"]')

    本日ですが、セレクトボックス(プルダウン)を一括で操作したくて、…

最近の記事

  1. PHP(ピー・エイチ・ピー)
  2. PHP(ピー・エイチ・ピー)
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. Security(セキュリティ)
  7. WP:WordPress(ワードプレス)
  8. WP:WordPress(ワードプレス)
  9. WP:WordPress(ワードプレス)
  10. アフィリエイト
PAGE TOP