勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

日付入力のテキストフォームにカレンダープラグインを導入

      2014/02/23

やりたかった事と制限は下記の通り。

・日付入力のテキストフォームにカレンダープラグインを導入
・jQueryUIは使わない
・出来るだけ軽いもの

■使用プラグイン
http://glad.github.io/glDatePicker/

■使い方
jsファイルとCSSファイルを呼び出す。
jQuery部分に、
$(function(){
    $("テキストフォームIDを指定").glDatePicker();
})
と記述するだけ。

■ソース
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>glDatePickerの練習</title>
<link rel="stylesheet" href="./styles/glDatePicker.default.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./glDatePicker.min.js"></script>
<script>
    $(function(){
        $("#calender1,#calender2").glDatePicker({
            onClick: function(target, cell, date, data) {
                target.val(date.getFullYear() + '/' + (date.getMonth()+1) + '/' +date.getDate());
            }
        });
    });
</script>
</head>
    <body>
    <h1>glDatePickerの練習</h1>
    <input type="text" id="calender1"> ~ <input type="text" id="calender2">
    </body>
</html>

■サンプル
http://sample.taitan916.info/calender/

■その他
複数設置したい時は$("#calender1,#calender2").glDatePicker
みたいにカンマ区切りで指定。

あとデフォだとブラウザの仕様かもしれないけど、

IE,Firefox ⇒ YYYY/MM/DD
Chrome ⇒ YYYY年MM月DD日

みたいなフォーマットになった。受け取る際に正規表現使えば
いけそうだけどフォーマット揃えといた方が何かとよさそうなので、

{onClick: function(target, cell, date, data) {
target.val(date.getFullYear() + '/' + (date.getMonth()+1) + '/' +date.getDate());
}

の部分でスラッシュ区切りを指定している。
この方法が正しいかどうかは知りません。

date.getMonth()はすっかり忘れてたけど+1しないと

いけないので注意。

//追記

付属しているCSSでデザイン変えるのが上手くいかず

悩んだのでメモ。jqueryで書く時に「cssName: 'flatwhite', 」

みたいにクラス名をつけることで解決。

 - javascript, jQuery

  関連記事

javascript_logo_unofficial-300x300
JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

jquery_logo
FullCalendarでラベル毎に表示切替したい

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

javascript_logo_unofficial-300x300
Highstockの使い方とカスタマイズ

株価などの値動きを図表とするローソク足のグラフを何らかの方法で描写したかった。調 ...

javascript_logo_unofficial-300x300
setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...

images
要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jquery_logo
pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

mzl.qobqfuxq
GoogleMapAPIで現在地取得と目的地までのルート表示

GoogleMapAPIを使って現在地を取得しつつ、目的地までのルートを表示させ ...

javascript_logo_unofficial-300x300
javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

mzl.qobqfuxq
PHPで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報をPHPで取得し、GoogleMapAPIでその場所を反映 ...