HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jQuery UI Datepicker(カレンダー)土・日の表示色の変更

jQuery UI Datepicker で土曜日・日曜日の色を変える簡単な方法をご紹介します。

日付:

コード


$(function() {
    $("#datepicker").datepicker({
        // 2ヶ月分表示
        numberOfMonths: [1,2],
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
                }
    });
});
	

HTMLコード


<style>
    /* 土日を赤にする */
    .ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default { color:red; }
</style>
<div id="datepicker"/>
<p>日付: <input type="text" id="date_val"/></p>
	

関連リンク