Search jQuery

jQuery Forum

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

in Using jQuery UI • 3 years ago

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.

<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Datepicker - Display month & year menus</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$("#SearchFromdateTextBox").datepicker({
changeMonth: true,
changeYear: true
});
});
$(function() {
$("#SearchToDateTextBox").datepicker({
changeMonth: true,
changeYear: true
});
});
function isDateCheck(txta) {
var dateString = document.getElementById(txta).value;
// First check for the pattern
if (!/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString))
return false;
// Parse the date parts to integers
var parts = dateString.split("/");
var day = parseInt(parts[1], 10);
var month = parseInt(parts[0], 10);
var year = parseInt(parts[2], 10);
// Check the ranges of month and year
if (year < 1000 || year > 3000 || month == 0 || month > 12)
return false;
var monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Adjust for leap years
if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
monthLength[1] = 29;
// Check the range of the day
return day > 0 && day <= monthLength[month - 1];
}
function checkdatepicker(){
if (!isDateCheck("SearchFromdateTextBox")) {
document.getElementById("SearchFromdateTextBox").style.backgroundColor = "yellow";
document.getElementById("SearchFromdateTextBox").focus();
return false;
} else {
document.getElementById("SearchFromdateTextBox").style.backgroundColor = "white";
return true;
}
}
function checkdatepicker1() {
if (!isDateCheck("SearchToDateTextBox")) {
document.getElementById("SearchToDateTextBox").style.backgroundColor = "yellow";
document.getElementById("SearchToDateTextBox").focus();
return false;
} else {
document.getElementById("SearchToDateTextBox").style.backgroundColor = "white";
return true;
}
}
function compareDate() {
var start = document.getElementById("SearchFromdateTextBox").value;
var end = document.getElementById("SearchToDateTextBox").value;
var curdate = new Date();
var stDate = new Date(start);
var enDate = new Date(end);
var compDate = enDate - stDate;
if (compDate >= 0 && enDate <= curdate) {
return true;
} else {
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'.");
//document.getElementById("datepicker1").value = "";
document.getElementById("datepicker1").focus();
return false;
}
}
</script>
</head>
<body>
<form runat="server">
<table runat="server" id="JQDateTable" visible="true">
<tr><td colspan="4"><h1 align="center">Transactions by date</h1></td></tr>
<tr class="maxWidth">
<td>
<asp:Label runat="server" ID="SearchFromdateLabel" Text="From date :" CssClass="labelClass"></asp:Label>
</td>
<td>
<asp:TextBox ID="SearchFromdateTextBox" runat="server" CssClass="Report-text-box"></asp:TextBox>
</td>
<td>
<asp:Label runat="server" ID="SearchToDateLabel" Text="To date :" CssClass="labelClass"></asp:Label>
</td>
<td>
<asp:TextBox ID="SearchToDateTextBox" runat="server" onfocus="checkdatepicker()" CssClass="Report-text-box"></asp:TextBox>
</td>
<td>
<asp:Button ID="SearchButton" runat="server" CssClass="btn-Report" Text="Search" onfocus="checkdatepicker1()" />
</td>
<td>
<asp:Button ID="CancelButton" runat="server" CssClass="btn-Report" Text="Cancel" />
</td>
</tr>
<%-- <tr class="maxWidth">
<td>
From date: <input type="text" id="datepicker" />
</td>
<td>
To date: <input type="text" id="datepicker1" onfocus="checkdatepicker()"/>
</td>
<td>
<input type="button" id="SearchButton" class="btn-Report" value="Search" onfocus="checkdatepicker1()" onclick="compareDate()" />
</td>
<td>
<input type="button" id="CancelButton" class="btn-Report" value="Cancel" onclick="compareDate()" />
</td>
</tr>OnClick="SearchButton_Click()" onclick="return compareDate();"OnClick="CancelButton_Click()"
</table>
</form>
</body>
</html>
Bob

Replies(4)

kbwood.au

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

3 years ago

ASP mangles IDs, so you can't use them directly in the JavaScript code. Either insert the ID generated by ASP or look for the given ID at the end of the actual ID. Something like this, I think:

$(function() {
$('input[id$="SearchFromdateTextBox"],input[id$="SearchToDateTextBox"]').datepicker({
changeMonth: true,
changeYear: true
});
});

bob1

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

3 years ago

Thank you. I have the calendars showing up now when I enter the fields intended for date entry. Much to learn since they handed me this project to finish.

Your answer gives me an alternative to what I found on another posting:

$(document).ready(function() {
$('#<%= SearchFromdateTextBox.ClientID %>').datepicker({
changeMonth: true,
changeYear: true
});

bob

kbwood.au

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

3 years ago

That's the code for the first option I mentioned: "insert the ID generated by ASP".

bob1

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

3 years ago

to kbwood.au. Re-reading your post, it was definitely the first I read to identify the answer. I'm very new to JQuery UI and also learned about the ability to apply the datepicker to more than one field. I've marked it as the best answer. Thanks again.

Top Reply

Response title

Attachments

jQuery Forum

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

Replies(4)

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

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

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

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

Statistics

Tags

Actions

Related Posts