日期选择器不工作jQuery答案

【问题标题】：datepicker not working jquery日期选择器不工作jQuery
【发布时间】：2013-11-14 18:19:50
【问题描述】：

我正在尝试使用在线 jquery 来生成我的日期选择器。在我的标记中是：

<asp:TextBox ID="PStart" runat="server"></asp:TextBox>

紧随其后

<script type = "text/javascript">
    $(function () {
        $("#PStart").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true
        });
    });
</script>

在我的网站管理员的标题中，我已经包括：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type ="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type ="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />

需要注意的一点是，此日期选择器嵌套在更新面板中，只有在完成表单并单击提交/保存按钮后才会更新。我已将 shildren 设置为 false 触发器并将更新模式设置为有条件但它没有被显示，更不用说做出选择了。

【问题讨论】：

它对我来说很好DEMO
@abc123 不是一个有效的演示，因为他使用的是 asp net。
@Dom 证明问题不在于 javascript、jquery、jquery-ui ......这里的问题很可能是他的 ID 不是 PStart 当页面被渲染时...他需要使用浏览器检查元素...可能全部来自 asp.net...这个问题有 3 个解决方案，但我需要他来验证它。
@New2This 在您的Site.Master 中，您的标题中有占位符吗？如果是，是在您提供的标头代码之前还是之后？
@Dom 它在标题内

标签： jquery datepicker

【解决方案1】：

如果没有看到更多代码，就无法确定。但是，假设没有错误，问题可能在于调用了<asp:ContentPlaceHolder> 和<asp:Content>。

使用占位符时，asp 控件会将其 ID 更改为以下格式：{ContentPlaceHolderID}_ElementID。

我推荐：

将<asp:TextBox ID="PStart" runat="server"></asp:TextBox> 更改为<input id="PStart" type="text"/>
检查页面并找到该元素的实际 ID（很可能是 "#{ContentPlaceHolderID}_PStart"）。

希望这对您有所帮助，如果您有任何问题，请告诉我！

Site.Master：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type ="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type ="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
        <div id="body">
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </div>
    </form>
</body>
</html>

Default.aspx：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<asp:Content runat="server" ContentPlaceHolderID="HeadContent">
    <script type = "text/javascript">
        $(function () {
            $("#MainContent_PStart, #PStart").datepicker({
                showOn: "button",
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                buttonImageOnly: true
            });
        });
    </script>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <asp:TextBox ID="PStart" runat="server"></asp:TextBox> 
    <input type="text" id="PStart"/>
</asp:Content>

结果：

【讨论】：