实施例

Question

我需要为我的模型属性捕获日期和时间。在我的模型课中，我有以下

[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日期时间选择器具有以下标记

$('.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'
});

有什么想法吗？感谢

Answer 1

由于 jquery.validate.unobtrusive.min.js 中的MVC错误（即使在MVC 5中），不以任何方式接受日期/日期时间格式，因此可能会发生客户端验证问题< / strong>即可。它不是由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(); } });

Answer 2

我添加了日期格式解析器的修复程序，但我需要将格式设置为“L”，以便它可以在所有语言环境中使用：

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

Answer 3

例如模型：

    [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'，

Answer 4

$(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中

Answer 5

您需要确保您的应用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

Answer 6

$（＆＃39;＃标识＆＃39）。removeAttr（＆＃34;数据-VAL-日期＆＃34）;在脚本

Answer 7

现在，在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;
        });

视图必须是这样的：

       @Html.TextBoxFor(model => model.DOB, new { @class = "datetype", type ="text" })
       @Html.ValidationMessageFor(model => model.DOB)

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

对我有用。

Answer 8

我必须验证dd/mm/yyyy hh:ii并在@lukyer答案的帮助下添加 DD/MM/YYYY HH:mm，它工作正常希望有帮助！

Answer 9

我无法通过其他答案来解决。就我而言，使用TextBoxFor不是强制性的。我改用TextBox。

型号

[Required(ErrorMessage = "Required")]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime MyDate{get;set;}

查看

@Html.TextBox("MyDate", DateTime.Now.ToString(), new {@type="datetime"})

Answer 10

在使用datetimepicker时，本地化或moment.js对我不起作用。拆分小时，然后检查是否有效。我在用格式：“ dd.mm.yyyy hh：ii” 用于datetimepicker。

$.validator.methods.date = function (value, element) {
    var dateL = value.split(" ");
    var date = dateL[0].split(".");
    var hour = dateL.length > 1 ? dateL[1].split(":") : "";
    return this.optional(element) || !/Invalid|NaN/.test(dateL.length > 1 ? new Date(date[2], date[1], date[0],hour[0],hour[1]).toString() : new Date(date[2], date[1], date[0]).toString());
}

Answer 11

如果您使用JQuery非侵入式验证，则可以添加诸如after的规则，并更改客户端验证消息。

      <body>
    <div id="right-panel">
      <div id="inputs">
        <pre>
var origin1 = {lat: -27.524, lng: -48.642};
var destinationA = {lat: -27.594, lng: -48.554};
        </pre>
      </div>
      <div>
        <strong>Results</strong>
      </div>
      <div id="output"></div>
    </div>
    <div id="map"></div>
    <script>
    let departurewindow = new Date('2020-03-10T08:00:00')
      function initMap() {
        var bounds = new google.maps.LatLngBounds;
        var markersArray = [];

        var origin1 = {lat: -27.524, lng: -48.642};
        var destinationA = {lat: -27.594, lng: -48.554};
        var destinationIcon = 'https://chart.googleapis.com/chart?' +
            'chst=d_map_pin_letter&chld=D|FF0000|000000';
        var originIcon = 'https://chart.googleapis.com/chart?' +
            'chst=d_map_pin_letter&chld=O|FFFF00|000000';
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -27.50, lng: -48.5},
          zoom: 10
        });
        var geocoder = new google.maps.Geocoder;

        var service = new google.maps.DistanceMatrixService;
        service.getDistanceMatrix({
          origins: [origin1],
          destinations: [destinationA],
          travelMode: 'TRANSIT',
          unitSystem: google.maps.UnitSystem.METRIC,
          avoidHighways: false,
          avoidTolls: false,
          departureTime: departurewindow,
        }, function(response, status) {
          if (status !== 'OK') {
            alert('Error was: ' + status);
          } else {
            var originList = response.originAddresses;
            var destinationList = response.destinationAddresses;
            var outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';
            deleteMarkers(markersArray);

            var showGeocodedAddressOnMap = function(asDestination) {
              var icon = asDestination ? destinationIcon : originIcon;
              return function(results, status) {
                if (status === 'OK') {
                  map.fitBounds(bounds.extend(results[0].geometry.location));
                  markersArray.push(new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    icon: icon
                  }));
                } else {
                  alert('Geocode was not successful due to: ' + status);
                }
              };
            };

            for (var i = 0; i < originList.length; i++) {
              var results = response.rows[i].elements;
              geocoder.geocode({'address': originList[i]},
                  showGeocodedAddressOnMap(false));
              for (var j = 0; j < results.length; j++) {
                geocoder.geocode({'address': destinationList[j]},
                    showGeocodedAddressOnMap(true));
                outputDiv.innerHTML += originList[i] + ' to ' + destinationList[j] +
                    ': ' + results[j].distance.text + ' in ' +
                    results[j].duration.text + '<br>';
              }
            }
          }
        });
      }

      function deleteMarkers(markersArray) {
        for (var i = 0; i < markersArray.length; i++) {
          markersArray[i].setMap(null);
        }
        markersArray = [];
      }
    </script>

Answer 12

在我的模型中，我有：

[DisplayFormat(DataFormatString = "{0:dd MMM yyyy}", ApplyFormatInEditMode = true)].

在我的脚本中，我有：

    $(function () {
                $('.datepicker').datepicker({
                    changeMonth: true,
                    changeYear: true,
                    format: "dd MMM yyyy"
                });
        });

当我将脚本的格式更改为dd M yyyy时，它起作用了。

Answer 13

这在客户端和服务器端都对我有效，我也安装了moment.js。

$("#datepicker").datepicker();
$('#datepicker').datepicker("option", "dateFormat", "dd/mm/yy");

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

如何修复＆＃39;该字段必须是日期＆＃39;在mvc

13 个答案:

实施例

输出

客户端设置