メモ、
以下からダウンロード
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() });
タイトルを付ける Option
$('#date_sample').datepicker({ format: 'yyyy/mm/dd', language:'ja', todayHighlight: true, title: '誕生日', templates: { leftArrow: '<', rightArrow: '>' }, }).on('change', function(){ // TODO $(this).val() });
他にもオプション、
曜日の始まり指定
weekStart: 1, // 0=Sunday
曜日によるハイライト表示
daysOfWeekHighlighted: [0],
などがある。