jQuery 日期选择器验证问题

Posted 2023-05-09

【中文标题】jQuery 日期选择器验证问题

【英文标题】：jQuery Date Picker Validation Problems

【发布时间】：2012-11-28 22:33:16

【问题描述】：

我正在尝试验证用户选择日期的两个输入框 - 我已经设法限制用户选择上一个日期，如果他们选择第一个文本框作为今天的日期，则下一个输入框必须提前一天（未来的日期）

在提交时，我试图让它验证，所以如果您不选择其中一个输入框，它会给您一条错误消息。

<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

【参考方案1】：

您可以为validating the jQuery UI Datepicker 尝试这两个验证库。

Working Example for H5F

CSS：

.valid 
  background: green;
  color: #fff;

.error 
  background: red;
  color: #fff;

​

HTML：

<form id="h5ftest">
    <input type="date" required pattern="\d2\/\d2\/\d4">
</form>​

jQuery：

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

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

或jQuery Validate plugin 的工作示例

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();
    
  );
);​

【讨论】：

完美！对我来说很好 :) 我使用了所有 ASP.NET 控件，而不是使用一些 HTML 控件。

非常感谢您通过上述解决方案让我过得愉快。虽然解决方案很好，但我无法在 IE 中工作。如何在 IE 中进行这项工作？有没有可能？ @chridam

@gkrishy 您能否创建一个具有您确切问题的新问题？

@chridam ***.com/questions/30161644/… 检查此链接。我在那里发布了我的新问题。做一些必要的事。提前致谢。

【参考方案2】：

在View source 部分的Datepicker site 中，建议他们在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 );
        
    );
);

【讨论】：

改变了表单的外观-我这样做的方式是限制用户选择现在已排序的上一个日期-我试图在用户单击提交按钮时得到它它需要显示错误消息，但我不能在 datepicker 输入字段上使用 runat="server"，因为它不起作用