JavaScript

「jQuery ui Datepicker」のオプション

前回の記事では、

「jQuery ui Datepicker」の設定方法について投稿しました。
https://deep-blog.jp/engineer/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」という日付がテキストボックスに入ると思います。

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

名前ダッチ

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

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

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

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

【2,000円OFF キャンペーン実施中】↓

最近の記事

  1. WP:WordPress(ワードプレス)
  2. 色鉛筆
  3. WP:WordPress(ワードプレス)
  4. WP:WordPress(ワードプレス)
  5. WP:WordPress(ワードプレス)
  6. 文系と理系のメリットとデメリット
  7. 東京駅
  8. 残業
  9. プログラマーになるのに年齢は関係ある?
  10. 年収(収入)
【2,000円OFF キャンペーン実施中】↓

Twitter

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

ConoHa WING 2周年キャンペーン中

アーカイブ

PAGE TOP