0
두 개의 텍스트 필드를 입력하여 날짜를 입력 한 다음 ini.jsp 페이지에서 javascript를 사용하여 해당 날짜의 유효성을 검사하는 양식을 만들기위한 ini.jsp 페이지가 있습니다. 이제 일부 라이브러리 파일 (calendar.js, calendar-en.js, calendar-setup.js, calendar_1.png, calendar_system.css)이 있습니다. 이제 내 질문에 어떻게 dcl/mm/yyyy 형식으로 날짜에 대한 텍스트 상자 옆에 일정을 표시 할 수 있도록이 파일을 자바 스크립트 (나는 이클립스 IDE 사용하고 있습니다) 연결하는 것입니다. . ..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 ( { inputField "dateFrom"입력 필드 // ID ifFormat "가 % d/%의 m/% Y"// 날짜 형태 버튼 "imgCal"//달력 이미지의 ID } );
정말 캘린더 개체를 만들어야 하나? 또한 JSP 페이지에서 Calendar.setup 코드를 어디에 배치해야합니까? 이 페이지에보고 봤어 :
사람은 가
귀중한 의견을 보내 주셔서 감사합니다. ur 링크를 통과했지만 할 수 없어, 내가 뭘해야하는지 정확히 알지 못해. 코드 또는 변경 사항에 오류가있는 경우 plz에서 알아낼 수 있습니다 ... calendar.setup.js 파일은 라이브러리 파일입니다. 이를 위해 객체를 만들어야합니까? 나는 단지 params가 언급되어야한다고 가정한다. 내가 이것을 할 수있는 방법으로 더 설명 할 수 있겠는가? – sonu
히야, 도와 줘서 기뻐, 우리가 거기에 올거야. 이걸 올바르게 이해하면 캘린더가이 텍스트 상자 옆에 나타나길 바랄거야?캘린더 나 이미지에 대한 CSS를 해당 텍스트 상자 옆의 숨겨진 HTML 태그로 사용할 수 있으며 유효한 날짜 [이 경우 isDate]에 대한 체크가 실행되면 해당 체크를 기반으로 캘린더를 표시 할 수 있습니다. ** .show 또는 .hide 귀하의 날짜 검증을 기반으로? 희망이 도움이됩니다. –
어떻게 작동하는지 보여줄 수있는 예제 또는 코드를 제공 할 수 있습니까? 감사합니다. – sonu