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

Question

我正在创建一个 web 控件，我想在这个控件上使用 jquery date-picker，我尝试了以下方法： 1）。在 web-control 中应用所有必需的 jquery 代码（但它对我不起作用。） 2）。在我调用该 Web 控件的页面中应用所有必需的 jquery 代码（但它对我不起作用。）

请帮帮我，

其实我这样做的目的是： 我想为搜索创建一个通用模块，我只需将表的名称传递给它就会自动工作，到目前为止我已经完成的是：

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

通过类选择器定位您的日期选择器。这比尝试定位 id 容易得多。如果您将控件夹在更新面板中，您有两个将日期选择器初始化两次。这样做

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

标记`

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

查看演示文件here

Answer 2

这样检查

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

Answer 3

我认为您的问题将是因为 asp.net 更改了嵌套在控件和母版页等中的元素的名称和 ID。

打开页面的源代码，找到控件并仔细检查 ID。

或者作为替代方案，将 css 类添加到元素并使用 jQuery 查找它而不是 ID。

JA

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>