Databases
StackOverflow2013
Postsdbo
POdate validation in javascript using .js files
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdate validation in javascript using .js files
    text
    copied!<p>I am having a ini.jsp page for creating a form for adding two text fields to input date and then using javascript in the ini.jsp page itself to validate those dates. I now have some library files(calendar.js, calendar-en.js, calendar-setup.js, calendar_1.png, calendar_system.css). Now my question is how to I link these files to javascript (I am using ECLIPSE IDE) so that it displays calendar beside the textboxes for date in the format dd/mm/yyyy. . . </p> <p>I have gone through lots of stuff, tried doing those but really couldn't get the expected output. Below is the code that i have implemented so far </p> <pre><code> &lt;html lang="en"&gt; &lt;head&gt; &lt;style type="text/css" src="../datePickers/calendar-system.css"&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;script language="Javascript" src="../Scripts/calendar.js"&gt;&lt;/script&gt; &lt;h1&gt;Report Generation&lt;/h1&gt; &lt;div style="margin: 0 auto; width: 100%; text-align: left"&gt; &lt;form name="date" action="&lt;c:url value="cli.htm"/&gt;" method="post" onSubmit="return ValidateForm()"&gt; &lt;fieldset&gt; &lt;legend&gt;Please enter Start Date and End Date&lt;/legend&gt; &lt;div style="text-align: center; margin: 150px auto 100px auto;"&gt; &lt;label for="dateFrom"&gt;Start Date:&lt;/label&gt; &lt;font color="#CC0000"&gt;&lt;b&gt;(dd/mm /yyyy)&lt;/b&gt;&lt;/font&gt; &lt;input type="text" name="dateFrom" maxlength="25" size="25" id="dateFrom" /&gt; &lt;img src = "../Images/calendar_1.png" onclick="javascript:Calendar.setup(inputField,ifFormat,button) style="cursor: pointer" /&gt; &lt;/div&gt; &lt;div style="text-align: center; margin: 150px auto 100px auto;"&gt; &lt;label for="dateTo"&gt;End Date:&lt;/label&gt; &lt;font color="#CC0000"&gt;&lt;b&gt;(dd/mm/yyyy)&lt;/b&gt;&lt;/font&gt; &lt;input type="text" name="dateTo" maxlength="25" size="25" id="dateTo" /&gt; &lt;/div&gt; &lt;div&gt; &lt;input type="submit" value="Generate Report" align="center" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;script language="Javascript" &gt; var dtCh= "/"; var minYear=1900; var maxYear=2500; function isInteger(s){ var i; for (i = 0; i &lt; s.length; i++){ // Checking that the current character is number. var c = s.charAt(i); if (((c &lt; "0") || (c &gt; "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 &lt; s.length; i++){ var c = s.charAt(i); if (bag.indexOf(c) == -1) returnString += c; } return returnString; } function daysInFebruary (year){ return (((year % 4 == 0) &amp;&amp; ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 ); } function DaysArray(n) { for (var i = 1; i &lt;= 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" &amp;&amp; strDay.length&gt;1) strDay=strDay.substring(1) if (strMonth.charAt(0)=="0" &amp;&amp; strMonth.length&gt;1) strMonth=strMonth.substring(1) for (var i = 1; i &lt;= 3; i++) { if (strYr.charAt(0)=="0" &amp;&amp; strYr.length&gt;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&lt;1 || month&lt;1 || month&gt;12){ alert("Please enter a valid month"); return false; } if (strDay.length&lt;1 || day&lt;1 || day&gt;31 || (month==2 &amp;&amp; day&gt;daysInFebruary(year)) || day &gt; daysInMonth[month]){ alert("Please enter a valid day"); return false; } if (strYear.length != 4 || year==0 || year&lt;minYear || year&gt;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 } } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I want changes in code to be done as:</p> <p>The code should initialises the calendar object and links an image to a text field (using their IDs) to respond to a click.</p> <p>Calendar.setup( { inputField : "dateFrom", // ID of the input field ifFormat : "%d/%m/%Y", // the date format button : "imgCal" // ID of the calendar image } );</p> <p>should I really need to create a calendar object if so, can I know where. Also, where should I place the Calendar.setup code in my jsp page?</p> <p>Can someone please help me sort out this issue...</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload