2018年3月19日 星期一

[研究][ASP.NET][JavaScript] Bootstrap Datepicker 1.7.1 月曆 套件 安裝與試用

[研究][ASP.NET][JavaScript] Bootstrap Datepicker 1.7.1 月曆 套件 安裝與試用

2018-03-19

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/

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














(下圖) 注意，被需要的必須放前面



<%@ 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-3.3.1.min.js"></script>
    <link href="Content/bootstrap-datepicker3.min.css" rel="stylesheet" />
    <script src="Scripts/bootstrap-datepicker.min.js"></script>
    <title></title>
    <script>
        $(function () {
            $("#TextBox1").datepicker();
        }
        );
    </script>

     <script>
        $(function () {
            $("#TextBox2").datepicker({
                format: 'yyyy-mm-dd',
                //format: 'yyyy-mm-dd hh:mm:ss',
                //locale: moment.locale('zh-tw')
            });
        }
        );
    </script>

     <script> 
        $(function () {
            $(".bootstrap-datepicker").datepicker({
                format: 'yyyy-mm-dd',
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox3" CssClass="bootstrap-datepicker" runat="server"></asp:TextBox><br />
        </div>
    </form>
</body>
</html>


執行

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

********************************************************************************
2018-04-10 補充

發現 cdnjs 提供了 1.8.0 版
https://cdnjs.com/libraries/bootstrap-datepicker

但是 github 這裡仍只提供到 1.7.0
https://github.com/uxsolutions/bootstrap-datepicker/blob/master/CHANGELOG.md

Visual Studio 2017 v15.6.5 提供到 1.7.1 版



<%@ 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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js" integrity="sha384-lZmvU/TzxoIQIOD9yQDEpvxp6wEU32Fy0ckUgOH4EIlMOCdR823rg4+3gWRwnX1M" crossorigin="anonymous"></script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
    <title></title>
    <script>
        $(function () {
            $("#TextBox1").datepicker();
        }
        );
    </script>
    <script>
        $(function () {
            $("#TextBox2").datepicker({
                format: 'yyyy-mm-dd',
                //format: 'yyyy-mm-dd hh:mm:ss',
                //locale: moment.locale('zh-tw')
            });
        }
        );
    </script>
    <script> 
        $(function () {
            $(".bootstrap-datepicker").datepicker({
                format: 'yyyy-mm-dd',
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <asp:TextBox ID="TextBox3" CssClass="bootstrap-datepicker" runat="server"></asp:TextBox><br />
        </div>
    </form>
</body>
</html>


到 BootStrap 官方網站，找到 BootstrapCDN 加上去，月曆會有外框，會好看點。(但第一個 TexBox 寬度會和瀏覽器同寬)

https://getbootstrap.com/



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

(完)

相關

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