ホームページを作る人のネタ帳

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

カレンダー
日付を選択するとき、様々な方法があると思いますけど、カレンダーからダイレクトに選ぶのが最も簡単な方法ですよね。

そんなユーザー体験を実装するのが今回ご紹介するjQueryプラグインです。

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


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

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

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

実際は、出力形式を「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>

ね、簡単でしょ。

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

是非お試しあれ。

それでは、また。
yamada
Posted byyamada

Comments 0

There are no comments yet.

Leave a reply