web-dev-qa-db-ja.com

ASP .NET MVC 5.1 / HTML 5固有の日付ピッカーの代わりに日付時間ピッカーを表示する

ASP .NET MVC 5.1でアプリケーションを記述します

私にはフィールドがあります：

  [DisplayName("Date of Birth")]
  [DataType(DataType.Date)]
  public DateTime BirthDate { get; set; }

そして、ビューで

  <div class="form-group">
            @Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BirthDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })
            </div>
        </div>

次のように変換されます：

enter image description here

モデルのプロパティの上の注釈を次のように変更した場合：

    [DisplayName("Date of Birth")]
    [DataType(DataType.DateTime)]

ピッカーが表示されません。それらを次のように変更した場合：

 [DisplayName("Date of Birth")]
 [DataType(DataType.Time)]

選択できるのはhh：mmのみです。

質問： ASP .NET MVC 5.1で日付ピッカーの代わりに日付時刻ピッカーを表示します。ASP .NET 5.1 HTML 5つの特定のソリューション。

c#razordatepickerasp.net-mvc-5.1
18
Yoda

あなたの要件はかなりですpicky ...

フィールドに属性Datatypeを指定すると、inputとして指定された属性を持つtypeが生成されます。 [DataType(DataType.Date)]を追加すると、生成される入力は日付ピッカーになりますが、[DataType(DataType.DateTime)]を追加すると、入力はdatetime型になります。ピッカーを表示しないでください。どうして？数年前、入力datetimeをサポートするブラウザがサポートを停止することを決定し、W3Cは実装の不足によりこの機能を削除したためです。

ただし、少し前までは、一部のブラウザベンダーがドラフトに戻ったdatetime-localのサポートを再開しました。現在、Chrome、Opera、およびMicrosoft Edgeの最新バージョンがサポートしています。

1つの解決策は、BootStrapまたはAjay Kumarが提案したjQuery Datetime Pickerを使用することです。

もう1つは、サポートするブラウザーが少ないことを気にしない場合は、datetime-localを使用することです。たとえばこのように：

@Html.TextBoxFor(model => model.BirthDate, new { type = "datetime-local"})
5
actaram

Html5とhtml5をサポートするブラウザーのために、この日付ピッカーを取得しています。可能なオプション：

5
Ajay Kumar

私のソリューションはわずかに異なっていました。ただし、javascript/jQueryを使用して実行します。データ注釈を使用する場合は、ファクトを使用しました

_[Display(Name = "The Display Name")DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yy H:mm:ss tt}"), DataType(DataType.DateTime)]
        public DateTime DateTimeFieldName { get; set; }
_

ここで、ページ（またはバンドル）にjqueryUIスクリプトとCSSを含める必要があります。 Javascriptの場合：

_$(function () {//DOM ready code
    // Get data-annotations that are Marked DataType.DateTime and make them jquery date time pickers
    $('input[type=datetime]').datetimepicker({ dateFormat: 'yy-mm-dd', timeFormat: 'hh:mm', changeMonth: true, changeYear: true, showAnim: 'slideDown' });
});// END DOM Ready
_

DataType(DataType.DateTime)は型がdatetimeの入力を行うためです。その事実を使用して、それらすべてを取得し、jQueryを使用して日付ピッカーにします。 __Layout_ページバンドルに含まれているこのコードがあります。

そのため、モデルのプロパティに注釈を付けるだけで、jQueryの日付時刻ピッカーとして表示されます。日時ピッカーのデフォルトを変更することができます。これが誰かを助けることを願っています。

1
Mike

オブジェクト定義に追加します。

public class EditViewModel
{
    public string Id { get; set; }

    [Display(Name = "Username")]
    public string UserName { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-ddThh:mm:ss}")]
    [Display(Name = "Registed Date")]
    public DateTime RegistedDate { get; set; }
}

.cshtmlに以下を追加：

<div class="form-group">
    @Html.LabelFor(m => m.RegistedDate, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.RegistedDate, "{0:yyyy-MM-ddThh:mm:ss}", new { @class = "form-control", type = "datetime-local" })
        @Html.ValidationMessageFor(m => m.RegistedDate, "", new { @class = "text-danger" })
    </div>
</div>
0
Mhd. Osama Jindia