エンジニア足立のコーディング日記

エンジニア足立のコーディング日記

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

公開日:2016年02月05日
この記事を読むのに掛る所要時間: 42

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

 

日付欄はユーザーに直接入力させるのではなく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>
======================================================================
と記述して、CSSとjQuryのコードを読み込んでやります。

 

さらに、

==================================
<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

 

デザインはいろいろ用意されているので、

 

好みやサイトに合わせたものに変更出来ます。
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 02

このページのTOPへ戻る

著者情報

足立 拓也(あだち たくや)
1980年生まれ。
出身:兵庫県丹波市。
趣味:ボクシングジム通い。
特技:歴史の話しをすること。
一言:頑張って面白いブログを書きます。

月別アーカイブ

  •  

    • [—]2018 (4)
    • [+]2017 (101)
    • [+]2016 (49)
    • [+]2015 (86)
    • [+]2014 (86)
    • [+]2013 (104)
    • [+]2012 (78)