jQuery日期选择器验证问题

Question

我正在尝试验证两个输入框，用户可以选择日期 - 我已经成功限制了用户只能选择先前的日期，如果他们将第一个文本框选择为今天的日期，则下一个输入框必须是一天后（未来日期）。

提交时，我试图使其验证，以便如果您没有选择其中一个输入框，则会出现错误消息。

<asp:Label ID="lblPickupDate" runat="server" Text="Pick-up Date" CssClass="lblPickup"></asp:Label>
<input type="text" class="datePicker" id="validBeforeDatepicker" value="Please select a date" name="pickupdate" /> <span class="ui-icon ui-icon-calendar"></span>

<asp:Label ID="lblReturnDate" runat="server" Text="Return Date" CssClass="lblReturnDate"></asp:Label>
<input type="text" class="datePicker" id="validAfterDatepicker" value="Please select a date" name="returdate" /> <span class="ui-icon ui-icon-calendar"></span>

$(function () {
    $("#validBeforeDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: 0,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy',
        onClose: function() {$(this).valid();}
    });
});

$(function () {
    $("#validAfterDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: +1,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy',
        onClose: function() {$(this).valid();}
    });
});

我已将“required”设置为true，所以如果您忽略它，它不应该抛出验证错误，表单所在的网站是：http://www.rentruck.co.uk。我也看了这个，但似乎无法复制它http://keith-wood.name/uiDatepickerValidation.html。

- mjcoder

Answer 1

你可以尝试这两个验证库来验证jQuery UI日期选择器。

H5F的工作示例

CSS：

.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}
​

HTML：

<form id="h5ftest">
    <input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>​

jQuery：

$(function() {
  H5F.setup( $( "#h5ftest" ) );

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).focus().blur();
    }
  });
});​

或者 jQuery验证插件 的工作示例

CSS：

.valid {
  background: green;
  color: #fff;
}
.error {
  background: red;
  color: #fff;
}​
​

HTML：

<form id="jQueryValidateTest">
    <input type="date" required>
</form>​

jQuery：

$(function() {

  $( "#jQueryValidateTest" ).validate();

  $( "[type=date]" ).datepicker({
    onClose: function() {
      $( this ).valid();
    }
  });
});​

- chridam

---

太好了！对我来说很有效 :) 我使用了所有的ASP.NET控件，而不是一些HTML控件。 - mjcoder

非常感谢您通过上述解决方案让我的一天变得美好。虽然这个解决方案很好，但我无法在IE中使用它。如何使其在IE中工作？有什么可能性吗？@chridam - gkrishy

@gkrishy，您能否创建一个新问题，详细说明您的问题？ - chridam

@chridam 请查看此链接。我在那里发布了我的新问题。请帮忙解决。提前致谢。 - gkrishy

Answer 2

在 Datepicker 网站 上，在“查看源代码”部分，他们建议在关闭日期选择器时手动检查日期范围：onClose 事件。

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

- KoViMa

---

更改表单的外观 - 我所做的是限制用户选择以前的日期，现在已经排序 - 我正在尝试让用户单击提交按钮时显示错误消息，但我无法在日期选择器输入字段上使用runat =“server”，因为它不起作用。 - mjcoder