普段、bootstrapを使用する機会が多い為、カレンダー入力はそのplug-inである bootstrap-datepicker.js を使用していましたが...

bootstrapはバージョンアップが早い為でしょうか、手元にあるbootstrapを最新版に更新した所、bootstrap-datepicker.js が動作しなくなりました。

いい機会かも知れませんので、 jQuery UI Datepickerに、日本語化、複数月表示、祝日,土日色付けを対応させる方法を調べてみました。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<!-- http://jqueryui.com/ よりダウンロード -->
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">
<script src="jquery-ui/jquery-ui.js"></script>
<!-- https://github.com/jquery/jquery-ui/tree/master/ui/i18n で日本語化 -->
<script src="jquery-ui/jquery-datepicker-ja.js"></script>

<!-- http://www.h3.dion.ne.jp/~sakatsu/ -->
<!-- http://www.ka-net.org/blog/?p=2158 で、祝日,土,日を色付け-->
<script src="HolidayChk.js"></script>
<script>
$(function() {
   $("#datepicker").datepicker({
     dateFormat:'yy-mm-dd',//日付の書式を変更
     numberOfMonths: 3,    //複数月を表示
     //複数月表示の場合、画面に入らないこともある為、draggableに
     beforeShow: function(){ $("#ui-datepicker-div").draggable(); },
     // HolidayChk.js 祝日,土日を色付け
     beforeShowDay: function(date) { //
       var dateStr =
    [date.getFullYear(),date.getMonth()+1,date.getDate()].join('-');
       var holidayName = ktHolidayName(dateStr);
       if(holidayName)        return [true, "date-holiday"];
       if(date.getDay() == 0) return [true, "date-holiday"];
       if(date.getDay() == 6) return [true, "date-saturday"];
       return  [true];
     },
     showAnim: '' //NONE
   });

});
</script>

<style>
.date-holiday  .ui-state-default { background-color:#FF9999; }
.date-saturday .ui-state-default { background-color:#66CCFF; }
</style>  
</head>
<body>
 
日付 <input type="text" id="datepicker">
 
</body>
</html>