2018年3月21日 星期三

[研究][ASP.NET][JavaScript] jQuery datetimepicker 2.4.5 月曆套件試用(NuGet 安裝)

[研究][JavaScript] jQuery Date and Time picker 2.4.5 (jquery-datetimepicker)(NuGet 安裝)

2018-03-21

之前試過了 jQuery UI 提供的 datepicker、BootStrap 提供的 datepicker，現在試試 jQuery 提供的 datetimepicker。

jQuery Date and Time picker
https://plugins.jquery.com/datetimepicker/

GitHub - xdan/datetimepicker: jQuery Plugin Date and Time Picker
https://github.com/xdan/datetimepicker

xdan/datetimepicker Documentation
https://xdsoft.net/jqplugins/datetimepicker/

NuGet 選 jquery-datetimepicker











(下圖) 注意，雖然 jQuery-datetimepicker 沒有自動安裝 jQuery，但是實際上是需要的，否則執行時候會出現下面錯誤。






********************************************************************************

下圖，注意橘色區域程式碼的位置，如果寫在 <head> </head> 之間


<%@ 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" />
    <link href="Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.datetimepicker.js"></script>
    <title></title>
    <script>
        $("#TextBox1").datetimepicker({
            //inline: true
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        </div>
    </form>
</body>
</html>



(下圖) 只會出現 INPUT，怎麼點都不會出現月曆

********************************************************************************

下圖，寫在 </body> 之下


<%@ 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" />
    <link href="Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.datetimepicker.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        </div>
    </form>
</body>
<script>
    $("#TextBox1").datetimepicker({
        //inline: true
    });
</script>
</html>



(下圖) 正常運作
********************************************************************************

或也可寫成這樣
注意 CssClass 名稱的對應


<%@ 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" />
    <link href="Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.datetimepicker.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" CssClass="jquery-datetimepicker" runat="server"></asp:TextBox><br />
        </div>
    </form>
</body>
        <script>
        $(".jquery-datetimepicker").datetimepicker({
            //inline: true
        });
    </script>
</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

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)