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>

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

(完)

相關

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

沒有留言:

張貼留言