Bootstrap の datepicker

メモ、
以下からダウンロード
https://github.com/uxsolutions/bootstrap-datepicker

HTML head 読込み指定
曜日を日本語表示の為には、配布されてる中の bootstrap-datepicker.ja.min.js を使う。

<link href="dist/css/bootstrap-datepicker.css"  rel="stylesheet" />
<script src="dist/js/bootstrap-datepicker.js"></script>
<script src="dist/locales/bootstrap-datepicker.ja.min.js"></script>

CSS・・・自由に。

.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;
}
.datepicker-days thead{
   border-bottom: 1px solid #cccccc;
}
.datepicker-title{
   background-color: #ffbb11;
}

datepicker 指定

$('#date_sample').datepicker({
    format: 'yyyy/mm/dd',
    language:'ja',
    todayHighlight: true,
    templates: {
        leftArrow: '<',
        rightArrow: '>'
    },
}).on('change', function(){
     // TODO $(this).val()
});

f:id:posturan:20190601154918j:plain

タイトルを付ける Option

$('#date_sample').datepicker({
    format: 'yyyy/mm/dd',
    language:'ja',
    todayHighlight: true,
    title: '誕生日',
    templates: {
        leftArrow: '<',
        rightArrow: '>'
    },
}).on('change', function(){
     // TODO $(this).val()
});

f:id:posturan:20190601155247j:plain

他にもオプション、
曜日の始まり指定

weekStart: 1, // 0=Sunday

曜日によるハイライト表示

daysOfWeekHighlighted: [0],

などがある。