常連

### 実現したいこと
予約フォームにカレンダー表示させるDatepickerについてご教授ください。
下記を参考に基本的なカレンダー表示は出来ました。
https://blog.knis.jp/datepicker/#sample03

条件
→土日祝および水曜日は選択させない
→過去日は選択させない

※一つのフォームに複数設置するため、#datepickerを.dateに変更しています。
https://codepen.io/MayMayMayMay/pen/WbvKeNq

### 発生している問題・分からないこと
カレンダーの選択可能日を3週間先にしたいのですが、下記を見ても分かりませんでした。
https://blog.knis.jp/datepicker/#sample06

上記に加えて、PC版とモバイル版のカレンダー表示数を変えたいのですが、どこに加筆すれば良いのか分かりません。
（3週間先ということで、月の中旬以降にアクセスした際に次月も見えた方が良いため）
https://www.site-convert.com/archives/2190#outline__4

どうぞよろしくお願いいたします。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
希望するすべての条件を満たす結果を得られませんでした。

### 補足
特になし

jQuery UIのDatepickerカスタマイズについて

### 前提・実現したいこと

datepickerの初期値を表示しているページによって変え、かつ
placeholderのテキストを表示したいです。
2020年5月のページ場合は2020/05/01を初期値にしたい。
2020年6月のページ場合は2020/06/01を初期値にしたい。

それぞれ初期値は表示ページでいいのですが、inputboxにはvalueではなく
placeholderを表示することは出来ないでしょうか。

### 発生している問題・エラーメッセージ

```
placeholderを設定し、valueにそれぞれの年月を設定しているのですが
valueが優先されてしまいます。
```

### 該当のソースコード

```ここに言語名を入力

2020年5月の場合
<input type="text" id="datepicker" value="2020/05/01" placeholder="日付を選択してください">

2020年6月の場合
<input type="text" id="datepicker" value="2020/06/01" placeholder="日付を選択してください">

共通の読み込みスクリプト
<script>
  $("#datepicker").datepicker();
</script>

```

### 補足情報（FW/ツールのバージョンなど）

jquery等のバージョンは下記になります。
```
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
```

datepickerの初期値について

### 前提・実現したいこと

jqueryのdatepikerを使用して、モーダルウィンドウにてカレンダーを表示させたいと思っています。
カレンダーアイコン押下→モーダルウィンドウでカレンダー表示→選んだ日付がテキストボックスに入力

現在、datepikerでカレンダーをテキストボックスの下に入力することはできていますが、モーダルウィンドウでの表示が上手くいきません。（表示したい箇所：class='modal'）
どうしてもカレンダー部の要素がhtmlでの表示箇所がhtml下部になってしまうので、そもそもhtmlのソースを表示する個所を指定できるのでしょうか。
また、アイコンを押した後にモーダルウィンドウにてカレンダー表示できるのでしょうか。
教えていただけますと幸いです。

### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
        <meta name="description" content="勉強用カレンダーページです。">
        <title>カレンダーページ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <div class="contents">
            <div class="calendar">
                <input type="text" name="datepicker" class="datepicker" value="">
                <div class="calendar__modal">
                    
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./js/index.js"></script>
    </body>
</html>
```
```css
@charset "UTF-8";

* {
  padding: 0;
  margin: 0;
}
body {
  color: #333;
  letter-spacing: 1px;
}
.contents {
  width: calc(100% - 4%);
  margin: 4% 2%;
}
.calendar {
    display: flex;
    align-items: flex-end;
    margin-top: 2%;
}
.datepicker {
    height: 4vh;
    width: 20%;
    margin-left: 1%;
}
.ui-datepicker-trigger {
    width: 5vh;
}
```

```jquery
$(function() {
  $('.datepicker').datepicker({
    buttonImage: "./common/img/calendar.png",  // カレンダーアイコン画像
    buttonText: "カレンダーから選択",  // アイコンホバー時の表示文言
    buttonImageOnly: true, // ボタンとして表示
    showOn: "both",  // アイコン、テキストボックスどちらをクリックでもカレンダー表示
    beforeShow: function(input, inst){
       inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
    }
  });
});
```

### 試したこと

検索にてカレンダーの位置を移動できるとの情報を得たので、下記のソースをjqueryにて追記してみましたが、うまく該当の要素のstyleに適用されなかったです...
beforeShow: function(input, inst){
       inst.dpDiv.css({top: 50 + '%', left: 50 + '%'});
    }

datepikerのカレンダーをモーダルウィンドウで表示したい

### jqueryのdatepickerで特定の日付を選択できないようにしたい。

jqueryのdatepickerで特定の日付を選択できないようにしたいのですが、
曜日を選択できないようにするのは出来たのですが、日付を選択できないようにするのが出来ないです


### 該当のソースコード

```html
<input type="text" class="datepicker" >

```

```javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
$(function() {
    
    var disableDates = [
        "2020/12/29"
       ];

    $(".datepicker").datepicker({
            beforeShowDay: function(date) {

            // 水曜日を選択できないようにする
            if (date.getDay() == 3) {
                return [false, ''];
            }
            // 特定日を選択できないようにする
            var disableDate = $.datepicker.formatDate('yy/mm/dd', date);
            if (disableDates.indexOf(disableDate) == 1) {
                return [false, ''];
            }
            // それ以外
            return [true, ''];
        },
    })

});
</script>
```


上記コードで水曜日は選択できなくなるのですが、12/29が選択できてしまいます。
どこを修正すればいいのかご教授お願いします。

jqueryのdatepickerで特定の日付を選択できないようにしたい。

ワードプレスにて､jQuery UI Datepickerを利用しています｡
お手数おかけしますが､以下実装方法をご教示いただけないでしょうか?
よろしくお願いいたします><


■やりたいこと
●本店
･当日と翌日を選択不可
しつつ､
･「今日」の印を表示させる方法

●支店
本店に設定した内容を反映させないようにしたい｡
※本店の設定変更に行った場合でも､現状を維持したい｡


■実際のソース
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(function($) {
	//今日の日付
	var today = new Date();
    var today_y = today.getFullYear();
	var today_m = today.getMonth() + 1;
	var today_mm = ('0' + today_m).slice(-2);
	var today_d = today.getDate();
	var today_dd = ('0' + today_d).slice(-2);
	var todays = today_y + "-" + today_mm + "-" + today_dd;

	//明日の日付
	var tomorrow = new Date();
	tomorrow.setDate(tomorrow.getDate() + 1);
    var tomorrow_y = tomorrow.getFullYear();
	var tomorrow_m = tomorrow.getMonth() + 1;
	var tomorrow_mm = ('0' + tomorrow_m).slice(-2);
	var tomorrow_d = tomorrow.getDate();
	var tomorrow_dd = ('0' + tomorrow_d).slice(-2);
	var tomorrows = tomorrow_y + "-" + tomorrow_mm + "-" + tomorrow_dd;
	

	//本店カレンダー
	var target_days_honten = [//定休日指定
		//'2020-11-28',
	];
	//支店カレンダー
	var target_days_sakuragi = [//定休日指定
		'2020-12-28',
	];
	//本店ページ用（本店）
	$('#js-datepicker-honten').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if ($.inArray(yymmdd, target_days_honten) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
        }
	});

	//支店ページ用（支店）
	$('#js-datepicker-sakuragi').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if ($.inArray(yymmdd, target_days_sakuragi) == -1) {
				return [true, ""];
			}
			else {
				return [false, ""];
			}
        }
	});

	//予約ページ用
	$('#js-datepicker-main').datepicker({
		minDate: 0,
		dateFormat: 'yy/mm/dd',
        beforeShowDay: function (day) {
			var extraction_val = $(".shop-select").val();
			yymmdd = $.datepicker.formatDate('yy-mm-dd', day);
			if (extraction_val == "本店") {
				if ($.inArray(yymmdd, target_days_honten) == -1) {
					return [true, ""];
				}
				else {
					return [false, ""];
				}
			}
			else if (extraction_val == "支店") {
				if ($.inArray(yymmdd, target_days_shiten) == -1) {
					return [true, ""];
				}
				else {
					return [false, ""];
				}
			}
        }
	});

})(jQuery);

jQuery UI Datepickerで、･当日と翌日を選択不可　･「今日」の印を表示させる方法　をご教示いただけないでしょうか?

### MW WP FORMで予約フォームを設置しております。
土日祝および定休日（夏季休業日、年末年始）を選択できなくしたいです。

曜日を選択できないようにするのは出来たのですが、日付を選択できないようにするのが出来ないです。

コードの記載はfooter.phpにしております。

### 該当のソースコード

```ここに言語名を入力
<script>
 jQuery(function($){ 
		$(".hasDatepicker").datepicker("option","beforeShowDay",function(date){
		var ret = [(date.getDay() != 0 && date.getDay() != 6)]; 
		return ret; 
		});
	 $('form .hasDatepicker').attr('autocomplete', 'off');
	});
</script>

```


MW WP FORMで祝日および定休日を設定したい

```
//sample.html
<body>
    <h1>以下試し</h1>
    <input type="text" id="datepicker" name="date" value="2000-01-01">
    <button class="show_btn">実行</button>
    <p class="show_date">date</p>
    <script src="sample.js"></script>
    <h1>以上試し</h1>
</body>

// sample.css
.Highlighted > .ui-state-default{
    background: #FFFFCC !important;
    color: red !important;
}
.Lowlighted > .ui-state-default{
    background: blue !important;
    color: white !important;
}

// sample.js
var days= ['2000-01-01','2000-01-02','2000-02-01'];
// カレンダーの設定
$('#datepicker').datepicker({
    beforeShowDay: function(date){
        for (var i=0; i<days.length; i++){
            alert(i);
            var day=new Date();
            day.setTime(Date.parse(days[i])); 
            if (day.getYear() == date.getYear() &&
            day.getMonth() == date.getMonth() &&
            day.getDate() == date.getDate()){
                return [true,'Lowlighted','target'];
            }
            else{
                return [true,'Highlighted','mistake'];
            }
        }
    },
    defaultDate: new Date('2020-01-01'), // 初期値はその日の日付　
 　 dateFormat: 'yy-mm-dd',
// 選択した日付を表示するボタン
$('.show_btn').on('click',function(){ 
    inputText=$('#datepicker').val();
    $('.show_date').text(inputText);
})
//
```
特定の日（'2000-01-01','2000-01-02','2000-02-01'）の背景色を青色にしたいのですが、2000-01-01の日のみ背景色が青色になり、2000-01-02,2000-02-01の日はデフォルトのままです。alert(i)でデバックしてみたところ、ずっと0を表示しているので、for文の繰り返しがうまくいってないと思います。
改善点を教えてくださると助かります。

Datepickerで特定の日付の背景色を変えたい

### 前提

歯医者のHPの予約フォームがあるのですが、土日だけ受付時間が異なります。
土日は平日より二時間、受付時間が短いです。
平日：9:00-13:00　14:30-20:00
土日：9:00-13:00　14:30-18:00

【MW WP FORM】内でDatepickerを使用して、土日だけは
受付時間を二時間短くするコードをjsで書いてみたのですが、結果は平日しか表示されず困っています。

### 実現したいこと

平日は
9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30,18：00,18：30,19：00,19：30　を表示させて

土日は
9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30　を表示させたいです。（,18：00,18：30,19：00,19：30が選択肢にない）



### 該当のソースコード

```php
<dt class="b_g"><span class="nini">任意</span>第1希望日時</dt>
<dd class="d_flex">
希望日 [mwform_text name="第1希望日" size="15" placeholder="希望日を選択して下さい" js="minDate:'+2d'" ]
 時間 
[mwform_select name="第1希望日時間" class="form-child1" children=":希望時間を選択して下さい,9：00,9：30,10：00,10：30,11：00,11：30,12：00,12：30,14：30,15：00,15：30,16：00,16：30,17：00,17：30,18：00,18：30,19：00,19：30" post_raw="true"]
</dd>
```
```js
jQuery(function($){

$("input[name='第1希望日']").datepicker().on("change", function(e) {//日付を選ぶたびに動かしたい
var fDate1 = $("input[name='第1希望日']").datepicker('getDate');
if (fDate1 !== null) { 
    fDate1 instanceof Date; 
    var youbi1 = fDate1.getDay();  /**********曜日を0から6の整数で取得**************/
}
	if (youbi1 === 0||youbi1 === 6){ /****土(6)、または日(0)だった場合、土、日の時刻を表示****/
           $('.form-child1').children.remove(":contains(',18：00,18：30,19：00,19：30')");    
       }
});
```
### 試したこと

.removeをつかえば、文字列から土日の時刻を削除できる！と思ってやってみたのですが、なかなか反映されずだめでした。

１
$('.form-child1').remove(":contains(,18：00,18：30,19：00,19：30)");
	                 
2
 $('.form-child1').children.remove(":contains(',18：00,18：30,19：00,19：30')");

3
 $('.form-child1')$('.children').remove(":contains(',18：00,18：30,19：00,19：30')");


### 補足情報（FW/ツールのバージョンなど）
WPバージョン 6.1.1 

よろしくおねがいいたします

