web-dev-qa-db-ja.com

MVC5での日付形式の指定（dd / MM / yyyy）

日付値のユーザー入力を処理しようとしています。dd/ MM/yyyyの形式で日付を入力するようユーザーに要求します

私がやろうとしたこと：

この質問でDarinの答えを読んで実装します。 asp.net mvc 4でdatetimeをフォーマットする

これは私の実装です：

Global.asaxで

    (ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var displayFormat = bindingContext.ModelMetadata.DisplayFormatString;
        var value = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);

        if (!string.IsNullOrEmpty(displayFormat) && value != null)
        {
            DateTime date;
            displayFormat = displayFormat.Replace
            ("{0:", string.Empty).Replace("}", string.Empty);
            if (DateTime.TryParse(value.AttemptedValue, CultureInfo.InvariantCulture, DateTimeStyles.None, out date))
            {
                return date;
            }
            else
            {
                bindingContext.ModelState.AddModelError(
                    bindingContext.ModelName,
                    string.Format("{0} is an invalid date format", value.AttemptedValue)
                );
            }
        }

        return base.BindModel(controllerContext, bindingContext);
    }

モデルの出発日：

[Required(ErrorMessage = "Departure date is required")]
        [Display(Name = "Departure Date")]
        [DataType(DataType.Date)]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public DateTime DepartureDate { get; set; }

ビューで：

 <div class="col span-1-of-2">
                            @Html.LabelFor(m => m.DesignVacation.DepartureDate)
                            @Html.EditorFor(m => m.DesignVacation.DepartureDate)

                        </div>

そして、これはビューを実行したときの出力です： enter image description here

月（mm）で始まりますが、私が望むのはこの形式です：dd/MM/yyyy

EditorFor（および可能であればtextboxFor）を使用してこの形式を取得する方法。

c#asp.netasp.net-mvcdatedatetime
9
fares Ayyad

EditorFor()を[DataType]および[DisplayFormat]属性と共に使用して、ブラウザーのHTML5日付ピッカーを生成しています。仕様では、形式がyyyy-MM-dd（ISO形式）であることが必要です。属性を次のように変更します。

[Required(ErrorMessage = "Departure date is required")]
[Display(Name = "Departure Date")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime DepartureDate { get; set; }

日付はユーザーのデバイスのカルチャに表示されます。これがHTML-5の日付ピッカーの目的です。

カスタムモデルバインダーは必要ありません（日付はISO形式でポストされ、DefaultModelBinderによって正しくバインドされます）。

ただし、HTML-5のdatepickerはChrome and Edgeでのみサポートされ、Firefoxでは通常のテキストボックスが表示されることに注意してください（たとえば）。一貫性のあるUIが必要な場合は、 jquery datepickerプラグイン（jquery-UIなど）を使用しますが、クライアント側の検証用にバリデーターを再構成する必要もあります（例については this answer を参照してください）。

9
user3559349

DisplayFormatAttribute.DataFormatString Property のドキュメントを見ると、

フィールド値の表示形式を取得または設定します。

datepickerの設計フォーマットを変更することは言及されておらず、値のフォーマットのみを変更します。 HTML 5 date pickerから日付を取得しているため、その形式を変更することはできません 入力タイプ=「日付」形式を変更する方法はありますか？ また、一部のブラウザはHTML 5 date pickerをサポートしませんjquery date pickerを使用できます

これをheadに追加します

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

およびbody

@Html.TextBoxFor(m => m.DesignVacation.DepartureDate)

最後にscriptを追加します

<script>

   $(function(){

       $('#DesignVacation_DepartureDate').datepicker({
        dateFormat: 'dd/mm/yy'
    });

});

</script>
3
Usman