отключить даты, используя jquery внутри gridview элемента управления

Question

У меня есть gridview, который содержит текстовое поле управления. Мне нужно показать календарь для пользователя, чтобы выбрать дату, и некоторые даты должны быть отключены с помощью jquery. Я нашел пост в stackoverflow, в котором говорилось о том, как отключить определенные даты. Я закончил с этой частью, за исключением того, что не уверен, как передать элемент управления textbox этой функции 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
            };
        }
    });
}

<.... </p>

<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

jQuery не может найти ваше текстовое поле, потому что каждая строка в представлении сетки содержит TextBox с различным идентификатором. Если ваш TextBox всегда находится в одном и том же столбце, я бы предложил использовать селектор eq, чтобы получить все TextBoxes одновременно, например:

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

Редактировать: Селектор Артема определенно более оптимален, чем мой - селектор классов намного быстрее. Если вам нужно получить скрытые поля, вы можете использовать его селектор выше, например так:

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

Редактировать 2: prev неверно - это должно было быть prevAll. Мне это кажется хакерским, и я уверен, что есть лучший способ выполнить эту задачу, но независимо ... Вот ссылка на рабочий пример jsfiddle этого, без выбора даты. 1015 *

Answer 2

Использовать класс вместо ID:

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

Ваш код JS будет выглядеть следующим образом:

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

Это перебирает все текстовые поля с данным классом и применяет к ним указатель даты.