Javascript datepicker（）不叫

Question

我的文本框不會像日期選擇器一樣出現。

<div id="dateContainer" class="container"> 
     <asp:TextBox ID="datepicker" runat="server" CssClass="form-control"></asp:TextBox> 

     <script type="text/javascript"> 
      $(function() { 
       $('#datepicker').datepicker(); 
      }); 
     </script> 
    </div> 

這是與輸入標籤woking，但我不能調用代碼隱藏的輸入元素。任何人都知道這是爲什麼發生？我在代碼隱藏中使用VB.NET。

工作代碼：

<div id="dateContainer" class="container"> 
<input type="text" id="datepicker"> 
    <script type="text/javascript"> 
     $(function() { 
      $("#datepicker").datepicker(); 
     }); 
    </script> 
</div> 

Answer 1

.datepicker()被調用。它只是不被任何東西所調用，並且默默地失敗。

問題是ID。默認情況下，服務器上的ID在所有情況下都不匹配客戶端上的ID（特別是在涉及主頁面或用戶控件或其他模板化控件時要特別注意）。

有很多解決方案。

使用靜態ID生成。

<div id="dateContainer" class="container"> 
     <asp:TextBox ClientIdMode="static" ID="datepicker" runat="server" CssClass="form-control"></asp:TextBox> 

     <script type="text/javascript"> 
      $(function() { 
       $('#datepicker').datepicker(); 
      }); 
     </script> 
    </div> 

或者將ID嵌入到JavaScript中。

<div id="dateContainer" class="container"> 
     <asp:TextBox ID="datepicker" runat="server" CssClass="form-control"></asp:TextBox> 

     <script type="text/javascript"> 
      $(function() { 
       $('<%= datepicker.ClientID%>').datepicker(); 
      }); 
     </script> 
    </div> 

或者使用一個類（這是偉大的，如果你有需要可以啓用日期選擇器多個字段）：

<div id="dateContainer" class="container"> 
     <asp:TextBox ID="datepicker" runat="server" CssClass="form-control datepicker"></asp:TextBox> 

     <script type="text/javascript"> 
      $(function() { 
       $('.datepicker').datepicker(); 
      }); 
     </script> 
    </div> 

或頁面或application levels改變的ClientIDMode。

如果您想使用input而不是asp:TextBox，您需要添加runat="server"，以便在服務器端可以找到它，並且仍然需要處理ID問題。