带有 jQuery DatePicker 的 ASP.NET答案

【问题标题】：ASP.NET with jQuery DatePicker带有 jQuery DatePicker 的 ASP.NET
【发布时间】：2014-07-10 06:00:18
【问题描述】：

我想做这样的事情：http://jqueryui.com/datepicker/

但是，我不确定如何：

我有一个母版页内容页面，当我尝试复制该代码并将其粘贴到内容页面时，它会说“XXXX 不能在内容区域中”。
当用户点击提交按钮时，我如何将textbox 中的日期传递给服务器端代码？

以下是我的部分代码：

.aspx:

<asp:Content ID="Content4" ContentPlaceHolderID="MainContent1" runat="server">
    <p>Date: <input type="text" id="datepicker"></p>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    <asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>
</asp:Content>

.cs:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    lblOutput.Text = //The date from the datepicker
}

【问题讨论】：

标签： c# javascript jquery asp.net datepicker

【解决方案1】：

您需要在 html 中像这样使用runat="server"：

<input type="text" id="datepicker" runat="server">

然后在您的服务器端，您可以将datepicker 引用为服务器对象并访问datepicker.Value。

致@C.J 评论。这是问题中添加的this link 中包含的源代码，runat=server 所在的位置：

这在您的母版页上：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

这在您的内容页面上：

<p>Date: <input type="text" id="datepicker" class="datepicker"></p>
<script>
  $(document).on('ready',function() {
    $( ".datepicker" ).datepicker();
  });
</script>

【讨论】：

我在哪里包含$(function() { $("#datepicker").datepicker(); }); 因为如果我在内容页面中输入它们，它会返回错误。
所以，现在你在复制我的答案！！如果你愿意，我给你投票！！没问题！！
@Dalorzo 我理解链接中的代码。但是，我的问题是，如果我有一个母版页，我将如何调用内容页中的函数？
javascript函数是什么函数？
我试图在内容页面中包含代码<!doctype html> ... <body>，但它说这些代码不能包含在内容区域中

【解决方案2】：

HTML5 使用type="date"

<asp:TextBox ID="tbDate" runat="server" type="date"></asp:TextBox>

【讨论】：

【解决方案3】：

您需要初始化您的日期选择器并将runat="server" 添加到您的输入中，如下所示：

$(function() {
   $("#datepicker").datepicker();
});


<input type="text" id="datepicker" runtat="server">

【讨论】：