ドラッグアンドドロップも可能な軽量カレンダーピッカー

日付入力をもっとフレンドリーに

カレンダー選ぶ、日付クリックする、日付が入力される。

とっても軽量で、シンプルなプラグインだけど、いい仕事をしてくれます。


ショッピングサイトでも使えますし、日付の指定、開始日、締め日、あらゆるところで需要の高い日付の選択を簡単ピッカーで入力出来ます。

実際は、出力形式を「20 Dec 2015」ってなっているように、日本語にローカライズする必要があるけど、この設置方法がとにかく簡単なので、ローカライズしてまで使いたい人も多いんじゃないだろうか。

ヘッダー部分
<script src="path/to/jquery.js"> </script>
<script src="path/to/datepickr.min.js"> </script>
<link rel="stylesheet" href="path/to/datepickr.css"/>

HTML
<script src="path/to/jquery.js"> </script> <script src="path/to/datepickr.min.js"> </script> <link rel="stylesheet" href="path/to/datepickr.css"/>

<input id="datepickr-calendar-5" type="text"/>
  <script>
  	$("#datepickr-calendar-5").DatePickr({
  		onChange: function(){
  			alert("Changed!");
  		},
  		onShow: function(){
  			alert("Datepickr is being shown!");
  		},
  		onHide: function(){
  			alert("Datepickr is being hidden!")
  		},
  		onMonthChange: function(e){
  			alert("Month went one " + ((e.direction == -1) ? "backward": "forward"));
  		}
  	});
</script>

ね、簡単でしょ。

サンプルデモページ
ダウンロードはこちら

是非お試しあれ。

それでは、また。