JavaScript

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

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

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

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

 

ということで、

久しぶりに

jQuery ui Datepicker

を使うことに!!

 

設置方法は簡単です!!

 

jQuery ui Datepickerの設定方法

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

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

 

さらに、

<script>
$(function(){
    $("#datepicker").datepicker();
});
</script>

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

 

あとは、

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

 

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Datepicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function(){
  $("#datepicker").datepicker();
});
</script>
</head>
<body>
<h1>jQuery Datepicker</h1>
<input type="text" name="demo" id="datepicker">
</body>
</html>

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

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

 

テキストボックスをクリックすると以下の様な感じで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

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. フリーランス
  2. 太子堂八幡神社の茅の輪
  3. システムエラー
  4. WP:WordPress(ワードプレス)
  5. ITコンサルティング
  6. トラブル
  7. WP:WordPress(ワードプレス)
  8. WP:WordPress(ワードプレス)
  9. WP:WordPress(ワードプレス)
  10. SNSシェア

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

アーカイブ

PAGE TOP