HTA + Javascript＿レストラン予約システム② 再のコメントで、Kawa.netxp [JavaScript] JKL.Calendar
を紹介しましたが、jQueryでも同様のカレンダーが
あるので、変更してみました。
（フェードインの機能を使う為、jQueryをリンクしたので）
コメントに追加しましたが、何故か化けるので、部分投稿しました。
↓★の部分が、修正または追加(★は不要)
************************************************************
<html>
<head>
<hta:application navigable="yes" scroll="auto">
</hta:application>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
// ★以下４行追加
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css">
<script language="JavaScript" type="text/javascript">
var mdb = "RESTRANT.mdb";
var yyb = ""; // 予約日
var tan = ""; // 担当者
/* ==================================================
予約日一覧の設定
===================================================== */
function List_disp() {
// (中略①)
/* ==================================================
一覧表への復帰
===================================================== */
function go_ListPage() {
window.resizeTo(775,425);
★$("#frm2").hide();
★$("#frm1").fadeIn("slow");
List_disp();
}
/* ==================================================
一覧表の再表示（予約日切替）
===================================================== */
function go_ReLoad() {
window.resizeTo(775,425);
yyb = document.getElementById('selYYB').options.value;
Tbl_disp();
}
/* ==================================================
更新画面の表示
===================================================== */
function go_RecPage(yyk) {
window.resizeTo(775,425);
★$("#frm1").hide();
★$("#frm2").fadeIn("slow");
var mySql = "SELECT format(予約日,'YYYY/MM/DD')"
// (中略②)
★/* ==================================================
★ カレンダー(jQuery UI:datepicker)
★===================================================== */
★$(function() {
★ $.datepicker.setDefaults( $.datepicker.regional[ "ja" ] );
★ $('.calendar').datepicker({ dateFormat: 'yy/mm/dd' });
★});
</script>
★<style>
★ .ui-datepicker { font-size: 80%; }
★</style>
</head>
// (中略③)
<div id="frm2" hidden>
<table border=0>
<tr>
<td align=left nowrap> <input type="button" value="一覧表示" id="一覧" onClick="go_ListPage()"></td>
<td align=left nowrap> <input type="button" value="登録する" id="登録" onClick="func_insRec()"></td>
<td align=left nowrap> <input type="button" value="更新する" id="更新" onClick="func_updRec()"></td></tr>
<tr>
<table border="1" bgcolor="#ffffff">
<tr align="center">
<td bgcolor="#ADD8E6">予約番号<font size="1" color="#FF3366"><b>※</b></font></td><td>
<input type="text" name="yyk" style="font-family:HGゴシックM;text-align:center;font-weight:bold;background-color:#ADFF2F"></td>
<td bgcolor="#ADD8E6">予 約 日<font size="1" color="#FF3366"><b>※</b></font></td><td>
★ <input type="date" name="yyb" style="font-family:HGゴシックM;text-align:center" class="calendar"></div></td>
<td bgcolor="#ADD8E6">来店時刻<font size="1" color="#FF3366"><b>※</b></font></td><td>
<input type="date" name="rai" style="font-family:HGゴシックM;text-align:center"></td></tr>
// (後略)
