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

関連記事

  1. JavaScript

    Javascript

    写真の右クリックコピーを禁止!!

    弊社は不動産会社様にホームページを提供する機会が多いのですが、その…

  2. JavaScript

    Javascript

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

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

  3. JavaScript

    Javascript

    Google Maps API Ver.3 で地図を表示

    久しぶりにGoogleMap APIを利用しようとして、今更なんで…

  4. JavaScript

    Javascript

    zoomi.jsでオンマウス時に画像を拡大

    画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼…

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    IE10でLightboxが。。。

    自作の画像ギャラリーが動作しなくなったと報告がありました。&nbs…

最近の記事

  1. JavaScript
  2. バージョンアップ
  3. JavaScript
  4. セキュリティー
  5. JavaScript
PAGE TOP