日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。
目次
- Datepicker for Bootstrap
- オプション
- ちょっとしたカスタマイズ
- datetimepicker for Bootstrap
- Timepicker for Bootstrap(移動しました)
Datepicker for Bootstrap
Bootstrap3版にサンプルを変更
<2013-03-03>
オリジナルのものがforkされて、より機能が追加されているようです。IE8対応化 & 日付選択用の表示カレンダーを日本語に変換できるようになっています。
スクリプト
<link href="css/datepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-datepicker.js" type="text/javascript"> <!-- 日本語対応用スクリプト --> <script src="js/locales/bootstrap-datepicker.ja.js" type="text/javascript">
実装
<input id="dp1" maxlength="10" type="text"> <script type="text/javascript"> $(function() { $('#dp1').datepicker({ format: 'dd/mm/yyyy' language: 'ja', // カレンダー日本語化のため }); }); </script>
オプション
<script type="text/javascript"> $(function() { $('#dp1').datepicker({ // format 日付フォーマット // -------------------------------------------- format: 'dd/mm/yyyy' // d, dd - 日(dd:0埋めを行う) // D, DD - 曜日(D:Mon / DD:Monday) // m, mm, M, MM - 月(m:1, mm:01, M:Jan, MM:January) // yy, yyyy - 年(2桁もしくは4桁) // セパレータ(区切り文字)は'/'(スラッシュ)もしくは'-'(ハイフン) // weekStart カレンダーの週初めを指定 // -------------------------------------------- // (デフォルト) 日曜開始 weekStart: 1 // 月曜開始 // weekStart: 6 // 土曜開始 // calendarWeeks 週の通し番号を表示 // -------------------------------------------- // (デフォルト) 表示しない calendarWeeks: true // 表示する // language カレンダーの表示言語 // -------------------------------------------- // (デフォルト) 英語 language: 'ja', // カレンダー日本語化 // 別途bootstrap-datepicker.ja.jsの読み込みが必要 // viewMode 選択モード // -------------------------------------------- // (デフォルト) 日を設定 // viewMode: 2 // 年→月→日と設定 // viewMode: 1 // 月→日と設定 // minViewMode 選択 // -------------------------------------------- // (デフォルト) // "日付"まで設定できる // minViewMode: 1 // "月"まで選択できる // minViewMode: 2 // "年"まで選択できる // keyboardNavigation キーボードによる選択日付移動 // -------------------------------------------- // (デフォルト) // できる // keyboardNavigation: false // できない // autoclose 日付選択で自動的にカレンダーを閉じる // -------------------------------------------- // (デフォルト) // 閉じない autoclose: true // 閉じる // startDate 選択可能開始日 // -------------------------------------------- // (デフォルト) なし startDate: Date(), // 今日 // startDate: "+1d", // 明日 // startDate: "-1d", // 前日 // daysOfWeekDisabled 選択不可の曜日 // -------------------------------------------- // (デフォルト) なし daysOfWeekDisabled: [ '0', '6'] // 土曜・日曜 無効 // '0': 日 '1': 月 '2': 火 '3': 水 '4': 木 '5': 金 '6': 土 }); }); </script>
Zebra Datepicker jQuery.minical Ion.Calendar jQuery UI Datepicker Pikaday Datepick
PickMeUp 複数月を表示
カスタマイズ
キーボード入力やマウスで貼り付けを禁止
デフォルトでは不正な日付や時刻を入力するとDatepickerでは現在日に、Timepickerではあり得る時刻に補正(法則は分かりません)を自動的にやってくれるようです。手入力を禁止するにはreadonlyを付与すれば実装できるようです。
スマートフォンなどでは、フォーカスした際のキーボードの出現も抑えることができます。
<input id="dp1" maxlength="10" type="text" readonly="readonly">
DatepickerとTimepickerを両方実装できるプラグイン。オプションでどちらかをオフにすることもできるのでこれ1つで対応できそうです。bootstrap-datetimepicker (サイト)
その他
DateTimePicker
関連記事
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
Comment
[…] 要素の指定にはJQueryを使っています。カレンダーUIは、bootstrap-datepickerを使って実現しています。使い方は、こちらが参考になると思います。 […]
datepicker
Bootstrapに使用しても違和感ないカレンダー入力フォーム作りやすいと思う→日付入力に便利な「Datepicker for Bootstrap」 https://t.co/NbyRhmTnM1
formatとlanguageの間にカンマがなくて、
うまく動かなくてツマヅイてました。。。
私ぐらい?
$(function() {
$('#dp1').datepicker({
format: 'dd/mm/yyyy',
language: 'ja', // カレンダー日本語化のため
});
});
jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective http://t.co/2iMhJLBKUi
(参考サイト)
日付入力に便利な「Datepicker for Bootstrap」
日付入力に便利な「Datepicker for Bootstrap」 http://t.co/pcE8EdLNPd
Bootstrap日時選択 / “jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective” http://t.co/tbxZO4Ef1r
日付入力に便利な「Datepicker for Bootstrap」 http://t.co/tjo36FZREG
大変参考になりました。ありがとうございます。カレンダーの日付切り替えタイミングが日本時間ではないようなのですが、調節は可能なのでしょうか?
コメントありがとうございます。
「カレンダーの日付切り替え」とはchangeDateイベントのことでしょうか? また、「タイミング」(時間)とは、どう取得されているのでしょうか?
可能でしたら、コードなど添付いただけますか?
[…] 参考: jQuery | 日付入力に便利な「Datepicker for Bootstrap」 […]
RT @coderpost: jQuery | 日付入力に便利な「Datepicker for Bootstrap」 http://t.co/ei2JNBCGLs #javascript #bootstrap #jquery
jQuery | 日付入力に便利な「Datepicker for Bootstrap」 http://t.co/ei2JNBCGLs #javascript #bootstrap #jquery
jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective - http://kwski.net/jquery/1041/
jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective http://t.co/op2QgHwlKm
“jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective” http://t.co/iDneaA7dte
“jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective” http://kwski.net/jquery/1041/
jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective - http://kwski.net/jquery/1041/
datepicker
jQuery | Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective http://bit.ly/17Zn8Sq #jquery
jQuery | Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective - http://kwski.net/jquery/1041/
jQueryのカレンダープラグイン。Bootstrapと日本語対応
jQuery: Datepicker/Timepicker for Bootstrap | Think deeply, Do less, More effective http://bit.ly/12df14q