Question

我有一个包含文本框控件的gridview。我需要显示用户选择日期的日历，并使用jquery禁用某些日期。我在stackoverflow上发现了一篇关于如何禁用某些日期的帖子。我已完成该部分，除了不确定如何将文本框控件传递给此jquery函数。这是代码。

<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
            };
        }
    });
}

＆LT; ....

<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>

目前，由于jquery函数找不到txtInHomeDate，因此出错。我可以得到一些帮助，因为我非常接近完成这项工作吗？谢谢！

Answer 1

使用class而不是ID：

<asp:TextBox ID="txtInHomeDate" runat="server" CssClass='textDate' />

您的JS代码如下所示：

$('.textDate').datepicker({ ...

这将循环遍历给定类的所有文本框，并将datepicker应用于它们。

Answer 2

jQuery无法找到您的文本框，因为网格视图中的每一行都包含一个具有不同ID的TextBox。如果你的TextBox总是在同一列，我建议使用eq选择器一次获取所有TextBox，如：

$("tr :eq(3)").each(function() {
    $(this).datepicker({
        // setup here
    });
});

编辑：Artem的选择器绝对比我的选择器更优秀 - 类选择器更快。如果您需要获取隐藏字段，可以使用上面的选择器，如下所示：

$(".textDate").each(function() {
    var $startDate = $(this).prevAll("[id$='hfStDate']");
    var $endDate = $(this).prevAll("[id$='hfEndDate']");
    // Datepicker setup goes here.
}

修改2： prev不正确 - 应该是prevAll。这对我来说非常糟糕，而且我确信有更好的方法可以完成这项任务，但无论如何......这里有一个working jsfiddle example的链接，没有日期选择器。

在gridview控件中使用jquery禁用日期

2 个答案: