2022年4月12日 星期二

[研究][ASP.NET]HTML5 的 input 標籤的 type 屬性的 日期、月曆測試

[研究][ASP.NET]HTML5 的 input 標籤的 type 屬性的 日期、月曆測試

2022-04-12

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

HTML Standard
https://html.spec.whatwg.org/multipage/input.html#the-input-element

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>
            datetime-local：
            <asp:TextBox ID="TextBox1" Type="datetime-local" runat="server"></asp:TextBox><br />
            datetime：
            <asp:TextBox ID="TextBox2" Type="datetime" runat="server"></asp:TextBox><br />
            date：
            <asp:TextBox ID="TextBox3" Type="date" runat="server"></asp:TextBox><br />
            time：
            <asp:TextBox ID="TextBox4" Type="time" runat="server"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
            <asp:Label ID="Label1" runat="server"></asp:Label><br />
            <asp:Label ID="Label2" runat="server"></asp:Label><br />
            <asp:Label ID="Label3" runat="server"></asp:Label><br />
            <asp:Label ID="Label4" runat="server"></asp:Label><br />
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;

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

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Label1.Text = TextBox1.Text;
            Label2.Text = TextBox2.Text;
            Label3.Text = TextBox3.Text;
            Label4.Text = TextBox4.Text;
        }
    }
}

(下圖)執行結果(Chrome 100)

(下圖) Type="datetime-local"

(下圖) Type="datetime"


其中 datetime-local 輸入的結果 2202-04-12T07:45有個英文字母 T，和一般習慣不同，待會測試看看寫入資料庫會變成甚麼。

如果選擇 22022/4/12 下午 02:48，會顯示 2022-04-12T14:48，仍使用英文字母 T。

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

寫入資料庫測試

Default2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="WebApplication1.Default2" %>

<!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:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:TestDB5ConnectionString %>" 
                DeleteCommand="DELETE FROM [Table1] WHERE [SN] = @SN" 
                InsertCommand="INSERT INTO [Table1] ([date1], [date2], [date3], [date4]) VALUES (@date1, @date2, @date3, @date4)" 
                SelectCommand="SELECT * FROM [Table1]" 
                UpdateCommand="UPDATE [Table1] SET [date1] = @date1, [date2] = @date2, [date3] = @date3, [date4] = @date4 WHERE [SN] = @SN">
                <DeleteParameters>
                    <asp:Parameter Name="SN" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="date1" Type="DateTime" />
                    <asp:Parameter Name="date2" Type="DateTime" />
                    <asp:Parameter Name="date3" Type="DateTime" />
                    <asp:Parameter Name="date4" Type="DateTime" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="date1" Type="DateTime" />
                    <asp:Parameter Name="date2" Type="DateTime" />
                    <asp:Parameter Name="date3" Type="DateTime" />
                    <asp:Parameter Name="date4" Type="DateTime" />
                    <asp:Parameter Name="SN" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
            <asp:ListView ID="ListView1" runat="server" DataKeyNames="SN" 
                DataSourceID="SqlDataSource1" InsertItemPosition="LastItem">
                <AlternatingItemTemplate>
                    <tr style="">
                        <td>
                            <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
                            <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
                        </td>
                        <td>
                            <asp:Label ID="SNLabel" runat="server" Text='<%# Eval("SN") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date1Label" runat="server" Text='<%# Eval("date1") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date2Label" runat="server" Text='<%# Eval("date2") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date3Label" runat="server" Text='<%# Eval("date3") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date4Label" runat="server" Text='<%# Eval("date4") %>' />
                        </td>
                    </tr>
                </AlternatingItemTemplate>
                <EditItemTemplate>
                    <tr style="">
                        <td>
                            <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
                            <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
                        </td>
                        <td>
                            <asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date1TextBox" runat="server" Text='<%# Bind("date1") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date2TextBox" runat="server" Text='<%# Bind("date2") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date3TextBox" runat="server" Text='<%# Bind("date3") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date4TextBox" runat="server" Text='<%# Bind("date4") %>' />
                        </td>
                    </tr>
                </EditItemTemplate>
                <EmptyDataTemplate>
                    <table runat="server" style="">
                        <tr>
                            <td>未傳回資料。</td>
                        </tr>
                    </table>
                </EmptyDataTemplate>
                <InsertItemTemplate>
                    <tr style="">
                        <td>
                            <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
                            <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
                        </td>
                        <td>&nbsp;</td>
                        <td>
                            <asp:TextBox ID="date1TextBox" Type="datetime-local" runat="server" Text='<%# Bind("date1") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date2TextBox" Type="datetime" runat="server" Text='<%# Bind("date2") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date3TextBox" Type="date" runat="server" Text='<%# Bind("date3") %>' />
                        </td>
                        <td>
                            <asp:TextBox ID="date4TextBox" Type="time" runat="server" Text='<%# Bind("date4") %>' />
                        </td>
                    </tr>
                </InsertItemTemplate>
                <ItemTemplate>
                    <tr style="">
                        <td>
                            <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
                            <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
                        </td>
                        <td>
                            <asp:Label ID="SNLabel" runat="server" Text='<%# Eval("SN") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date1Label" runat="server" Text='<%# Eval("date1") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date2Label" runat="server" Text='<%# Eval("date2") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date3Label" runat="server" Text='<%# Eval("date3") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date4Label" runat="server" Text='<%# Eval("date4") %>' />
                        </td>
                    </tr>
                </ItemTemplate>
                <LayoutTemplate>
                    <table runat="server">
                        <tr runat="server">
                            <td runat="server">
                                <table id="itemPlaceholderContainer" runat="server" border="0" style="">
                                    <tr runat="server" style="">
                                        <th runat="server"></th>
                                        <th runat="server">SN</th>
                                        <th runat="server">date1</th>
                                        <th runat="server">date2</th>
                                        <th runat="server">date3</th>
                                        <th runat="server">date4</th>
                                    </tr>
                                    <tr id="itemPlaceholder" runat="server">
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr runat="server">
                            <td runat="server" style="">
                                <asp:DataPager ID="DataPager1" runat="server">
                                    <Fields>
                                        <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" ShowLastPageButton="True" />
                                    </Fields>
                                </asp:DataPager>
                            </td>
                        </tr>
                    </table>
                </LayoutTemplate>
                <SelectedItemTemplate>
                    <tr style="">
                        <td>
                            <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="刪除" />
                            <asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="編輯" />
                        </td>
                        <td>
                            <asp:Label ID="SNLabel" runat="server" Text='<%# Eval("SN") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date1Label" runat="server" Text='<%# Eval("date1") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date2Label" runat="server" Text='<%# Eval("date2") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date3Label" runat="server" Text='<%# Eval("date3") %>' />
                        </td>
                        <td>
                            <asp:Label ID="date4Label" runat="server" Text='<%# Eval("date4") %>' />
                        </td>
                    </tr>
                </SelectedItemTemplate>
            </asp:ListView>
        </div>
    </form>
</body>
</html>

Default2.aspx.cs 沒有進行編寫。

(下圖)執行結果(Chrome 100)





其中 datetime-local 選擇 2202-04-12 上午 07:57 寫入資料庫變成 2202-04-12 07:57:00.000。

其中 datetime 手動輸入(沒月曆可選) 2202-04-12 07:57 寫入資料庫變成 2202-04-12 07:57:00.000。

其中 date  2202-04-12 寫入資料庫變成 2202-04-12 07:57:00.000。(自動加上時間了)

其中 time  07:57 寫入資料庫變成 2202-04-12 07:57:00.000。(自動加上日期了)

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

ASP.NET + SQL  Server + 防 SQL Injection 的參數化查詢

因為字母T關係，字串要做一下取代動作 換成一個半型空白字元，否則會出錯。

TextBox1.Text.Replace("T", " ")

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

2022-06-20 補，「新增」模式OK，但不太合適用於「編輯」模式，值無法顯示



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

(完)

相關

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