JavaScriptプログラムに関する各種メモ書き

jqueryとbootstrapのカレンダーで日本の祝日を表示する

● jqueryとbootstrapのカレンダーで日本の祝日を表示する

http://0-oo.net/sbox/javascript/google-calendar-holidays
こちらのスクリプトがとてもよくできているのでありがたく使わせていただきます。

● デモを見てみる

jQuery UI Datepickerに祝日を表示するデモ

● jscssファイルの読み込みとスタイルの上書き

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"/>
<script src="http://g.0-oo.net/gcalendar-holidays.js"></script>
<style>
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    color: white !important;
    background-color: rgb(0, 127, 255) !important;
}
</style>

● カレンダー用フォームの設置

<input type="text" id="test">

● カレンダースクリプトの起動

<script>
$(function() {
    var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
    $("#test").datepicker({
        prevText: '前月',
        nextText: '次月',
        // changeYear: true,
        // changeMonth: true,
        yearSuffix: "年",
        showMonthAfterYear: true,
        monthNames: months,
        monthNamesShort: months,
        firstDay: 1,
        dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"],
        showButtonPanel: true,
        currentText: '今日',
        closeText: '閉じる',
        dateFormat: "yy/m/d"
    });
    $("#test").focus();
});</script>

● bootstrapで使用する場合

bootstrapにはbootstrap datepicker と言うのがありますが 無視してjQuery datepicker を使用する方が応用がきくのでおすすめです。

No.1155
06/22 16:43

edit