jquery.datepickerで２つのカレンダーの設定

Question

前提・実現したいこと

jquery.datepickerのカレンダーを使って
「希望入居日」と「希望退去日」の日付を入力してもらうフォームを作成しています。
「希望退去日」の選択可能最小日を「希望入居日」の選択から30日後からしか選択できない様にしたいのですがうまくいきません。

追記：
Wordpressのプラグイン「MW WP Form 」を使っています。

大変お手数ではございますがご教授ください。

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

エラーメッセージ

該当のソースコード

html
<table class="container">
<tbody>
<tr class="calendar-area">
<th><label for="datepicker1" class="is-required">希望入居日<span class="color03">※</span></label></th>
<td class="datepicker-area">
<div class="start">[mwform_datepicker name="start" id="start" class="start" size="30"]</div>
</td>
</tr>
<tr class="calendar-area">
<th><label for="datepicker1" class="is-required">希望退去日<span class="color03">※</span></label></th>
<td class="datepicker-area">
<div class="end">[mwform_datepicker name="end" id="end" class="end" size="30"]</div>
</td>
</tr>
</tbody>
</table>


ブラウザ上html

<div id="mw_wp_form_mw-wp-form-150" class="mw_wp_form mw_wp_form_input  ">
<form method="post" action="" enctype="multipart/form-data">
<table class="container">
<tbody>
<tr class="calendar-area">
<th><label for="datepicker1" class="is-required">希望入居日<span class="color03">※</span></label></th>
<td class="datepicker-area">
<div class="start"><input type="text" name="start" id="start" class="start" size="30" value="" />
<script type="text/javascript">
jQuery(function($) {
	$("input[name='start']").datepicker({
		"yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"showMonthAfterYear":"true","changeYear":"true","changeMonth":"true"	});
});
</script>
</div>
</td>
</tr>
<tr class="calendar-area">
<th><label for="datepicker1" class="is-required">希望退去日<span class="color03">※</span></label></th>
<td class="datepicker-area">
<div class="end"><input type="text" name="end" id="end" class="end" size="30" value="" />
<script type="text/javascript">
jQuery(function($) {
	$("input[name='end']").datepicker({
		"yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"showMonthAfterYear":"true","changeYear":"true","changeMonth":"true"	});
});
</script>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<!-- end .mw_wp_form --></div>


<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
	var format = 'yy年mm月dd日';
	var start = $("[name=start]").datepicker({
			minDate: '0y',
			showMonthAfterYear:'true',
			dateFormat: 'yy年mm月dd日',
	}).on("change", function () {
		 end.datepicker("option", "minDate", getDate(this));
	});

	var end = $("[name=end]").datepicker({
			minDate: '+1m',
			showMonthAfterYear:'true',
			dateFormat: 'yy年mm月dd日',
	}).on("change", function () {
		 start.datepicker("option", "maxDate", getDate(this));
	});

	function getDate(element) {
		 var date;
		 try {
				 date = $.datepicker.parseDate(format, element.value);
		 } catch (error) {
				 date = null;
		 }
		 return date;
	}
</script>

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

HTMLもご提示ください。

[shinsaku]

失礼いたしました。
htmlコードも追記いたしました。

[m.ts10806]

純粋なHTMLじゃないんですね。
利用しているフレームワークのタグを追加するか、ブラウザに出力されたHTMLを提示してください。

[shinsaku]

何度もすみません。
ブラウザに出力されたHTML追記しました。

Answer 1

希望入居日(start)の内容に変更があった時に、希望退去日(end)の方でminDateを
再設定するようにされているようですが、getDate(this)を渡してしまうと、
希望入居日側で選択された日付がそのまま設定されてしまいます。
(希望入居日を2020年4月16日で選択すると、希望退去日も2020年4月16日からしか選択できなくなる)

var start = $("[name=start]").datepicker({
            minDate: '0y',
            showMonthAfterYear:'true',
            dateFormat: 'yy年mm月dd日',
    }).on("change", function () {
         end.datepicker("option", "minDate", getDate(this));
    });

記載されている仕様を実現するには、
ここでgetDate(this)に1ヶ月分を加算した日付を渡してあげる必要があるかと思います。