【WordPress】PHPからjsにJSONで値を渡したいのですが、エラーが出ます。

Question

前提

ワードプレスを使ってイベントページを作成しており、
そのsingleページにContactForm7のフォームを挿入しています。
フォームの中にデイトピッカーを設けており、最小日・最大日を設定したいと考えています。

各記事ごとに選択できる日付の範囲を変えたいので、
カスタムフィールドで最小・最大の日付を選択し、これを反映できるようにしたいです。
js内にあるデイトピッカーの中で、PHPで取得した日付を出力することが希望です。

発生している問題・エラーメッセージ

■single.php

//デイトピッカーに日付選択範囲を追加する
<?php
        $jsonString = json_encode($dataArray, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
        $date_start = [date_format(date_create(get_field('イベント開始日')), 'Y,m,d')];
        $date_end = [date_format(date_create(get_field('イベント終了日')), 'Y,m,d')];
        if($date_end){
            $ads_s = json_encode($date_start);
            $ads_e = json_encode($date_end);
        }else{
            $ads_s = json_encode($date_start);
            $ads_e = json_encode($date_start);
        }
    ?>

■script.js

$(function () {
  let $ads_s = JSON.parse('<?php echo $ads_s; ?>');
  let $ads_e = JSON.parse('<?php echo $ads_e; ?>');
  console.log($ads_s);
  console.log($ads_e);

  $("#custom-datepicker").datepicker({
    language: 'ja',
    dateFormat: 'yy年mm月dd日(D)',
    minDate: new Date(JSON.parse("<?php echo $ads_s[0]; ?>")),
    maxDate: new Date(JSON.parse("<?php echo $ads_e[0]; ?>"))
  });
});

single.php内では、「echo $ads_s」 で、["2022, 08, 01"]のような形で配列が出力できていることを確認しています。
しかし、jsファイルにJSONを用いたphpの配列が出力されません。

console.logで確認したところ、下記のようなエラーが出ております。

Uncaught SyntaxError: Unexpected token '<', "<?php echo"... is not valid JSON

検証モードでjsを確認したところ、
理想は下記のようになっていてほしいのですが、

let $ads_s = ["2022, 08, 01"];

このようになってしまいます。

  let $ads_s = JSON.parse('<?php echo $ads_s; ?>');

どのようにすれば、エラーが解消できるかお力添えいただきたいです。

最終的に下記のコードで解決しました！

忘備録として記載します。
▼footer.php

<?php
	//カスタムフィールドで開始日と終了日を取得
	$jsonString = json_encode($dataArray, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
	$date_start = date_format(date_create(get_field('イベント開始日')), 'Y/m/d');
	$date_end = date_format(date_create(get_field('イベント終了日')), 'Y/m/d');
	if(get_field('イベント終了日')){
		$ads_s = json_encode($date_start);
		$ads_e = json_encode($date_end);
	}else{
		$ads_s = json_encode($date_start);
		$ads_e = json_encode($date_start);
	}

	// スマートカスタムフィールドで除外日をデイトピッカーを使って記載したものを、新しい配列に格納する
	$get_group = SCF::get('deleteDayArray');
	$get_delete_day = [];
	$i = 0;
	foreach ($get_group as $fields) {
		$event_time = esc_html($fields['deleteDay']);
		$get_delete_day[$i] = date_format(date_create($event_time), 'Y/m/d');
		$i++;
	}

	$today = date("Y/m/d");
	//除外日の入力がないとき、今日の日付が自動的に入力されていたため本日の日付で分岐
	if($get_delete_day[0] !== $today){
		$get_delete_day_array = json_encode($get_delete_day);
	}else{
		//昨日以前の日付は選択に含めないため、除外日の入力がないときは昨日の日付を入れる
		$get_delete_day_array[0] = date("Y/m/d",strtotime("yesterday"));
		$get_delete_day_array = json_encode($get_delete_day);
	}
?>
<?php if (is_singular("event")): ?>
	<script>
		$(function (){
			var disableDates = JSON.parse('<?php echo $get_delete_day_array; ?>');
			// ContactForm7のデイトピッカーにカスタムフィールドで設定した最大・最小日を設ける
			$("#custom-datepicker").datepicker({
				language: 'ja',
				dateFormat: 'yy年mm月dd日(D)',
				beforeShowDay : function(date) {
					var disableDate = $.datepicker.formatDate('yy/mm/dd', date);
					if (disableDates.indexOf(disableDate) !== -1) {
						return [false, ''];
					}else{
						return [true, ''];
					}
				},
				minDate: new Date(JSON.parse('<?php echo $ads_s; ?>')),
				maxDate: new Date(JSON.parse('<?php echo $ads_e; ?>')),
			});			
		});
	</script>
<?php endif; ?>

Answer 1

PHPタグが使えるのは(設定しなければ)拡張子が.phpのファイルだけで通常は.jsが拡張子のJavaScriptファイルに書いても反映されません。
.js拡張子でもPHPが実行されるように設定を変える(非推奨)か、そのJavaScriptファイルの拡張子を.phpにするか、
その部分だけPHP(HTML)のscriptタグに直接JavaScriptコードを書くかどれかですかね。

とりあえずこんな感じのテストコードを動かしてみましたが、動きました。
提示の範囲ではなぜコメントのようになるのかちょっとわからないです。

<?php
//デイトピッカーに日付選択範囲を追加する
/*
$jsonString = json_encode($dataArray, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
$date_start = [date_format(date_create(get_field('イベント開始日')), 'Y,m,d')];
$date_end = [date_format(date_create(get_field('イベント終了日')), 'Y,m,d')];
*/
$date_start = [date_format(date_create('2017-04-01'), 'Y,m,d')];
$date_end = [date_format(date_create('2018-03-31'), 'Y,m,d')];

if ($date_end) {
    $ads_s = json_encode($date_start);
    $ads_e = json_encode($date_end);
} else {
    $ads_s = json_encode($date_start);
    $ads_e = json_encode($date_end);
}
?>
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
</head>

<body>
    <div>
<?php
        echo($ads_s.'から'.$ads_e.'の間で選べます');
?>
    </div>
    <input type="text" id="custom-datepicker">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(function () {
            let $ads_s = JSON.parse('<?php echo $ads_s; ?>');
            let $ads_e = JSON.parse('<?php echo $ads_e; ?>');
            console.log($ads_s);
            console.log($ads_e);

            let test = JSON.parse('<?php echo $ads_s; ?>');
            console.log(test);
            console.log(test[0]);

            $("#custom-datepicker").datepicker({
                language: 'ja',
                dateFormat: 'yy年mm月dd日(D)',
                minDate: new Date((JSON.parse('<?php echo $ads_s; ?>'))[0]),
                maxDate: new Date((JSON.parse('<?php echo $ads_e; ?>'))[0])
            });
        });
    </script>
</body>

</html>

Comments

[nao_tyrol]

ありがとうございます！試してみます！

[nao_tyrol]

ご回答ありがとうございました！アドバイスをいただいた通り
PHPのscriptタグに直接JavaScriptコードを書いてみました。

すると、また別のエラーが出てしまいました。
Uncaught SyntaxError: Unexpected end of JSON input

検証ツールで該当のjs部分を確認すると、下記のようにphpの部分が全て消えてしまっています。
let $ads_s = JSON.parse("");
let $ads_e = JSON.parse("");

PHP内でechoをしてみると、データ自体は格納されているようです。

何か表記がおかしいでしょうか…？

[nao_tyrol]

わざわざテストコードでも試していただきありがとうございました…！
RiaFeed様の検証モードではjs内のPHPは表示されているのですね…。
何がおかしいのかもう少し試行錯誤してみます。

[nao_tyrol]

色々と試して、エラーが解消されました！

single.phpに記述していたコードを
footer.phpに記載したscript.jsの直前に記載すると動きました！