2017年7月7日 星期五

[研究] jQuery UI Datepicker 月曆 安裝與試用

[研究] jQuery UI Datepicker 月曆 安裝與試用

2017-07-07

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

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

安裝



試用

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

**********

更方便的用法,改寫成這樣。


<%@ 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>
        </div>
    </form>
</body>
</html>



執行

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




(完)

沒有留言:

張貼留言