ライブラリであるjQuery UIの組み込みはAccordionの組み込みのページを参照。
さらにDatepickerを日本語で扱いたいので、jquery.ui.datepicker-ja.jsを新たに追加して、このモジュールを参照するようにした。
Datepickerを使うためのソースコードは次のとおり
<?php if(isSet($_POST["inputflg"]) && $_POST["inputflg"] == 'inputon') : ?>
<h2>送信されてきた日付</h2>
<?php if(isSet($_POST["dayfrom"])) : ?>
<p>●from日付は <?= $_POST["dayfrom"] ?> です</p>
<?php else : ?>
<p>from日付は空です</p>
<?php endif; ?>
<?php if(isSet($_POST["dayto"])) : ?>
<p>●to日付は <?= $_POST["dayto"] ?> です</p>
<?php else : ?>
<p>to日付は空です</p>
<?php endif; ?>
<?php endif; ?>
<!-- Datepickerを構成する要素(input) -->
<div>
<form action="" method="POST">
<label for="form">期間</label>
<input id="form" name="dayfrom" type="text">
<label for="to">~</label>
<input id="to" name="dayto" type="text">
<input type="hidden" name="inputflg" value="inputon">
<input type="submit" value="送信">
</form>
</div>
<script type="text/javascript">
// HTML文書の読み込みが完了してから実行
jQuery(function(){
// Datepickerウィジェットの生成
jQuery('#form').datepicker(jQuery.datepicker.regional['ja']); // 日本語の設定(1)
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['ja']); // 日本語の設定(2)
jQuery('#to').datepicker();
});
</script>