datepicker works in standalone aspx file but not when associated with a Master Page VS Studio 2010 C#

datepicker works in standalone aspx file but not when associated with a Master Page VS Studio 2010 C#

I'm working with code from a supplier who created the shell of a working website. I need to add a date range to one of the reports. 

The web site has a Master Page (ASP.NET)where it uses the form tag that begins and ends on the Master Page.

The page where I want to add two date fields is started and ended with <asp:Content></asp:Content>.  The fields for the two dates work on a separate aspx page where I can use the form tag and there is no <asp:Content> section. That exact code does not work between the <asp:Content> and </asp:Content> tags in the web site code.

Here is my separate calendar.aspx. This code does not work between <asp:Content> tags and a Master Page already have a form tag which causes VS 2010 c# to disallow the one in this code.

  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5.   <title>jQuery UI Datepicker - Display month &amp; year menus</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
  7.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  8.   <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="/resources/demos/style.css" />
  10.   <script>
  11. $(function() {
  12.     $("#SearchFromdateTextBox").datepicker({
  13.           changeMonth: true,
  14.           changeYear: true
  15.       });
  16. });

  18. $(function() {
  19.     $("#SearchToDateTextBox").datepicker({
  20.             changeMonth: true,
  21.           changeYear: true
  22.       });
  23. });

  25. function isDateCheck(txta) {
  26.     var dateString = document.getElementById(txta).value;
  27.     // First check for the pattern
  28.     if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString))
  29.         return false;

  31.     // Parse the date parts to integers
  32.     var parts = dateString.split("/");
  33.     var day = parseInt(parts[1], 10);
  34.     var month = parseInt(parts[0], 10);
  35.     var year = parseInt(parts[2], 10);

  37.     // Check the ranges of month and year
  38.     if (year < 1000 || year > 3000 || month == 0 || month > 12)
  39.         return false;

  41.     var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  43.     // Adjust for leap years
  44.     if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
  45.         monthLength[1] = 29;

  47.     // Check the range of the day
  48.     return day > 0 && day <= monthLength[month - 1];
  49. }
  50. function checkdatepicker(){
  51.     if (!isDateCheck("SearchFromdateTextBox")) {
  52.         document.getElementById("SearchFromdateTextBox").style.backgroundColor = "yellow";
  53.         document.getElementById("SearchFromdateTextBox").focus();
  54.         return false;
  55.     } else {
  56.         document.getElementById("SearchFromdateTextBox").style.backgroundColor = "white";
  57.         return true;
  58.     }
  59. }
  60. function checkdatepicker1() {
  61.     if (!isDateCheck("SearchToDateTextBox")) {
  62.         document.getElementById("SearchToDateTextBox").style.backgroundColor = "yellow";
  63.         document.getElementById("SearchToDateTextBox").focus();
  64.           return false;
  65.       } else {
  66.           document.getElementById("SearchToDateTextBox").style.backgroundColor = "white";
  67.           return true;
  68.       }
  69. }

  71. function compareDate() {
  72.     var start = document.getElementById("SearchFromdateTextBox").value;
  73.     var end = document.getElementById("SearchToDateTextBox").value;
  74.     var curdate = new Date();
  75.     var stDate = new Date(start);
  76.     var enDate = new Date(end);
  77.     var compDate = enDate - stDate;
  78.     if (compDate >= 0 && enDate <= curdate) {
  79.         return true;
  80.     } else {
  81.         alert("The 'To date' must be greater than or equal to the 'From date' and less than or equal to the system date. Please correct the 'To date'.");
  82.         //document.getElementById("datepicker1").value = "";
  83.         document.getElementById("datepicker1").focus();
  84.         return false;
  85.     }
  86. }


  89.   </script>
  90. </head>
  91. <body>

  93. <form runat="server">
  94. <table runat="server" id="JQDateTable" visible="true">
  95.  <tr><td colspan="4"><h1 align="center">Transactions by date</h1></td></tr>
  96.     <tr class="maxWidth">
  97.         <td>
  98.             <asp:Label runat="server" ID="SearchFromdateLabel" Text="From date :" CssClass="labelClass"></asp:Label>
  99.         </td>
  100.         <td>
  101.             <asp:TextBox ID="SearchFromdateTextBox" runat="server" CssClass="Report-text-box"></asp:TextBox>
  102.         </td>
  103.         <td>
  104.             <asp:Label runat="server" ID="SearchToDateLabel" Text="To date :" CssClass="labelClass"></asp:Label>
  105.         </td>
  106.         <td>
  107.             <asp:TextBox ID="SearchToDateTextBox" runat="server"  onfocus="checkdatepicker()" CssClass="Report-text-box"></asp:TextBox>
  108.         </td>
  109.         <td>
  110.             <asp:Button ID="SearchButton" runat="server" CssClass="btn-Report" Text="Search"  onfocus="checkdatepicker1()" />
  111.         </td>
  112.         <td>
  113.             <asp:Button ID="CancelButton" runat="server" CssClass="btn-Report" Text="Cancel" />
  114.         </td>
  115.     </tr>
  116. <%-- <tr class="maxWidth">
  117.     <td>
  118.         From date: <input type="text" id="datepicker" />       
  119.     </td>
  120.     <td>
  121.         To date: <input type="text" id="datepicker1" onfocus="checkdatepicker()"/>
  122.     </td>
  123.     <td>
  124.          <input type="button" id="SearchButton" class="btn-Report" value="Search" onfocus="checkdatepicker1()" onclick="compareDate()" />
  125.     </td>
  126.     <td>
  127.          <input type="button" id="CancelButton" class="btn-Report" value="Cancel" onclick="compareDate()" />
  128.     </td>
  129.  </tr>OnClick="SearchButton_Click()" onclick="return compareDate();"OnClick="CancelButton_Click()"

  131. </table>
  132. </form>

  134. </body>

  136. </html>

  138. Bob