Jquery 日期选择器在母版页中不起作用答案

【问题标题】：Jquery Date picker Not working in Master PageJquery 日期选择器在母版页中不起作用
【发布时间】：2014-08-21 14:49:03
【问题描述】：

在母版页中

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>

<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>


    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

在内容占位符中我尝试过

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
        $(function () {
           $("input[id$='TextBox1']").datepicker();
        });                 
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
</asp:Content>

我已经尝试在 asp 页面中正常工作。我不知道为什么它在母版页中不起作用。

【问题讨论】：

如果 datepicker 不起作用，那么浏览器控制台上是否有任何错误？另请使用 alert($('selector').length) 检查天气您的 jquery 选择器是否包含任何元素
你能显示你应用日期选择器的控件吗..
@user3494471 请检查天气选择器是否选择了任何元素
您是否在页面中使用任何更新面板？
如何将该元素添加到母版页？

标签： javascript jquery css asp.net

【解决方案1】：

这对你有用...

<script type="text/javascript">
    $(document).ready(function() {
    $("input[id$='TextBox1']").datepicker();
});

</script>

你也可以给它一个类似CssClass="datePicker"的类，然后用它来用jQuery抓取它：

$(".datePicker").datepicker();

【讨论】：

【解决方案2】：

在 Datepicker 所在的页面中使用 Like

把它放在你 Datpicker 所在页面的底部，把这个Jquery

<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>   
<script src="DATEPICKER.JS" type="text/javascript"></script>   
<script type="text/javascript">
        $(function () {
           $("input[id$='TextBox']").datepicker();
        });                 
</script>

【讨论】：

将我的脚本添加到 //这里添加它并从 ID="Content1 中删除"

【解决方案3】：

将你的内容页面代码更改为此，从母版页中删除日期选择器样式

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
    .ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>

 <script type="text/javascript">
    `$(function () {
       $("input[id$='TextBox1']").datepicker();
    });                 
</script>
</asp:Content>

如果不工作！！！请在您的浏览器中写下此内容的 html 结果

【讨论】：