問題 × 解決策

jQuery UI Datapickerのカレンダーで土日を選択できないようにする

問題

jQuery UI Datapickerのカレンダーで土日を選択できないようにするには?

解決策

Datepickerの設定「$('日付用のテキストフィールド').datepicker({ オプション: 設定 });」で、オプション「beforeShowDay」に「date.getDay() == 0 || date.getDay() == 6」の時に「return [false, 'ui-state-disabled']」を設定する。

カレンダーで土日を選択できないようにする。

jQuery UI Datapickerのカレンダーで土日を選択できないようにする方法をご紹介します。

jQuery UI Datapickerのカレンダーを表示する方法を過去の記事で紹介していますので、ぜひこちらもご覧ください。
jQuery UIのDatepickerでフォームの日付入力をカレンダー選択にする

DEMOはこちら

  • 入力フィールドの隣のアイコンをクリックすると、カレンダーが表示されます。
  • カレンダーの日付を選択すると、入力フィールドにその日付が表示されます。

CDNを利用して、jQuery UIを読み込みます。

CDNを利用して、jQuery UIを読み込みます。

<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>

フォームの作成

まず、フォームの作成を行います。

HTML

<form action="" method="post">
<table>
<tbody>
<tr>
<th scope="row"><label for="cal">日付</label></th>
<td>
<input id="cal" type="text" name="cal" class="input-text cal"> <a class="cal-icon" href="#"></a>
</td>
</tr>
</tbody>
</table>
</form>

CSS

@media print, all and (min-width: 768px) {
	form input.cal{
        display: inline-block;
		vertical-align: middle;
		margin-right: 5px;
    }
    form .cal-icon{
		content: "";
        display: inline-block;
		vertical-align: middle;
        width: 30px;
        height: 30px;
		cursor: pointer;
        background-image: url(../images/common/anchor-cal.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 30px auto;
    }
    form .cal-icon:hover{
        filter:alpha(opacity=60); /* IE 6,7*/
        -ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
        -moz-opacity:0.6; /* FF , Netscape */
        -khtml-opacity: 0.6; /* Safari 1.x */
        opacity:0.6;
        zoom:1; /*IE*/
    } 
    form .input-text[readonly]{
        background-color: #C4BAB7;
    }
}
@media only screen and (max-width: 767px) {
    form .input-text.cal{
        width: 75%;
        display: inline-block;
		vertical-align: middle;
		margin-right: 5px;
    }
    form .cal-icon{
		content: "";
        display: inline-block;
		vertical-align: middle;
        width: 30px;
        height: 30px;
		cursor: pointer;
        background-image: url(../images/common/anchor-cal.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 30px auto;
    }
    form .cal-icon:hover{
        filter:alpha(opacity=60); /* IE 6,7*/
        -ms-filter: "alpha(opacity=60)"; /* IE 8,9 */
        -moz-opacity:0.6; /* FF , Netscape */
        -khtml-opacity: 0.6; /* Safari 1.x */
        opacity:0.6;
        zoom:1; /*IE*/
    } 
    form .input-text[readonly]{
        background-color: #C4BAB7;
    }
}

入力フィールドの隣のアイコンにクリックイベントを設定する。

入力フィールドの隣のアイコンにクリックイベントを設定します。

if($('form .input-text.cal').length){
    $('form .input-text.cal').prop('readonly',true);
    $('form .cal-icon a').click(function(){
        event.preventDefault();
        $(this).closest('form').find('.input-text.cal').datepicker({
            dateFormat: "yy年m月d日",
			beforeShowDay: function (date) {
				if ( date.getDay() == 0 || date.getDay() == 6 ) {
					// 土曜日か日曜日の場合
					return [false, 'ui-state-disabled'];
				} else {
					// 月曜日~金曜日の場合
					return [true, ''];
				}
			}
        });
        $(this).closest('form').find('.input-text.cal').datepicker("show");
    });
};

ポイント!

beforeShowDay」に「date.getDay() == 0 || date.getDay() == 6」の時に「return [false, ‘ui-state-disabled’]」を設定することで、土日を選択できないようにすることができます。

参照

以下のサイトが、より詳しく解説してくれています。

【jqueryuiのdatepickerで特定の曜日を選択不可にする at softelメモ】
https://www.softel.co.jp/blogs/tech/archives/6056

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧