gridview 컨트롤 내에서 jquery를 사용하여 날짜 사용 안 함

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

....

<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를 찾을 수 없습니다. 이 일을 끝내기에 가까운 도움을받을 수 있을까요? 감사!! 대신 ID의

Answer 1

사용 클래스 :

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

귀하의 JS 코드는 다음과 같습니다 것 :

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

이 반복됩니다 지정된 클래스와 모든 텍스트 상자 통해 그들에게 날짜 선택기를 적용 할 수 있습니다.

Answer 2

격자보기의 각 행에 다른 ID가있는 텍스트 상자가 있기 때문에 jQuery에서 텍스트 상자를 찾을 수 없습니다. 당신의 텍스트 상자가 같은 열에 항상, 내가 같이 한 번에 모든 텍스트 상자를 얻을 수있는 EQ 선택기를 사용하는 것이 좋습니다 것 :

$("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을 봤는데해야한다. 이것은 나에게 매우 해킹을 느낀다. 그리고 나는이 작업을 수행하는 더 좋은 방법이 있다고 생각하지만, 관계 없다 ... 여기에 working jsfiddle example에 대한 링크가 datepicker없이있다.