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
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
沒有留言:
張貼留言