web-dev-qa-db-ja.com

フィールドは日付でなければなりません-DatePicker検証はChrome-mvcで失敗します

奇妙な問題があります。 Chromeで日付の検証が機能しません。 this answerを試しましたが、うまくいきませんでした。

私のモデルにはこれがあります：

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

私の見解：

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>

$(document).ready(function () {
    $('.picker').datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        selectOtherMonths: true
    });
});

すべてがOperaとFirefoxで動作しますが、Chromeはこのタイプの日付を好みません。常に次のエラーが発生しますThe field 'Date' must be a date。

何か案は？

[〜＃〜] update [〜＃〜]

コードが部分ビュー内にある場合、問題があるようです。そのコードをメインページにコピーすると、検証は正常に機能します。

次のように、メインビュー内に部分ビューを挿入しています。

@Html.Partial("_CreateOrEdit", Model)

そして、上記のコードは部分ビュー内にあります。

@model Pro.Web.Models.Model

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)

$(document).ready(function () {
$('.picker').datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true
});

</script>
});

UPDATE2

結局は機能しません。時には機能する場合もあれば、機能しない場合もあります。日付を数回クリックし、時には検証にパスしました。同じ日付に対して、有効な検証と誤った検証が行われる可能性があります。

これは、日付フィールドの出力HTMLです。

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>
c#jqueryasp.net-mvcgoogle-chromedatepicker
26
Cristiano

こことまったく同じ状況（部分図）

検証属性を削除し、サーバー側で検証を実行することで解決しました。

$('#date').removeAttr("data-val-date");
19
user3096151

私の意見では、MVCは[type=date]。これにより、chrome有効な日付形式はシステムの日付形式と同じになります。

次の属性を使用して、MVCで日付形式をJqueryUIと共通になるように設定できます。

[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]

2番目のアイデアは、記事のコードを使用することです。 jQuery UIへのフォールバックを使用したネイティブHTML 5 Datepickerの作成

もう一つ。 HTML入力の日付に関する良いトピックがあります： 入力type = "date"形式を変更する方法はありますか？

11
Piotr Stapp

検証属性を削除して解決しました

@model Pro.Web.Models.Model

<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }
5
István

1年後にパーティーにクラッシュするのは少し遅れていますが、このエラーに関して見つけることができるすべての解決策を試しましたが、誰も助けませんでした。したがって、私自身のように苦労している人にとっては、この問題が解決したのです。

Jquery.validate.globalize.jsとその縮小版（使用しているものに応じて異なります）の最後に、この小さなコードスニペットを追加します。

_... 
   $.validator.methods.range = function (value, element, param) {
        var val = Globalize.parseFloat(value);
        return originalMethods.range.call(this, val, element, param);
    };


}(jQuery, Globalize));
_

Globalize.culture("en-GB");

もちろん、引用符の中に独自のカルチャ設定を使用します。

それが役に立てば幸い！

2
chassis

仕様 は有効な値が RFC3339 として定義されていることを示しているため、問題は<input type="date" />（HTML5）にあるようです。

そこで、ビューを次のように変更しました。

<script>
    $(function () {
         $("#validfrom").datepicker({
             altField: "#ValidFrom",
             altFormat: "yy-mm-dd"
         });
    });
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
    <input id="validfrom" type="text" name="validfrom" />
    @Html.HiddenFor(model => model.ValidFrom)
    @Html.ValidationMessageFor(model => model.ValidFrom)
</div>

それが役に立てば幸い。

1
Hubo

同じエラーが発生しました。タイプとしてdatetimeを適用することで解決し、

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "datetime" } })

同様に時間だけに時間を使用します

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "time" } })
0
hispeed