4

私はMVCで働いています。「Date」コントロールで jQuery datepicker を使用しました。datepicker を呼び出すための jquery コードを以下に示します。

    $(document).ready(function () {
     $('.date').datepicker({ dateFormat: "dd/mm/yy" });
     });

私のDateTime Partialviewは次のとおりです。

     @Html.TextBoxFor(x => x.Value, new { id = Model.Name, name = Model.Name, @class = "date", @readonly = true })

私のDateTimeViewModelプロパティは次のとおりです。

    public string Name { get; set; }

   public DateTime? Value { get; set; }

この部分ビューをフォームで使用しています。フォームに完全に入力して送信をクリックすると、フォーカスが再び日付ピッカーに移動して、日付が再び取得されます。何度も何度も発生し、フォームを送信できなくなります。私はクロムでこのコントロールをデバッグし、以下に示すように日付が無効であることに気付きました:-

    <input class="ff date hasDatepicker input-validation-error" data-val="true" data-val-date="The field Value must be a date." name="Fields[Lea_ex1_47].Value" readonly="True" type="text" value="" id="dp1369308655980">

編集 遅くなって申し訳ありませんが、私も今それを観察しました。私の日付ピッカーは、毎月1から12までの日付のみを取ります。つまり、30/31 日のうち、日付は 1 から 12 (検証 true) になり、その他の 13 から 31 は検証エラー (検証 false) になります。

なぜこれが起こっているのか理由を教えてください。どうすればこれを取り除くことができますか？

前もって感謝します..

4

4 に答える 4

3

それはおそらくこの部分です：

{ dateFormat: "dd/mm/yy" }

これは .NET が日付を表示するデフォルトの方法ではないため、jQuery はそれを解析できない可能性があります。日が月の前に来て、年が 2 桁であることを確認する必要があります。

編集：日が12を超えるとコントロールが失敗するという編集を読んだ後、これは間違いなくそれを引き起こしています。ただし、以下で説明した問題は、日付形式を修正した後でも問題を引き起こす可能性があります。

その他の潜在的な問題:

HTML 属性を設定していreadonlyますが、なぜそれを行うのかわかりません。

@readonly = true

これは何もしないか、datepicker のポップアップを抑制します。

最後に、名前と ID を手動で設定していることに気付きました。

id = Model.Name, name = Model.Name

それが のエディタModel.Valueなのに、なぜ に接続しているのModel.Nameですか? ページ内に同じ ID を持つものが他にありませんか? 他のフォーム フィールドに同じ名前はありませんか? その場合、クライアントとサーバーの両方で問題が発生する可能性があります。それらを指定する必要さえありません。MVC ヘルパー メソッドでそれを行うことができます。

何をすべきか：

まず、一部の人が示唆しているように ViewModel に注釈を付けますが、形式が正しいことを確認してください。

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/mm/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

これで問題は解決しますが、Razor コードからid、name、および属性を完全に削除することも検討してください。readonly

HTML5 を使用している場合、代わりEditorForにTextBoxFor. これにより、HTML5DateTime入力タイプが使用されるようになります。jQuery-UI で TextBox の処理に問題が発生することはありませんが、害はありません。

@Html.EditorFor(x => x.Value, new { @class = "date" })
于 2013-05-23T17:26:49.100 に答える
2

UIHint簡単に設定できる Datepickerを使用する

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Due Date")]
public Nullable<System.DateTime> Value{ get; set; }

このパスShared/EditorTemplatesにDateTime.cshtmlファイルを追加します。

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" })
}
else
{
    @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<script type="text/javascript">
    $(function () {
        $("#@id").datepicker({
            dateFormat: "mm/dd/yy"
        });
    });
</script>
于 2013-05-23T12:14:01.080 に答える