ASP.NET MVC - jquery 日期选择器

Posted

技术标签:

【中文标题】ASP.NET MVC - jquery 日期选择器【英文标题】:ASP.NET MVC - jquery datepicker 【发布时间】:2010-10-28 10:03:27 【问题描述】:

好的,所以我是 ASP.NET MVC 和 JQuery 的新手。

我已经严格按照以下示例进行操作,但我无法让日期选择器正常工作:

http://codesprouts.com/post/Creating-A-DatePicker-Extension-In-ASPNet-MVC.aspx

谁能告诉我这是否有任何问题或陷阱?

伯纳德。

【问题讨论】:

【参考方案1】:

使用 google 托管的 jquery。

【讨论】:

试过了,效果很好,但我对将数据采集器托管在 Google 上并不完全满意。真的是非理性的恐惧,因为我猜如果谷歌我们很快就会下线,这将与更严重的问题有关,例如小行星撞击或其他事情。无论如何,这让我很沮丧,因为我无法让事情在本地进行,我不想给我们,所以我没有使用这个解决方案,即使它有效。 我给你打勾,因为你的解决方案虽然有效 - 可惜我今天的打字很蹩脚...... 我已经尝试将这些 jQuery 脚本包含到我的 site.master 中,但现在我得到一个蓝屏。如果我查看源代码,则 html 就在那里,但实际上并没有调用任何 javascript。取出对 jquery-1.3.2.min.js 的引用会再次显示页面内容。【参考方案2】:

此blog post 提供了将 jQuery 日期选择器集成到 MVC 3 站点的出色概述。

我能找到的其他一些示例集中在 MVC1 和 2 上。

【讨论】:

【参考方案3】:

如果没有更具体的信息,很难判断出了什么问题。

让您开始的一件显而易见的事情是,确保您的脚本文件的 src 标记是正确的。如果您下载标准或自定义版本,jquery-ui .js 文件的文件名会发生变化,因此值得仔细检查代码中的脚本标记是否与文件名匹配。 Firefox 的 firebug 插件的“网络”选项卡真正有助于快速发现您的页面找不到的文件 - 它以红色突出显示任何未找到的文件 - 通常可以节省大量时间。

【讨论】:

好建议。如果您使用 IE,Microsoft Fiddler-fiddler2.com/fiddler2 也可用于显示脚本文件是 404'ing。【参考方案4】:

看看你是否可以让日期选择器首先在 HTML 中工作。这样您就可以消除由 src 标记中不正确的文件名等引入的错误。一旦您完成了该工作,您应该能够将其添加到本文描述的 MVC 解决方案中。

【讨论】:

【参考方案5】:

过去,当我在一个文件中使用整个 jquery UI css 时,我在使用 jQuery datepicker 时遇到了困难。我最终做了什么,并且似乎对我有用,是根据需要在我的页面或母版页中分别包含不同的 jQuery UI CSS 文件。当我将日期选择器包含在一个单独的 CSS 文件中时,它起作用了。

YMMV

【讨论】:

【参考方案6】:

我发现的一件事是,如果您的 id 有方括号或圆点,那么 datepicker 将无法工作。尝试用 under score 或其他内容替换它们。

【讨论】:

【参考方案7】:

标签

            UL.tabNavigation 
                list-style: none;
                margin: 0;
                padding: 0;
            

            UL.tabNavigation LI 
                display: inline;
            

            UL.tabNavigation LI A 
                padding: 3px 5px;
                background-color: #ccc;
                color: #000;
                text-decoration: none;
            

            UL.tabNavigation LI A.selected,
            UL.tabNavigation LI A:hover 
                background-color: #333;
                color: #fff;
                padding-top: 7px;
            

            UL.tabNavigation LI A:focus 
                    outline: 0;
            

            div.tabs > div 
                    padding: 5px;
                    margin-top: 3px;
                    border: 5px solid #333;
            

            div.tabs > div h2 
                    margin-top: 0;
            

            #first 
                background-color: #f00;
            

            #second 
                background-color: #0f0;
            

            #third 
                background-color: #00f;
            

            .waste 
                    min-height: 1000px;
            
-->
</style>

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

   <script  type="text/javascript">
       $(function() 
           $("#datepicker").datepicker();
       );

日期:

从 JQUERY 下载 js 文件并将它们放在您机器上的本地文件夹中,如果您使用 Visual Studio,只需将文件拖到您的设计器界面上。不要忘记链接 CSS 文件。我为每个项目所做的是从我的下载位置将 js 文件添加到项目中名为 Scripts 的文件夹中,并将 css 文件添加到名为 CSS 的文件夹中。

【讨论】:

以上是关于ASP.NET MVC - jquery 日期选择器的主要内容,如果未能解决你的问题,请参考以下文章

日期选择器不工作(ASP.NET MVC)

使用日期时间选择器进行日期和时间验证 (ASP.Net MVC Core v1.1)

ASP.Net MVC jQuery UI DatePicker 日期格式

有效日期的 Asp.net MVC DateTime 错误

ASP.NET MVC、Telerik Kendo、jQuery 验证中的非标准日期格式

JQuery Datepicker 未在 ASP.NET MVC 中显示