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

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

ブログトップへ >> 『2016年2月』の記事一覧

RSS 「jQuery ui Datepicker」のオプション

この記事を読むのに掛る所要時間: 357

前回の記事では、

 

「jQuery ui Datepicker」の設定方法について投稿しました。
https://www.deep-deep.jp/blog_engineer/archives/3950

 

で、今回はオプションについても少しまとめておきます。

 

といっても、良く使用するものだけにはなりますが、

 

例えばテキストボックス内だけではなく、

 

ボタンをクリックしてピッカーを立ち上がるようにしたいという場合があります。

 

その場合には、

 

$(“#datepicker”).datepicker(“option”, “showOn”, “both”);

 

を追加します。

 

ソースは以下の様になります。
===========================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>jQuery Datepicker</title>
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/ui-lightness/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();
  $(“#datepicker”).datepicker(“option”, “showOn”, “both”);
});
</script>
</head>
<body>
<h1>jQuery Datepicker</h1>
<input type=”text” name=”demo” value=”” id=”datepicker”>
</body>
</html>
===========================================================================

※「both」を「button」に変更すれば、ボタンをクリックした場合にのみピッカーが立ち上がるようになります。

 

ただ、

 

これだとシンプルな味のないボタンになってしまうので、

 

ボタンを独自の画像に変更する為に、
===========================================================================
<script>
$(function(){
  $(“#datepicker”).datepicker();
  $(“#datepicker”).datepicker(“option”, “showOn”, “both”);
  $(“#datepicker”).datepicker(“option”, “buttonImageOnly”, true);
  $(“#datepicker”).datepicker(“option”, “buttonImage”, “img/icon.png”);
});
</script>
===========================================================================
とします。
※アイコンの保存場所や名前は任意です。

 

見た目はこんな感じになります↓↓
jQuery_Datepicker 03

 

 

あと、

 

日付の形式も変更したいと思います。

 

デフォルトだと「mm/dd/yy」という形式になっているので、

 

これを、例えば「yy.mm.dd」に変更する場合には、

 

  $(“#datepicker”).datepicker(“option”, {dateFormat:”yy.mm.dd”});

 

を追加するだけです。

 

そうすると、

 

例えば今日であれば「2016.02.05」という日付がテキストボックスに入ると思います。

このページのTOPへ戻る

著者情報

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

月別アーカイブ

  •  

    • [—]2017 (9)
    • [+]2016 (49)
    • [+]2015 (86)
    • [+]2014 (81)
    • [+]2013 (104)
    • [+]2012 (78)
  • カテゴリー