disable dates using jquery inside gridview control - asp.net

Question

I have a gridview which contains a textbox control. I need to show the calendar for the user to pick the date and certain dates are to be disabled using jquery. I found a post on stackoverflow that talked about how to disable certain dates. I am done with that part, except not sure how to pass the textbox control to this jquery function. Here is the code.
<script type="text/javascript" language="javascript">
function pageLoad(sender, args) {
var enabledDays = ['09/21/2011', '10/05/2011', '10/19/2011', '11/02/2011', '11/16/2011'];
/* utility functions */
function editDays(date) {
for (var i = 0; i < enabledDays.length; i++) {
if (new Date(enabledDays[i]).toString() == date.toString()) {
return [true];
}
}
return [false];
}
/* create datepicker */
$(document).ready(function() {
$('#<%= txtInHomeDate.ClientID %>').datepicker({
beforeShow: springDate,
beforeShowDay: editDays,
dateFormat: 'mm/dd/yy',
buttonImage: 'images/cal.gif',
buttonText: 'Choose date',
firstDay: 1,
buttonImageOnly: true,
showOn: 'both',
showAnim: 'fadeIn',
onSelect: function() { $(this).trigger("onchange", null); }
});
function springDate() {
var defaultMin = new Date();
var defaultMax = new Date();
var Min = defaultMin;
var Max = defaultMax;
// make valid date from hiddenfied value format is MM/dd/yyyy
dateMin = $('#<%= hfStDate.ClientID %>').val();
dateMin = new Date(dateMin);
dateMax = $('#<%= hfEndDate.ClientID %>').val();
dateMax = new Date(dateMax);
if (dateMin && dateMax) {
Min = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate());
Max = new Date(dateMax.getFullYear(), dateMax.getMonth(), dateMax.getDate());
}
return {
minDate: Min,
maxDate: Max
};
}
});
}
<....
<asp:TemplateField HeaderText="In-Home Date">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="hfStDate" runat="server" Value="09/01/2011" />
<asp:HiddenField ID="hfEndDate" runat="server" Value="11/30/2011" />
<asp:TextBox ID="txtInHomeDate" runat="server" />
</ItemTemplate>
</asp:TemplateField>
Currently, it errors out since the jquery function won't find the txtInHomeDate. Could I get some help as I am pretty close to get this done? Thanks!!

Answer 1

Use class instead of ID:
<asp:TextBox ID="txtInHomeDate" runat="server" CssClass='textDate' />
Your JS code would looks like the following:
$('.textDate').datepicker({ ...
This will loop through all the textboxes with the given class and apply datepicker to them.

Answer 2

jQuery can't find your text box because each row in the Grid View contains a TextBox with a different ID. If your TextBox is always in the same column, I'd suggest using the eq selector to get all the TextBoxes at once, like:
$("tr :eq(3)").each(function() {
$(this).datepicker({
// setup here
});
});
Edit: Artem's selector is definitely more optimal than mine -- the class selector is much faster. If you need to get the hidden fields, you could use his selector above, like so:
$(".textDate").each(function() {
var $startDate = $(this).prevAll("[id$='hfStDate']");
var $endDate = $(this).prevAll("[id$='hfEndDate']");
// Datepicker setup goes here.
}
Edit 2: prev is incorrect -- it should've been prevAll. This feels very hack-y to me, and I'm sure there's a better way to accomplish this task, but regardless... Here's a link to a working jsfiddle example of this, without the datepicker.