jQuery Datepicker関連

基本

・「jquery-ui.min.js」と「jquery-ui.css」の読み込み必要
・対象となるinputタグを指定してDatepickerを使う。

<script>
  $( function() {
    $( '#datepicker' ).datepicker();
  } );
</script>
<input type="text" id="datepicker">

予測変換OFF

カレンダーの上に予測変換のヤツが被って・・・邪魔。だから・・・消えてもらいたい。

<input type="text" id="datepicker" autocomplete="off">

カレンダーやinputタグ内の表記（日本語表記）

$.datepicker.regional['jp'] = {
    isRTL: false,
    prevText: '<前',
    nextText: '次>',
    monthNames: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    monthNamesShort: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    dayNamesShort: ['日','月','火','水','木','金','土'],
    dayNamesMin: ['日','月','火','水','木','金','土'],
    weekHeader: '週',
    dateFormat: 'yy-mm-dd',
    firstDay: 0,
    showMonthAfterYear: true,
    yearSuffix: '年',
    //showButtonPanel: true,
    //closeText: '閉じる',
};

$.datepicker.setDefaults( $.datepicker.regional[lang] );
$(〇〇〇).datepicker();

inputタグ内の表記

上記の「dateFormat」のトコを変更する

曜日を使いたいなら「D」「DD」のどちらかを使う感じ
→inputタグ内に曜日だ入ると・・・formで飛ばされる値にも曜日が含まれるのでサーバ側の処理が何かしなくちゃいけないと思われる（※未調査）

▼公式より

d - day of month (no leading zero)
dd - day of month (two digit)
o - day of the year (no leading zeros)
oo - day of the year (three digit)
D - day name short
DD - day name long
m - month of year (no leading zero)
mm - month of year (two digit)
M - month name short
MM - month name long
y - year (two digit)
yy - year (four digit)
@ - Unix timestamp (ms since 01/01/1970)
! - Windows ticks (100ns since 01/01/0001)
'...' - literal text
'' - single quote
anything else - literal text

何かを追加したい

▼下記のような感じ

$(〇〇〇).datepicker(処理)

指定日 or 過去を選択不可

「指定日 or 過去を選択不可」ってのは「指定日以降 or 今日以降を選択可能」となる。

▼「minDate」を使って日付指定。

var tmpMethod = ({
     minDate: '2018-09-17', // 2018-09-17から選択可能
});
$(〇〇〇).datepicker(tmpMethod);

▼単純に過去としたいとき

var tmpMethod = ({
     minDate: 0, // 今日の日付から選択可能
});
$(〇〇〇).datepicker(tmpMethod);

3ヵ月分表示

var tmpMethod = ({
     numberOfMonths:   3,   // 表示月数：3ヵ月分
     showCurrentAtPos: 1,   // 表示位置：左から2番目 (中央)
     stepMonths: 3,         // 月の移動：3ヶ月単位
     //showButtonPanel: true, // ボタン領域を表示
     //gotoCurrent: true      // ボタン領域に「今日」ボタンを表示（ボタン領域非表示なら表示されない）
});
$(〇〇〇).datepicker(tmpMethod);

「日にちを変更した」というイベントを拾う

var tmpMethod = ({
   onSelect: function(dateText) {
     alert(dateText);
   }
});
$(〇〇〇).datepicker(tmpMethod);

▼直接入力されたときのイベントも考えると下記のような感じ

$(〇〇〇).('input', 〇〇〇, function(){
     alert($(this).val());
});

var tmpMethod = ({
   onSelect: function(dateText) {
     alert(dateText);
   }
});
$(〇〇〇).datepicker(tmpMethod);

他

直接入力禁止

▼inputタグ側で制御する

<input type="text" readonly="true">

時間も指定したい１

・「DateTimePicker」を参照。
→bootstrap4だと少し微妙な感じ。

時間も指定したい２

▼bootstrap4でもOKなDatetime Picker
・本体 - Tempus Dominus Bootstrap 4 Datetime Picker」が本体
・日本語化 - moment.js/ja.js
→本体の「docs/index.html」をベースに自分のサイト用に作り替える

「ja.js」だと「一月」という漢字表記。
数字表記がいいなら・・・「ja.js」をダウンロードして「1月」と書き換える。
※他に設定で変更できると思うけど、未調査。

▼土日の色と、HTMLと呼出し

<style>
  .datepicker-days th.dow:first-child,
  .datepicker-days td:first-child {
      color: #f00;
  }
  .datepicker-days th.dow:last-child,
  .datepicker-days td:last-child {
      color: #00f;
  }
</style>

<div class="input-group date" id="〇hoge〇" data-target-input="nearest">
  <input type="text" class="form-control datetimepicker-input" data-target="#〇hoge〇" name="xxxx" />
    <div class="input-group-append" data-target="#〇hoge〇" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>

$('#〇hoge〇').datetimepicker({
    dayViewHeaderFormat: 'YYYY年 MMMM',
    format: 'YYYY-MM-DD HH:mm',
    locale: 'ja',
    showClose: true
});

サンプル

・formの日付の入力補助にカレンダー

公式

・jQuery Datepicker