2018年3月19日 星期一

[研究][ASP.NET][JavaScript] Bootstrap V3 Datetimepicker 4.17.45 月曆 套件 安裝與試用

[研究][ASP.NET][JavaScript] Bootstrap V3 Datetimepicker 4.17.45 月曆 套件 安裝與試用

2018-03-19

Bootstrap 3 Date/Time Picker v4.17.47
https://github.com/Eonasdan/bootstrap-datetimepicker/

Datepicker 套件在網路上有很多種版本，除了 Bootstrap 提供 Datepicker，還有 JQuery UI 也提供 Datepicker 。

本篇談 Bootstrap 發展的 Datepicker。

Bootstrap 官方網站
http://getbootstrap.com/

在 Google 網址輸入   datepicker  site:getbootstrap.com
找到

Resources · Bootstrap Expo
http://expo.getbootstrap.com/resources/

Bootstrap Datepicker 網站
https://github.com/uxsolutions/bootstrap-datepicker

說明
https://bootstrap-datepicker.readthedocs.io/en/stable/

Bootstrap 3 Datepicker v4 Docs
https://eonasdan.github.io/bootstrap-datetimepicker/

環境：Visual Studio 2017、C#、ASP.NET、WebForm










(下圖) 注意相依順序，被需要的要先排在上面。


(下圖) 注意，function 名稱是 datetimepicker()，不是 datepicker()


(下圖) 對於下面錯誤


未處理的例外狀況 位於行 1，欄 8424 在 http://localhost:10821/Scripts/bootstrap-datetimepicker.min.js 中
0x800a139e - JavaScript 執行階段錯誤: datetimepicker component should be placed within a non-static positioned container

解決方法，把

 <div>


換成絕對定位

 <div style="position: relative;">





<%@ 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" />
    <script src="Scripts/jquery-1.9.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/moment.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.min.js"></script>
    <title></title>
    <script>
        $(function () {
            $("#TextBox1").datetimepicker();
        }
        );
    </script>
    <script>
        $(function () {
            $("#TextBox2").datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-tw')
            });
        }
        );
    </script>
    <script> 
        $(function () {
            $(".bootstrap-datepicker").datetimepicker({
                format: 'YYYY-MM-DD hh:mm:ss',
                locale: moment.locale('zh-tw')
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="position: relative;">
            <asp:TextBox ID="TextBox1" runat="server" Width="200"></asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server" Width="200"></asp:TextBox><br />
            <asp:TextBox ID="TextBox3" CssClass="bootstrap-datepicker" runat="server" Width="200"></asp:TextBox>
        </div>
    </form>
</body>
</html>



執行

在TextBox中點一下，就會跳出日曆 Calendar

外觀似乎有點問題，有待研究 ....

(待續)

相關

[研究][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


張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)