日付入力のテキストフォームにカレンダープラグインを導入
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="https://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', 」
みたいにクラス名をつけることで解決。
関連記事
-
-
jQueryで電話番号チェック
やりたかったことはjavascriptかjQueryで 電話番号のバリデート。 ...
-
-
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
-
-
jQueryで関数処理中にブラウザのブロック(intro.js)
Ajaxで処理を行っている間、他の処理を行わせたくなかった。 「now load ...
-
-
jQueryでIPから位置情報の取得
jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...
-
-
bootstrap-datetimepickerについて
日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...
-
-
JavaScriptの三項演算子
いつもと違う書き方？ 使い方の三項演算子が あったのでメモ。 ■ソース var ...
-
-
JavaScriptでAjaxを使わずにクロスドメインから変数を取得する
JavaScriptの配列形式で出力するファイルを作成しておき、 動的にソースに ...
-
-
jQuery2.0がリリース
リリースされたとのこと。 http://blog.jquery.com/2013 ...
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...
-
-
javascriptとPHPで正規表現を使う場合
とりあえず使いそうなのは検索と置換。 ■javascript var str = ...
- PREV
- Dropboxでファイル復元
- NEXT
- ライブラリ、フレームワーク、API、プラグイン