如何在asp.net中的web控件中使用jquery Datepicker？

Question

我正在创建一个web控件，我想在这个控件上使用jquery date-picker，我试过下面的东西： 1）。在网络控制中应用所有必需的jQuery代码（，但它不适用于我。） 2）。适用于所有需要的jQuery代码在我打电话的是Web的控制页面（，但它不为我工作）

请帮助我，

其实什么是我的目的，做到这一点是： 我想创建一个通用的模块进行搜索，我只需要传递表名就可以自动工作，到目前为止我已经完成的工作是：

1）。绑定下拉列表中的所有列 现在我想要做的是：如果列类型是DateTime，那么它将显示带有jQuery日历的文本框。

请帮我解决这个问题，我的代码是：

<table> 
<tr> 
    <td> 
     <asp:DropDownList ID="drpColumnName" Width="150px" runat="server" AutoPostBack="true" 
      OnSelectedIndexChanged="drpColumnName_SelectedIndexChanged"> 
     </asp:DropDownList> 
    </td> 
    <td> 
     <asp:DropDownList ID="drpOperation" Width="150px" runat="server"> 
     </asp:DropDownList> 
    </td> 
    <td> 
     <asp:DropDownList ID="drpCondition" Width="150px" runat="server"> 
      <asp:ListItem Text="Or" Selected="True" Value="0"></asp:ListItem> 
      <asp:ListItem Text="And" Value="1"></asp:ListItem> 
     </asp:DropDownList> 
    </td> 
    <td> 
     <asp:TextBox ID="txtSearchText" runat="server" Width="150px"></asp:TextBox> 
     <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox> 
    </td> 
    <td> 
     <asp:Button ID="btnAddConditionToSearch" runat="server" Text="AddToSearch" OnClick="btnAddConditionToSearch_Click" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="5"> 
     &nbsp; 
    </td> 
</tr> 
</table> 

页面的代码是：

<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<div> 
    <Search:ctrlSearch ID="cntrlSearch" runat="server" /> 
</div> 
</form> 

jQuery代码是：

 <script type="text/javascript"> 
$(document).ready(function() { 


    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_initializeRequest(InitializeRequest); 
    prm.add_endRequest(EndRequest); 
    // Place here the first init of the DatePicker 

    $('.myclass').datepicker(); 


}); 

function InitializeRequest(sender, args) { } 
function EndRequest(sender, args) { 
    // after update occur on UpdatePanel re-init the DatePicker 

    $('.myclass').datepicker(); 


} 

请帮我，

Answer 1

找到一类selector.This您的日期选择器是不是试图找到你夹在你有两个更新面板的控制ids.In情况下更容易初始化日期选择器twice.Do这

<script type="text/javascript"> 
    $(document).ready(function() { 


     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_initializeRequest(InitializeRequest); 
     prm.add_endRequest(EndRequest); 
     // Place here the first init of the DatePicker 

     $('.myclass').datepicker(); 


    }); 

    function InitializeRequest(sender, args) { } 
    function EndRequest(sender, args) { 
     // after update occur on UpdatePanel re-init the DatePicker 

     $('.myclass').datepicker(); 


      } 
</script> 

Markup`

<asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox> 

见演示文件here

Answer 2

我认为将是你的问题，因为asp.net更改名称和ELE的ID的嵌套在控制&母版页等

打开您的网页的来源，找到控制并仔细检查ID。

或者作为一种替代方法在元素中添加一个css类，并使用jQuery来查找它，而不是使用ID。

JA

Answer 3

检查这样

$("#<%=txtSearchText.ClientID%>").datepicker(); 

Answer 4

访问此页面jquery-ui-datepicker - >这是UI代码。将此代码块保存为js文件。然后在你的aspx页面上找到它。

<script src="js/jquery.ui.datepicker-tr.js" type="text/javascript"></script> like this. 

$(document).ready(function() { 

$('#<%=txtBirthday.ClientID%>').datepicker({ 
       changeMonth: true, 
       changeYear: true, 
       yearRange: "-100:-17", 
       defaultDate: new Date(1980, 01, 01) 
      }); 

}); 

这里是示例代码。

Answer 5

<asp:Label ID="Label1" runat="server" Text="From"></asp:Label> 
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

<asp:Label ID="Label2" runat="server" Text="To"></asp:Label> 
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 
<script> 
    $(function() { 
    $("#TextBox1").datepicker(); 
    }); 
    $(function() { 
    $("#TextBox2").datepicker(); 
    }); 
</script>