日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。

目次

  1. Datepicker for Bootstrap
  2. オプション
  3. ちょっとしたカスタマイズ
  4. datetimepicker for Bootstrap
  5. Timepicker for Bootstrap(移動しました)

Datepicker for Bootstrap

ダウンロード / サンプル

<2014-06-16>
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>

カスタマイズ

キーボード入力やマウスで貼り付けを禁止

デフォルトでは不正な日付や時刻を入力するとDatepickerでは現在日に、Timepickerではあり得る時刻に補正(法則は分かりません)を自動的にやってくれるようです。手入力を禁止するにはreadonlyを付与すれば実装できるようです。
スマートフォンなどでは、フォーカスした際のキーボードの出現も抑えることができます。

<input id="dp1" maxlength="10" type="text" readonly="readonly">
関連プラグイン
DatepickerとTimepickerを両方実装できるプラグイン。オプションでどちらかをオフにすることもできるのでこれ1つで対応できそうです。bootstrap-datetimepicker (サイト)
その他
DateTimePicker
  • このエントリーをはてなブックマークに追加

関連記事

入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」

「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v

商用利用フリー Lightbox プラグイン

商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリ

no image

時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker

シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」

「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

jqPlot - Legend(凡例) オプション

jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

数値入力スライダー「jQuery Simple Slider」

「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余

Comment

  1. formatとlanguageの間にカンマがなくて、
    うまく動かなくてツマヅイてました。。。
    私ぐらい?

    $(function() {
    $('#dp1').datepicker({
    format: 'dd/mm/yyyy',
    language: 'ja', // カレンダー日本語化のため
    });
    });

  2. 大変参考になりました。ありがとうございます。カレンダーの日付切り替えタイミングが日本時間ではないようなのですが、調節は可能なのでしょうか?

    • コメントありがとうございます。
      「カレンダーの日付切り替え」とはchangeDateイベントのことでしょうか? また、「タイミング」(時間)とは、どう取得されているのでしょうか?
      可能でしたら、コードなど添付いただけますか?

neco へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑