[研究][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
沒有留言:
張貼留言