2017年7月7日 星期五

[研究][ASP.NET][JavaScript] jQuery UI v1.12.1 的 Datepicker 月曆 套件 安裝與試用

[研究][ASP.NET][JavaScript] jQuery UI v1.12.1 的 Datepicker 月曆 套件 安裝與試用

2017-07-07
2018-02-07 更新

提供 Datepicker 的不只一家,例如 jQuery UI 有提供,Bootstrap 也有提供。

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

官方網站
https://jqueryui.com/datepicker/

Datepicker 需要 jQuery UI 套件,而 jQuery UI 套件需要 jQuery 套件。

安裝



試用

注意 jquery 的 .js要在 jquery-ui 之前。



<%@ 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>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.12.4.js"></script>
    <script src="Scripts/jquery-ui-1.12.1.js"></script>
    <script>
        $(function () {
            $("#TextBox1").datepicker();
        }
        );
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
    </form>
</body>
</html>



執行

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

更方便的用法,改寫成這樣。就不需要針對每個 物件都要寫一個 Script。


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication4.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-1.12.4.js"></script>
    <script src="Scripts/jquery-ui-1.12.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"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server" CssClass="date"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server" CssClass="date"></asp:TextBox>
        </div>
    </form>
</body>
</html>




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

2018-02-07 補充,再強化

<script>
        $(function () {
            $(".date").datepicker({
                 changeMonth: true,     //顯示月份下拉選單,預設是沒有
                changeYear: true,   //顯示年份下拉選單,預設是沒有
                dateFormat: 'yy/mm/dd', // 注意,是兩個y,顯示成 yyyy/mm/dd,否則預設 mm/dd/yyyy

                //showOn: "button",   // 顯示按鈕,只有點按鈕才會出現月曆,點 TextBox 無效
                //buttonImage: "./Img/calendar.gif",  // 圖片要自己另外找了放到自己想要的目錄
                //buttonImageOnly: true    // 不顯示按鈕,只顯示按鈕上的圖案
            });
        });
    </script>



**************************************
拿掉 showOn 的註解
<script>
        $(function () {
            $(".date").datepicker({
                 changeMonth: true, 
                changeYear: true,   
                dateFormat: 'yy/mm/dd', 

                showOn: "button",  
                //buttonImage: "./Img/calendar.gif",
                //buttonImageOnly: true 
            });
        });
    </script>

(下圖) 顯示按鈕,而且要按下按鈕,才會顯示月曆,現在點 TextBox 是不會顯示月曆的


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

<script>
        $(function () {
            $(".date").datepicker({
                changeMonth: true,     
                changeYear: true,   
                dateFormat: 'yy/mm/dd',  
                showOn: "button",
                buttonImage: "./Img/calendar.gif",  
                //buttonImageOnly: true   
            });
        });
    </script>

(下圖) 按鈕上有圖案了

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

<script>
        $(function () {
            $(".date").datepicker({
                changeMonth: true,     
                changeYear: true,   
                dateFormat: 'yy/mm/dd',  
                showOn: "button",
                buttonImage: "./Img/calendar.gif",  
                buttonImageOnly: true   
            });
        });
    </script>

(下圖) 不出現按鈕,只出現按鈕上的圖案

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

Default.aspx

<%@ 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>
    <link href="Content/themes/base/all.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.6.0.js"></script>
    <script src="Scripts/jquery-ui-1.13.1.js"></script>
    <script type="text/javascript">
        $.datepicker.setDefaults($.datepicker.regional['zh-TW']);
        $(function () {
            var dates = $('input[class=calendar]').datepicker({
                buttonText: '月曆',
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                firstDay: 0,
                showOn: 'button'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox_Date" runat="server" cssClass="calendar">

            </asp:TextBox>
        </div>
    </form>
</body>
</html>

結果

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

也可寫在母版 Master Page 中,不用各別 .aspx 取引用 .js 檔案,例如

Site1.Master

<%@ Master Language="C#" AutoEventWireup="true" 
    CodeBehind="Site1.master.cs" Inherits="WebApplication5.Site1" %>

<!DOCTYPE html>

<html>
<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>
    <script type="text/javascript">
        $.datepicker.setDefaults($.datepicker.regional['zh-TW']);
        $(function () {
            var dates = $('input[class=calendar]').datepicker({
                buttonText: '日期',
                changeMonth: true,
                changeYear: true,
                firstDay: 0,
                showOn: 'button'
            });
        });
        $.timepicker.setDefaults($.datepicker.regional['zh-TW']);
        $(function () {
            var dates = $('input[class=timecalendar]').datetimepicker({
                numberOfMonths: 1,
                constrainInput: false,
                stepHour: 1,
                stepMinute: 5,
                stepSecond: 10,

                buttonText: '日期與時間',
                firstDay: 0,
                showOn: 'button',
                changeMonth: true,
                changeYear: true
            });
        });
        $(document).ready(function () {
            $('textarea').autoGrow();
            $("#footer").footer();
            $("#aspnetForm").validate();
            $('input[class=calendar]').validate();
            $('input[type=submit], button, .btnsend').button();
            $('.radio').buttonset();
            $('.checkbox').buttonset();
            $('.stars-wrapper').stars({
                cancelShow: false
            });
        });
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

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

jQuery UI 1.13.1 時候月曆外觀改了,而且發現有重疊顯示問題,Google 說 Css 可用 

position: relative; z-index:100;

處理,但也有人說瀏覽器或某些防護會禁止用層來處理,因為某些廣告是這樣用,所以會無效。

(完)


相關

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

[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

沒有留言:

張貼留言