[研究][ASP.NET][JavaScript]jQuery.UI.Combined.1.13.1 的 datepicker 與 jQuery 3.6.0 相容測試
2022-3-19
因為這篇，敝人想測試一下目前最新 jQuery UI 的 datepicker 和 jQuery 3.6.0 相容性
[研究][ASP.NET]jQuery 3.6.0 物件沒有支援這個屬性或方法 'datepicker'
https://shaurong.blogspot.com/2022/03/aspnetjquery-360-datepicker.html
環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#
NuGet 安裝 jQuery.UI.Combined.1.13.1時，實際上會安裝 jQuery.2.0.0 和 jQuery.UI.Combined.1.13.1，然後再把 jQuery 2.0.0 升級到 jQuery 3.6.0
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-3.6.0.js"></script>
<script src="Scripts/jquery-ui-1.13.1.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script>
$(function () {
$(".date").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="date" AutoComplete="Off"></asp:TextBox>
</div>
</form>
</body>
</html>
|
測試結果
似乎正常。
********************************************************************************
測試
把 <script src="Scripts/jquery-ui-1.13.1.js"></script> 這行註解或砍掉，Chrome 99 上執行沒有跳出任何錯誤，只是日期不會顯示。
但是 Internet Explorer 11 ( IE11) 上顯示了錯誤。
錯誤: 物件沒有支援這個屬性或方法 'datepicker'
using System.Web.Optimization;
using System.Web.UI;
namespace PMSWeb
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkID=303951
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
// Order is very important for these files to work, they have explicit dependencies
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
// Use the Development version of Modernizr to develop with and learn from. Then, when you’re
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
ScriptManager.ScriptResourceMapping.AddDefinition(
"respond",
new ScriptResourceDefinition
{
Path = "~/Scripts/respond.min.js",
DebugPath = "~/Scripts/respond.js",
});
//string jquerystr = "3.5.1";
string jquerystr = "3.6.0";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-" + jquerystr + ".min.js",
DebugPath = "~/Scripts/jquery-" + jquerystr + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + jquerystr + ".min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + jquerystr + ".js",
CdnSupportsSecureConnection = false,
LoadSuccessExpression = "window.jQuery"
});
string str = "1.12.1";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-ui-" + str + ".min.js",
DebugPath = "~/Scripts/jquery-ui-" + str + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + str + "/jquery-ui.min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + str + "/jquery-ui.js",
CdnSupportsSecureConnection = false
});
string bootstrapversion = "3.3.6";
ScriptManager.ScriptResourceMapping.AddDefinition("bootstrap", new ScriptResourceDefinition()
{
Path = "~/Scripts/bootstrap.min.js",
DebugPath = "~/Scripts/bootstrap.js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/" + bootstrapversion + "/bootstrap.min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/bootstrap/" + bootstrapversion + "/bootstrap.js",
CdnSupportsSecureConnection = true,
LoadSuccessExpression = "window.jQuery.fn.carousel"
});
}
}
}
|
把 1.12.1 換成 1.13.1 即可。
(完)
相關
[研究]HTML5 的 input 標籤的 type 屬性的 日期、月曆測試
https://shaurong.blogspot.com/2022/04/html5-input-type_12.html
[研究]HTML5 的 input 標籤的 type 屬性的各種值
https://shaurong.blogspot.com/2022/04/html5-input-type.html
[研究][ASP.NET]jQuery 3.6.0 物件沒有支援這個屬性或方法 'datepicker'
https://shaurong.blogspot.com/2022/03/aspnetjquery-360-datepicker.html
[研究][ASP.NET][JavaScript]jQuery.UI.Combined.1.13.1 的 datepicker 與 jQuery 3.6.0 相容測試
https://shaurong.blogspot.com/2022/03/aspnetjqueryuicombined1131-datepicker.html
[研究][ASP.NET][JavaScript] jQuery datetimepicker 2.4.5 月曆套件試用(NuGet 安裝)
http://shaurong.blogspot.com/2018/03/javascript-jquery-date-and-time-picker.html
[研究][ASP.NET][JavaScript] Bootstrap V3 Datepicker 4.17.45 月曆 套件 安裝與試用
http://shaurong.blogspot.com/2018/03/bootstrap-v3-datepicker-41745.html
[研究][ASP.NET][JavaScript] Bootstrap Datepicker 1.7.1 月曆 套件 安裝與試用http://shaurong.blogspot.com/2018/03/bootstrap-datepicker-171.html
[研究][ASP.NET][JavaScript] jQuery UI v1.12.1 的 Datepicker 月曆 套件 安裝與試用http://shaurong.blogspot.com/2017/07/jquery-ui-datepicker.html
[jQuery] 月曆套件(一) @ 程式開發學習之路 :: 痞客邦 ::
http://pclevinblog.pixnet.net/blog/post/314562997-%5Bjquery%5D-%E6%9C%88%E6%9B%86%E5%A5%97%E4%BB%B6%28%E4%B8%80%29
沒有留言:
張貼留言