2

私はasp.net jqueryとhtml5の初心者で、2つの日付フィールドを持つフォームを持つasp.net mvc 4サイトを開発しています。日付を手動で挿入したくないので、このソリューションを使用して単純な日付ピッカーを実装しようとしました:

     <fieldset>
    <legend>RangeDateViewModel</legend>
    <div class="editor-label">
        Start Date
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.StartDate,  new{ @class = "date" })
        @Html.ValidationMessageFor(model => model.StartDate)
    </div>

    <div class="editor-label">
        End Date
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.EndDate,  new{ @class = "date" })
        @Html.ValidationMessageFor(model => model.EndDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>


   }

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/themes/base/css")

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".date").datepicker();
    });
</script>
}

コードは正常に機能しますが、月の 13 日から 30/31 日までの日付を選択すると、常に同じ警告が表示されます。「フィールド StartDate は日付でなければなりません。」および「フィールド EndDate は日付でなければなりません。」

編集:私は尋ねられたように私のViewModelを追加します:

public class RangeDateViewModel
{
    public DateTime StartDate { get; set; }

    public DateTime EndDate { get; set; }

}
4

2 に答える 2

7

月初の日付形式を使用していないことを DatePicker に伝える必要があります。

$.datepicker.setDefaults({
    dateFormat: "dd/mm/yy"
});

ただし、それはおそらく問題の大きな部分ではありません (ブラウザーの文化によっては、日付ピッカーが既に 1 日目の日付形式を使用していた可能性があります)。

また、 MVC バインディングだけでなく、初日の形式とjQuery 検証にも問題があります。これは、さまざまなライブラリすべてによって正しく解析されるため、私が年の最初の日付形式 (yyyy-mm-dd)に固執する主な理由の 1 つです。

于 2013-04-18T16:24:01.947 に答える
1

JQuery はオプションですが、.NET アプローチを取ることもできます。StartDate と EndDate は ViewModel から来ており、DateTime 型であると思いますか?

@Html.EditorFor代わりに使用するだけで@Html.TextBoxFor、すぐにコントロールが DatePicker に変わります。

ViewModel DateTime でデータ注釈属性を指定することにより、日付の表示方法と動作に関する特定のルールを設定することもできます。たとえば、これは StartDate Viewmodel プロパティである可能性があります。

[DisplayFormat(NullDisplayText = "", DataFormatString = "{0:d}")]
[Display(Name = "Start Date")]
public DateTime? StartDate{ get; set; }

さらに C# で datepicker をフォーマットする方法がわからない場合は、問題ありません。JQuery を続行します。

$(':input[data-datepicker]').datepicker({ dateFormat: 'dd/mm/yy' });
于 2013-04-18T17:06:32.687 に答える