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