使用日期時間選擇器進行日期和時間驗證（ASP.Net MVC Core v1.1）

Question

我正在嘗試使用彈出模式在日歷中創建事件，並且在讓jQuery驗證在事件的開始時間和結束時間字段上工作時遇到麻煩。
我無法弄清楚如何相互驗證這兩個字段，因此如果結束時間早於開始時間，則結束時間將無效。

它似乎在第一次彈出表單時顯示的默認日期上部分起作用，但是如果我更改開始日期，它將停止工作。 另一方面，嘗試驗證日期的時間部分從未成功。

查看模型：

public class EventViewModel
{
    public int Id { get; set; }

    public string Title { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd HH:mm}")]
    public DateTime Start { get; set; }

    [Required]
    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd HH:mm}")]
    [DateGreaterThan("Start", ErrorMessage = "End date has to be later than start date")]
    public DateTime End { get; set; }

    public string Color { get; set; }

    public bool AllDay { get; set; }

    [Required]
    public string StudentId { get; set; }

    [Required]
    public int LessonTypeId { get; set; }
}

控制器：

public async Task<IActionResult> Index()
    {
        EventViewModel Event = new EventViewModel { Start = DateTime.Now, End = DateTime.Now.AddMinutes(30) };
        var user = await GetCurrentUserAsync();
        var studentList = await GetTeacherStudentsAsync(user);
        ViewData["StudentList"] = new SelectList(studentList, "Id", "FirstName");
        var lessonTypeList = _context.LessonTypes.Where(l => l.TeacherId.Equals(user.Id));
        ViewData["LessonTypeList"] = new SelectList(lessonTypeList, "LessonTypeId", "Description");
        return View(Event);
    }

索引視圖：

 <head> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" /> <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/gcal.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#calendar').fullCalendar({ customButtons: { createButton: { text: "new event", click: function() { $('#createModal').modal('show'); } } }, header: { left: 'prev,next today createButton', center: 'title', right: 'month,agendaWeek,agendaDay,listWeek' }, defaultView: "month", allDaySlot: false, eventLimit: true, editable: true, navLinks: true, events: "/Calendar/GetEvents", eventDrop: function(event, delta, revertFunc) { alert(event.title + " was dropped on " + event.start.format()); if (confirm("Are you sure you want to make this change?")) { SaveEvent(event); } else { revertFunc(); } }, eventResize: function(event, delta, revertFunc) { alert(event.title + " is now from " + event.start.format() + " to " + event.end.format()); if (confirm("Are you sure you want to make this change?")) { SaveEvent(event); } else { revertFunc(); } } }); $.validator.addMethod("laterThan", function(value, element, params) { var start = params.split(" "); var startDate = new Date(start[0]); var startTime = start[1].split(":"); var end = value.split(" "); var endDate = new Date(end[0]); var endTime = end[1].split(":"); if (startDate == endDate) { if (parseInt(startTime[0], 10) == parseInt(endTime[0], 10)) { return parseInt(startTime[1], 10) > parseInt(endTime[1], 10); } else if (parseInt(startTime[0], 10) < parseInt(endTime[0], 10)) return true; else return false; } return this.optional(element) || startDate < endDate; }, "End time must be later than start time"); var validator = $("#createForm").validate({ rules: { Start: "required", End: { required: true, laterThan: $("#Start").val(), } } }); $(function() { $("#Start").datetimepicker({ format: "Ymd H:i", onChangeDateTime: function(ct) { $(this).valid(); } }); $("#End").datetimepicker({ format: "Ymd H:i", onShow: function(ct) { var start = $("#Start").val().split(" "); this.setOptions({ minDate: start[0] }); }, onChangeDateTime: function(ct) { $(this).valid(); } }); }); }); function SaveEvent(Event) { var dataRow = { Id: Event.id, Start: Event.start, End: Event.end } $.ajax({ method: 'POST', url: '@Url.Action("SaveEvent", "Calendar")', dataType: "json", contentType: "application/json", data: JSON.stringify(dataRow), error: function(result) { alert("Something went wrong... Event Id was: " + Event.id + ", Start Time was: " + Event.start.format()); } }); } function CreateEvent() { var valid = validator.form(); } function DeleteEvent(Event) { var dataRow = { Id: Event.id } $.ajax({ method: 'POST', url: '@Url.Action("DeleteEvent", "Calendar")', dataType: "json", contentType: "application/json", data: JSON.stringify(dataRow), error: function(result) { alert("Something went wrong... Event Id was: " + Event.id) } }) } </script> </head> <body> <div id='calendar'></div> <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="createModalLabel">Create New Event</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <form id="createForm"> <div class="form-group"> <label for="StudentId" class="col-md-2 form-control-label">Student</label> <div class="col-md-10"> <select asp-for="StudentId" asp-items="ViewBag.StudentList" class="form-control"></select> </div> </div> <div class="form-group"> <label for="LessonTypeId" class="col-md-3 form-control-label">Lesson Type</label> <div class="col-md-9"> <select asp-for="LessonTypeId" asp-items="ViewBag.LessonTypeList" class="form-control"></select> </div> </div> <div class="form-group"> <label for="Start" class="col-md-2 form-control-label">Start</label> <div class="col-md-10"> <input asp-for="Start" class="form-control" id="Start" name="Start" /> </div> </div> <div class="form-group"> <label for="End" class="col-md-2 form-control-label">End</label> <div class="col-md-10"> <input asp-for="End" class="form-control" id="End" name="End" /> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="createButton" onclick="CreateEvent()">Create</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </body>

任何建議將不勝感激！

編輯（20/08/2017）-
我嘗試使用Microsoft的指南合並自定義驗證，但這似乎也不起作用（也向視圖模型添加了一個數據屬性）。

驗證類別：

public class DateGreaterThan : ValidationAttribute, IClientModelValidator
{
    private readonly string _earlierDate;

    public DateGreaterThan (string earlierDate)
    {
        _earlierDate = earlierDate;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        ErrorMessage = ErrorMessageString;

        var lateDate = (DateTime)value;
        var otherProperty = validationContext.ObjectType.GetProperty(_earlierDate);
        if (otherProperty == null)
            throw new ArgumentException("Property with this name could not be found");

        var earlyDate = (DateTime)otherProperty.GetValue(validationContext.ObjectInstance);

        if (lateDate <= earlyDate)
            return new ValidationResult(ErrorMessage);

        return ValidationResult.Success;
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        var error = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
        context.Attributes.Add("data-val", "true");
        context.Attributes.Add("data-val-error", error);
    }
}

Answer 1

因此，經過數周的測試不同的選擇並打破了這個想法，我意識到出於以下幾個原因，我嘗試實施的驗證邏輯有誤：

由於我是如何構建自定義jQuery驗證的，因此被比較的開始日期的值僅在加載頁面時才傳遞給驗證一次。 因此，當用戶更改開始字段的輸入時，它沒有改變（因此它保持默認值或為空）。
我完全忽略了日期對象也存儲時間的面孔-因為我試圖手動進行時間比較。

之后，只需花幾分鍾時間便可以通過以下方法解決這些問題：

無需將參數傳遞給自定義驗證，而是直接使用jQuery從表單中輸入開始日期。
擺脫所有的手動小時比較代碼，並進行簡單的日期比較。

現在，自定義驗證代碼被簡化為3行：

        $.validator.addMethod("laterThan", function (value, element) {
            var startDate = new Date($("#Start").val());
            var endDate = new Date(value);

            return this.optional(element) || startDate < endDate;
        }, "End time must be later than start time");

感謝您的建議！

Answer 2

我認為適合您的案例的最佳選擇是“ MVC簡易驗證”。 您可以為案例使用“ GreaterThan”或“ LessThan”數據注釋。 因此，您可以在“ End”屬性的注釋中添加如下內容：

[GreaterThan("Start", ErrorMessage = "Expiry Date must be greater than Activation Date", PassOnNull = true)]

選中此以獲取有關萬無一失的更多信息。

使用日期時間選擇器進行日期和時間驗證（ASP.Net MVC Core v1.1）

問題描述

2 個解決方案

解決方案1
1 已采納 2017-08-30 03:10:21

解決方案2
0 2017-08-08 00:18:46

使用日期時間選擇器進行日期和時間驗證（ASP.Net MVC Core v1.1）

問題描述

2 個解決方案

解決方案1 1 已采納 2017-08-30 03:10:21

解決方案2 0 2017-08-08 00:18:46

解決方案1
1 已采納 2017-08-30 03:10:21

解決方案2
0 2017-08-08 00:18:46