HOME LIB.ARTS HTML/CSS JQUERY ASP.NET ACCESS PYTHON ABOUT

JavaScript/jQuery {Article008}

説明文の表示 ライブデモを見る▶
ようこそ「JavaScript/jQuery」へ...

JavaScript/jQueryを使用してDate型のTextBoxに今日の日付を表示する

Coming soon...

作成手順

Coming soon...

操作手順

  1. サンプルが表示されたら「Live DEMO」直下に表示されている表から黄色のボタンを[Get today's date...]をクリックします。

  2. テキストボックスに今日の日付が表示されます。

  3. Date1のボタンをクリックしたときは、JavaScriptの「document.getElementById('txtDate1').value = today」を実行して日付を取得・設定しています。

  4. Date2のボタンをクリックしたときは、jQueryの「$('input#txtDate2').val(today)」を実行して日付を取得・設定しています。

  5. Date3のボタンをクリックしたときは、ASP.NET経由でC#の「txtDate3.Value = String.Format("{0:yyyy-MM-dd}", DateTime.UtcNow.AddHours(9))」を実行して日付を取得・設定しています。 Webサーバーから今日の日付を取得するときは「世界標準時間」を取得してローカルの日本時間に変換します。 ちなみに、当サイトのWebサーバーは米国にありますので16時間くらいの時差があります。

  6. Date4のボタンをクリックしたときは、ASP.NET経由でC#の「txtDate4.Text = String.Format("{0:yyyy-MM-dd}", DateTime.UtcNow.AddHours(9));」を実行して日付を取得・設定しています。 Date3と同様、「世界標準時間」を取得してローカルの日本時間に変換しています。 Date3ではHTMLの「input type="date"」タグに日付設定していますが、Date4ではASP.NETの「TextBox」コントロールに日付を設定しています。

Live DEMO

Date <input type="date".../> Action Button
Date1
<input id="txtDate1" type="date" value="" />
document.getElementById('txtDate1').value = today;
Date2
<input id="txtDate2" type="date" value="" />
$('input#txtDate2').val(today);
Date3
<input id="txtDate3" type="date" value="" runat="server" />
txtDate3.Value = String.Format("{0:yyyy-MM-dd}", DateTime.UtcNow.AddHours(9));
Date4
<asp:TextBox ID="txtDate4" runat="server" TextMode="Date" Text="" />
txtDate4.Text = String.Format("{0:yyyy-MM-dd}", DateTime.UtcNow.AddHours(9));
Go Top