Question

如何阻止用户输入datetimepicker（文本字段），但允许他们使用datetimepicker。
如何验证一个日期是否在另一个日期之后，并将其显示为内联（并阻止提交），就像ASP.Net MVC3一样。 javascript不是一个接一个地检查它的问题，它是如何显示这个内联消息并阻止提交，将其与其他验证联系起来。

到目前为止我已经

            $("#Save").click(function (e) {
                if (  $('#EndTime').val() < $('#StartTime').val() )
                    alert("AHRR"); // Should add an inline message and NOT submit.
            });

Answer 1

至于阻止输入datetimepicker字段，使用jQuery挂钩到keyup事件，并清除字段中的任何文本。假设您使用的是jquery 1.6或更早版本，代码将如下所示：

$("input[id$='Time']").live("keyup", function() {
    $(this).val("");
});

此外，您可以考虑添加占位符属性，指示用户不要输入日期。

就比较日期验证器而言，您会在此问题中找到一个很好的示例：MVC3 custom validation: compare two dates

Answer 2

我建议使用jQuery's datepicker在客户端进行日期范围限制。您需要禁用输入元素<input readonly/>。我最近实施了一个适用于我的日期范围约束。它将结束日期限制在开始日期的90天内

仅供参考，我停止使用startElement和endElement作为测试，因为此代码目前尚未重复使用，所以我再也没有回来。

// ============================================================================
// FUNCTION: InitializeDates(startElement, endElement)
// PARAMETERS
// ----------
// startElement:    The element which will be initialized as the start-date 
//                  datepicker.
//
// endElement:      The element which will be initialized as the start-date 
//                  datepicker.
//
// DESCRIPTION
// -----------
// InitializeDates updates the start and end dates for non-employees.  It 
// creates a date-picker object on both fields and then constrains the end 
// end date:
// * No date selections available prior to the start date
// * No date selections available after 90 days beyond the start date.
// ----------------------------------------------------------------------------
function InitializeDates(startElement, endElement)
{
    $("#f-start-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        onSelect: function(dateText, inst) { StartDateSelected(dateText, inst) }
    });

    $("#f-end-date").datepicker({
        showOn: "button",
        buttonImage: "images/calendar.png",
        buttonImageOnly: true,
        numberOfMonths: 3
    });

    $("#f-start-date").val('');
    $("#f-end-date").val('');
}

// ============================================================================
// FUNCTION: StartDateSelected(dateText, endElement)
// PARAMETERS
// ----------
// dateText:    The dateText passed from jQuery.datepicker.onSelect
// inst:        The instpassed from jQuery.datepicker.onSelect//
//
// DESCRIPTION
// -----------
// Updates the end-date maxDate and minDate fields to 91 dates from the selected
// start date.
// ---------------------------------------------------------------------------
function StartDateSelected(dateText, inst)
{
    var second = 1000;
    var minute =second * 60;
    var hour = minute * 60;
    var day = hour * 24;

    // The datepicker updates maxDate and minDate based on today's date.  I've
    // got to math out dates so that the maxDate is actually 91 days from the
    // selected date.  
    var todaysDate = new Date();
    var selectedDate = new Date(dateText);          
    var duration = Math.floor((selectedDate - todaysDate) / day) + 91;

    $("#f-end-date").datepicker("option", "minDate", selectedDate);
    $("#f-end-date").datepicker("option", "maxDate", duration);
    $("#f-end-date").val('');
}

Answer 3

禁用输入框：<input type="text" disabled="disabled"/>然后使用日期选择器将值插入文本框。
您可以在表单上禁用提交按钮，直到日期验证正确为止。您可以为此编写自定义javascript，但它只会在客户端进行验证。您还可以在MVC 3中编写一个验证日期的自定义验证器。

有关详细信息，请参阅JQuery Validation。 MVC 3使用JQuery库来执行验证，您可以覆盖这些方法来实现日期验证。

ASP.NET MVC3：验证日期时间和自定义验证消息

3 个答案: