記事詳細

投稿日
2026年08月28日05時40分
タイトル

ASP.NET Core Mvc: <input asp-for="Posted" class="form-control" />にjqueryで、今日の日付を設定するコードを教えてください。

内容

ASP.NET Core MVC の <input asp-for="Posted" /> に jQuery で今日の日付を自動設定するには、
HTML 側で日付入力用の type="date" を指定し、jQuery で value に今日の日付（YYYY-MM-DD 形式）をセットします。

実装例

View (.cshtml)

Cshtml
@model YourNamespace.YourViewModel

<div class="form-group">
    <label asp-for="Posted"></label>
    <input asp-for="Posted" type="date" class="form-control" id="Posted" />
    <span asp-validation-for="Posted" class="text-danger"></span>
</div>

@section Scripts {
    <!-- jQuery CDN（必要に応じてローカルでも可） -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(function () {
            // 今日の日付を YYYY-MM-DD 形式で取得
            var today = new Date();
            var yyyy = today.getFullYear();
            var mm = String(today.getMonth() + 1).padStart(2, '0'); // 月は0始まり
            var dd = String(today.getDate()).padStart(2, '0');

            var formattedDate = yyyy + '-' + mm + '-' + dd;

            // input にセット
            $('#Posted').val(formattedDate);
        });
    </script>
}

ViewModel 側

Csharp
public class YourViewModel
{
    [DataType(DataType.Date)]
    public DateTime Posted { get; set; }
}

ポイント

  1. type="date" を指定
    これによりブラウザのネイティブ日付ピッカーが使えます。
  2. id="Posted" を明示
    asp-for="Posted" で自動的に id が付きますが、明示しておくと jQuery セレクタで確実に取得できます。
  3. 日付フォーマットは YYYY-MM-DD
    HTML5 の date 型はこの形式でないと値が反映されません。
  4. $(function(){ ... })
    DOM 読み込み後に実行するための jQuery 構文です。

もしブラウザのネイティブ日付ピッカーではなく jQuery UI Datepicker を使いたい場合は、
同じロジックで .datepicker("setDate", new Date()) を使えば今日の日付を設定できます。

このコードを使えば、ページを開いた瞬間に Posted フィールドに今日の日付が自動で入ります。
必要なら、次に jQuery UI バージョンの例も作れますが、そちらも載せますか？

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧