TextBoxFor メソッドでmm:ssのフォーマットを指定したい

Question

### 前提・実現したいこと TextBoxFor メソッドで、 mm:ss 分と秒のフォーマットを指定したいですが可能でしょうか。環境： windows10 pro MVC5 ### 試したこと色んなサイトを参照し、以下のようにフォーマットを試しました。 ```model [Display(Name = "時間")] [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = @"{0:mm\:ss}")] public TimeSpan? TimeFrom { get; set; } ``` ```view

@Html.TextBoxFor(m => m.TimeFrom, "{0:mm\:ss}", new { placeholder = "00:00" })

@Html.ValidationMessageFor(m => m.TimeFrom, "", new { @class = "text-danger" })

``` これでこのテキストボックスに例えば、 30：00 と入力後にclickイベント等を発火すると、ValidationMessageForで ``` 値 '30:00' は時間に対して無効です。 ``` が表示されます。しかし、 23：59 など24：00を超えない値はエラーが表示されません。これを解決することはできますでしょうか。よろしくお願いいたします。

Accepted Answer

30:00 でエラーが出たのは 30 時 00 分と解釈されたからだと思います。（TimeSpan 値は、[-]d.hh:mm:ss.ff で表され、hh は 24 時間制の時間となりますが、それに 30 と入力されたのでエラーになった） 00 分 00 秒以上、59 分 59 秒以下という範囲を超えたらエラーを出すにはデータアノテーション属性（RegularExpression または Range）を付与することで可能です。あと、未検証ですが、00:mm:ss という形でテキストボックスに入力する必要がありそうです。 **【追記】** ちょっと検証してみました。テキストボックスの表示は mm:ss としても、それを送信してサーバー側で受けるときは hh:mm と解釈されるのが問題です。つまり、例えば、テキストボックスに 30:00 とか 59:59 とか mm:ss 形式であれば有効な数字を入力しても、サーバー側では hh:mm 形式と解釈され、30 とか 59 は hh としては不正なのでモデルバインディングできずエラーになります。なので、TextBoxFor の第 2 引数に "{0:mm\:ss}" を設定するのは mm:ss 形式で表示するだけならいいかもしれませんが、その後ユーザーが編集して送信ということが必要なら、送信する前に 00:mm:ss にしなければならないということで、操作が面倒になるだけなので意味がなさそうです。 TextBoxFor の第 2 引数は "{0:hh\:mm\:ss}" と設定しで最初から hh:mm:ss 形式で表示し、00 分 00 秒以上、59 分 59 秒以下という範囲を超えたらエラーを出すにはデータアノテーション属性（RegularExpression または Range）を付与することで対応するのをお勧めします。ご参考までに検証に使ったコードをアップしておきます。 **Model** ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using System.Globalization; namespace Mvc5App.Models { public class TimeSpanModel { [Required] // クライアント側の検証を無効にすれば RangeAttribute でも可 //[Range(typeof(TimeSpan), "00:00:00", "00:59:59")] [RegularExpression(@"^00:[0-5]\d:[0-5]\d$")] public TimeSpan Start { set; get; } [Required] // クライアント側の検証を無効にすれば RangeAttribute でも可 //[Range(typeof(TimeSpan), "00:00:00", "00:59:59")] [RegularExpression(@"^00:[0-5]\d:[0-5]\d$")] public TimeSpan Stop { set; get; } } } ``` **View** ``` @model Mvc5App.Models.TimeSpanModel @{ ViewBag.Title = "TimeSpanTest"; Layout = "~/Views/Shared/_Layout.cshtml"; // クライアント側での検証を無効にするには以下のコメントアウトを解除 //Html.EnableClientValidation(false); }

TimeSpanTest

@using (Html.BeginForm()) { @Html.AntiForgeryToken()

TimeSpanModel

@Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Start, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.TextBoxFor(model => model.Start, "{0:hh\:mm\:ss}", new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Start, "", new { @class = "text-danger" })

@Html.LabelFor(model => model.Stop, htmlAttributes: new { @class = "control-label col-md-2" })

@Html.TextBoxFor(model => model.Stop, "{0:hh\:mm\:ss}", new { @class = "form-control" }) @Html.ValidationMessageFor(model => model.Stop, "", new { @class = "text-danger" })

}

@Html.ActionLink("Back to List", "Index")

@section Scripts { @Scripts.Render("~/bundles/jqueryval") } ``` **Controller** ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.ComponentModel.DataAnnotations; using Mvc5App.Models; using System.IO; namespace Mvc5App.Controllers { public class HomeController : Controller { public ActionResult TimeSpanTest() { TimeSpanModel model = new TimeSpanModel { Start = new TimeSpan(0, 0, 0), Stop = new TimeSpan(0, 59, 59) }; return View(model); } [HttpPost] public ActionResult TimeSpanTest(TimeSpanModel model) { if (ModelState.IsValid) { return RedirectToAction("Index"); } return View(model); } } } ``` Model に付与した Rquired と RegularExpression での検証結果は以下のようになります。下の例ではエラーメッセージはデフォルトですが自由に設定できます。 ![イメージ説明](2fa57c405eeba6aad3014a8bb9e7f39d.jpeg)

前提・実現したいこと

試したこと

関連した質問