web-dev-qa-db-ja.com

mvcのdatetimeプロパティの「フィールドは日付でなければなりません」の修正方法

モデルプロパティの両方の日付と時刻をキャプチャする必要があります。私のモデルクラスには次のものがあります

[Required]
[DataType(DataType.DateTime)]
public DateTime? CallBackDate { get; set; }

有効な日時を入力すると（例：28/05/2015 15:55）このエラーが発生し続けるThe field CallBackDate must be a date.

私は同様の質問を見て、さまざまな答えを試しましたが、これを取り除くものは何もないようです。控えめなクライアント側の検証を使用していますが、無効にすることはできません。

入力フィールドのソースには次のマークアップがあります

<input autocomplete="off" class="jquery_datetimepicker form-control hasDatepicker" data-val="true" data-val-date="The field CallBackDate must be a date." data-val-required="The CallBackDate field is required." id="CallBackDate" name="CallBackDate" placeholder="Enter your CallBackDate" type="text" value="">

また、jquery datetime pickerには次のマークアップがあります

$('.jquery_datetimepicker').datetimepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 0,
    showWeeks: true,
    showStatus: true,
    highlightWeek: true,
    numberOfMonths: 1,
    showAnim: "scale",
    showOptions: {
        Origin: ["top", "left"]
    },
    timeFormat: 'hh:mm tt'
});

何か案は？ありがとう

jqueryasp.net-mvcjquery-uiasp.net-mvc-5
14
rumi

クライアント検証の問題は、jquery.validate.unobtrusive.min.jsのMVCバグ（MVC 5でも）が原因で発生する可能性がありますしない任意の方法で日付/日付時刻形式を受け入れます。 datepickerやブラウザが原因ではありません。残念ながら、手動で解決する必要があります。

私の最終的に機能するソリューション：

前に含める必要があります：

@Scripts.Render("~/Scripts/jquery-3.1.1.js")
@Scripts.Render("~/Scripts/jquery.validate.min.js")
@Scripts.Render("~/Scripts/jquery.validate.unobtrusive.min.js")
@Scripts.Render("~/Scripts/moment.js")

Moment.jsをインストールするには、次を使用します。

Install-Package Moment.js

そして、最終的に日付形式パーサーの修正を追加できます。

$(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, "DD.MM.YYYY", true).isValid();
    }
});
32
lukyer

日付形式パーサーの修正を追加しましたが、すべてのロケールで機能するように形式を「L」に設定する必要がありました。

$(function () {
$.validator.methods.date = function (value, element) {
    return this.optional(element) || moment(value, "L", true).isValid();
}
});
8
IkManu

modelの例：

    [Display(Name = "Insert Start Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }

    [Display(Name = "Insert End Date")]
    [Required(ErrorMessage = "You must specify the date of the event!")]
    [DataType(DataType.DateTime, ErrorMessage = "Podaj prawidłową datę wydarzenia")]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm}", ApplyFormatInEditMode = true)]
    public DateTime EndDate { get; set; }

そして表示私のサンプルコード：

<script>
$('#startDate').datetimepicker({
    onClose: function (dateText, inst) {
        var endDateTextBox = $('#endDate');
        if (endDateTextBox.val() != '') {
            var testStartDate = new Date(dateText);
            var testEndDate = new Date(endDateTextBox.val());
            if (testStartDate > testEndDate)
                endDateTextBox.val(dateText);
        }
        else {
            endDateTextBox.val(dateText);
        }
    }, dateFormat: 'yy-mm-dd',
    onSelect: function (selectedDateTime) {
        var start = $(this).datetimepicker('getDate');
        $('#endDate').datetimepicker('option', 'minDate', new Date(start.getTime()));
    }
}); ....

これにより、プラスの効果が生じました。dateFormat： 'yy-mm-dd'、

5
voltdev
$(function () {
    $.validator.addMethod('date',
    function (value, element) {
        if (this.optional(element)) {
            return true;
        }
        var valid = true;
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        }
        catch (err) {
            valid = false;
        }
        return valid;
    });
    $(".datetype").datepicker({ dateFormat: 'dd/mm/yy' });
});

このコードをファイルdatepicker.jsに入れ、このファイルをhtmlに含めます

3
Vaibhav Nagar

アプリケーションの Culture が適切に設定されていることを確認する必要があります。

例

次の例は、カルチャが日付解析にどのように影響するかを示しています。 https://dotnetfiddle.net/vXQTAZ

DateTime dateValue;
string dateString = "28/05/2015 15:55";

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("en-US"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid en-US date.");
}
else
{
    Console.WriteLine("Not a valid en-US date.");
}

if (DateTime.TryParse(dateString, CultureInfo.CreateSpecificCulture("fr-FR"), DateTimeStyles.None, out dateValue))
{
    Console.WriteLine("Valid fr-FR date.");
}
else
{
    Console.WriteLine("Not a valid fr-FR date.");
}

出力

Not a valid en-US date.

Valid fr-FR date.

クライアント側の設定

また、クライアント側のバリデーターが適切にカルチャ/グローバリゼーションを使用していることを確認する必要があります。 MVCでjQuery validateプラグインを使用している場合は、ニーズに合わせてプラグインを変更するのに役立つこの拡張機能を参照してください： http://blog.icanmakethiswork.io/2012/09/globalize-and-jquery-validate.html

2
kspearrin

$（ '＃Id'）。removeAttr（ "data-val-date"）;スクリプトで

0
kinzzy goel
  1. 次に、additional-methods.jsファイルに次のメソッドを追加し、このファイルをプロジェクトに含めます。
      $.validator.addMethod('date',
        function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            var valid = true;
            try {
                $.datepicker.parseDate('dd/mm/yy', value);
            }
            catch (err) {
                valid = false;
            }
            return valid;
        });
  1. ビューは次のようにする必要があります。
       @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type ="text" })
       @Html.ValidationMessageFor(model => model.DOB)

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

わたしにはできる。

0
Kiran Nandan

検証する必要がありますdd/mm/yyyy hh:iiと@lukyerの回答の助けを借りて、DD/MM/YYYY HH:mmそしてそれはうまく機能しているこのヘルプを願っています！

0
Mustufa