JavaScript

Javascript

「jQuery ui Datepicker」のオプション

前回の記事では、

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

 

で、

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

 

といっても、

良く使用するものだけにはなりますが。

 

例えば、

テキストボックスだけではなく、

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

 

その場合には、

$("#datepicker").datepicker("option", "showOn", "both");

を追加します。

 

ソースは以下の様になります。

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

 

ただ、

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

ボタンを独自の画像に変更する為に、

とします。
※アイコンの保存場所や名前は任意です。

 

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

 

あと、

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

 

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

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

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

を追加するだけです。

 

そうすると、

例えば、

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

関連記事

  1. JavaScript
  2. JavaScript

    Javascript

    jQueryのプラグイン「jCanvas」で間取図を作成

    HTML5のCanvasを使ってやりたい事があったので、本日はjQ…

  3. JavaScript

    Javascript

    pickadate.js【デートピッカー・タイムピッカー用ライブラリ】

    pickadate.jsについてデートピッカーと言えば、「…

  4. JavaScript

    Javascript

    setInterval()とsetTimeout()

    Javascriptでタイマー設定する時に使用する関数にsetTime…

  5. JavaScript

    Javascript

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

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

  6. JavaScript

    Javascript

    Geolocation APIの精度ってあまり良くない!?

    先日記事にしたGeolocation API!!精度って良くないの…

最近の記事

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