2022年4月12日 星期二

[研究][ASP.NET]用 ASP.NET Calendar 控制項顯示月曆輸入日期

[研究][ASP.NET]用 ASP.NET Calendar 控制項顯示月曆輸入日期

2022-04-12

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

其中小月曆圖案 calendar.gif 要自己 Google 找或自己繪製。

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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox_DateTime1" runat="server" Width="200px"></asp:TextBox>
            <asp:ImageButton ID="ImageButton1" runat="server" 
                ImageUrl="~/images/calendar.gif" OnClick="ImageButton1_Click" /><br />
            <asp:Calendar ID="Calendar1" runat="server" Visible="false" 
                OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>


Default.aspx.cs

using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            Calendar1.Visible = true;
        }

        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            TextBox_DateTime1.Text = Calendar1.SelectedDate.ToString("yyyy/MM/dd HH:mm:ss");
            Calendar1.Visible = false;
        }
    }
}

執行結果



優點：這是微軟提供的；HTML5 的看起來有點不習慣，3rd Party 的要定期或不定期用 NuGet 或手動下載更新。

缺點：使用有點麻煩。

(完)

相關

[研究][ASP.NET]用 ASP.NET Calendar 控制項顯示月曆輸入日期
https://shaurong.blogspot.com/2022/04/aspnet-aspnet-calendar.html

[研究]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.UI.Combined.1.13.1 的 datepicker 與 jQuery 3.6.0 相容測試https://shaurong.blogspot.com/2022/03/aspnetjqueryuicombined1131-datepicker.html

[研究][JavaScript] jQuery Date and Time picker 2.4.5 (jquery-datetimepicker)(NuGet 安裝)
https://shaurong.blogspot.com/2018/03/javascript-jquery-date-and-time-picker.html

[研究][ASP.NET][JavaScript] Bootstrap V3 Datetimepicker 4.17.45 月曆 套件 安裝與試用https://shaurong.blogspot.com/2018/03/bootstrap-v3-datepicker-41745.html

[研究][ASP.NET][JavaScript] Bootstrap Datepicker 1.7.1 月曆 套件 安裝與試用https://shaurong.blogspot.com/2018/03/bootstrap-datepicker-171.html

[研究][ASP.NET][JavaScript] jQuery UI v1.12.1 的 Datepicker 月曆 套件 安裝與試用https://shaurong.blogspot.com/2017/07/jquery-ui-datepicker.html



張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)