0
2つのテキストフィールドを入力してini.jspページでjavascriptを使用してこれらの日付を検証するフォームを作成するためのini.jspページがあります。ライブラリファイル（calendar.js、calendar-en.js、calendar-setup.js、calendar_1.png、calendar_system.css）があります。 私の質問は、これらのファイルをJavaScript（ECLIPSE IDEを使用しています）にリンクして、dd/mm/yyyyの形式の日付のテキストボックスの横にカレンダーを表示する方法です。 。 。.jsファイルを使用したjavascriptの日付検証
私はたくさんのものを使い果たしましたが、それらをやってみましたが、本当に期待される出力を得ることができませんでした。コードは、カレンダーオブジェクトを初期化し、テキストフィールドに画像をリンクしなければならない
彼らを使用して（：以下のように は、私がコードの変更を行うことがしたい、これまで
<html lang="en">
<head>
<style type="text/css" src="../datePickers/calendar-system.css">
</style>
</head>
<body>
<script language="Javascript" src="../Scripts/calendar.js"></script>
<h1>Report Generation</h1>
<div style="margin: 0 auto; width: 100%; text-align: left">
<form name="date" action="<c:url value="cli.htm"/>"
method="post" onSubmit="return ValidateForm()">
<fieldset>
<legend>Please enter Start Date and End Date</legend>
<div style="text-align: center; margin: 150px auto 100px auto;">
<label for="dateFrom">Start Date:</label>
<font color="#CC0000"><b>(dd/mm /yyyy)</b></font>
<input type="text" name="dateFrom" maxlength="25" size="25"
id="dateFrom" />
<img src = "../Images/calendar_1.png" onclick="javascript:Calendar.setup(inputField,ifFormat,button) style="cursor: pointer" />
</div>
<div style="text-align: center; margin: 150px auto 100px auto;">
<label for="dateTo">End Date:</label>
<font color="#CC0000"><b>(dd/mm/yyyy)</b></font>
<input type="text" name="dateTo" maxlength="25" size="25"
id="dateTo" />
</div>
<div>
<input type="submit" value="Generate Report" align="center" />
</div>
</form>
</div>
<script language="Javascript" >
var dtCh= "/";
var minYear=1900;
var maxYear=2500;
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Checking that the current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9")))
return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag){
var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
function daysInFebruary (year){
return (((year % 4 == 0) && ((!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28);
}
function DaysArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 31
if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
if (i==2) {this[i] = 29}
}
return this
}
function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strDay=dtStr.substring(0,pos1)
var strMonth=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr = strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("The date format should be : dd/mm/yyyy");
return false;
}
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month");
return false;
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day");
return false;
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear);
return false;
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))== false){
alert("Please enter a valid date");
return false;
}
return true;
}
function ValidateForm(){
var dt1=document.date.dateFrom
var dt2=document.date.dateTo
if (!isDate(dt1.value)){
dt1.value='';
dt1.focus();
return false;
}
if(!isDate(dt2.value)){
dt2.value='';
dt2.focus();
return false;
}
return true
}
}
</script>
</body>
</html>
を実装しているコードですID）を使用してクリックに反応します。
Calendar.setup（ {入力フィールド： "dateFrom"、//入力フィールド ifFormatのID： "％のD /％のM /％Y"、//日付フォーマット ボタン： "imgCal"//カレンダー画像のID } ）;
私は実際にカレンダーオブジェクトを作成する必要があるかどうかは、どこで知ることができますか？また、jspページにCalendar.setupコードを配置する場所はどこですか？
誰かが...この問題整理
貴重なコメントをありがとう。私はあなたのリンクを通過したが、私は何をすべきか正確にアイデアを得ることはできません。コードや変更にエラーがあるかどうかを調べることができます... calendar.setup.jsファイルはライブラリファイルです。そのためのオブジェクトを作成する必要がありますか？私はparamsだけが言及する必要があると仮定..私はこれを行う方法として、さらに説明を与えることができますか？ – sonu
日高、嬉しいことに私は助けてくれます、私たちはそこに行くでしょう：私はこれを正しく理解できれば、このテキストボックスの隣にカレンダーを表示したいのですか？カレンダーや画像のCSSをそのテキストボックスの横にある非表示のhtmlタグとして使用し、有効な日付[この場合はisDate]のチェックが呼び出されると、そのチェックに基づいてカレンダーを表示することができます。 **。あなたの日付の検証に基づいてショーか.hide？お役に立てれば。 –
これはどのように動作するかを示すサンプルまたはコードを提供できます...ありがとうございます！ – sonu