出生日期，加入日期和离开日期的有效日期

Question

我有三个文本框BirthDate,JoiningDate & LeavingDate。

现在我想的是： -

1. Joining date和Leaving date应不大于Birthdate

2. Leaving Date应不大于Joining Date和BirthDate

我有使用DatePicker。

这里是JS代码： -

$(function() { 
     $("[id$=mainContent_txtdateofbirth], [id$=mainContent_txtdoj], [id$=mainContent_txtdol]").datepicker({ 
      textboxImageOnly: true, 
      textboxImage: 'images/calendar.png', 
      changeMonth: true, 
      changeYear: true, 
      dateFormat: "yy/mm/dd", 
      yearRange: "-40:+0", 
      maxDate: new Date(), 
     }); 
    }); 

的三个文本框是： -

<asp:TextBox ID="txtdateofbirth" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox> 
    <asp:TextBox ID="txtdoj" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox> 
    <asp:TextBox ID="txtdol" CssClass="form-control" runat="server" ValidationGroup="AddNew"></asp:TextBox> 

修订ASPX CODE： -

<tr> 
     <td style="vertical-align: top;"> 
      <label class="control-label" for="dob">Date of Birth</label></td> 
     <td> 
      <div class="control-group"> 
       <div class="controls"> 
        <asp:TextBox ID="txtdateofbirth" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox> 
        <asp:RequiredFieldValidator ID="reqdob" runat="server" CssClass="error-class" ControlToValidate="txtdateofbirth" ErrorMessage="Please select the date of birth" ValidationGroup="AddNew"></asp:RequiredFieldValidator> 
       </div> 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td style="vertical-align: top;"> 
      <label class="control-label" for="subject">Date of Join</label></td> 
     <td> 
      <div class="control-group"> 
       <div class="controls"> 
        <asp:TextBox ID="txtdoj" Wrap="true" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox> 
        <asp:RequiredFieldValidator ID="reqdoj" CssClass="error-class" runat="server" ControlToValidate="txtdoj" ErrorMessage="Please add the date of joining" ValidationGroup="AddNew"></asp:RequiredFieldValidator> 
       </div> 
      </div> 
     </td> 
    </tr> 

    <tr> 
     <td style="vertical-align: top;"> 
      <label class="control-label" for="subject">Date of Leaving</label></td> 
     <td> 
      <div class="control-group"> 
       <div class="controls"> 
        <asp:TextBox ID="txtdol" CssClass="form-control" autocomplete="off" runat="server" ValidationGroup="AddNew"></asp:TextBox> 
       </div> 
      </div> 
     </td> 
    </tr> 

Answer 1

Demo

验证功能

这将如果表单有效或假返回true

var validateData = function() { 
    var bday = $('#birthdate').val(); 
    var jday = $('#joiningdate').val(); 
    var lday = $('#leavingdate').val(); 

    if (bday && jday && bday > jday) {return} 
    if (bday && lday && bday > lday) {return} 
    if (jday && lday && jday > lday) {return} 

    return true; 
}; 

被称为onClose事件datepicker，之后可以显示错误消息。随意更改错误显示方法。

onClose: function() { 
     validateData() ? $('#errormsg').hide() : $('#errormsg').show(); 
    } 

更新

要添加一些CSS错误消息添加类像

<div id="errormsg" class="error-msg">Invalid date</div> 

然后你可以移动display: none;到你的CSS

更新

Demo为必填项

Answer 2

我真的不明白如何你希望你的代码看起来。不管怎么说，这是一个简单的验证，你可以把一个功能，如果你想：

function validateMyForm() { 
    return ($('#txtdoj').val() <= $('#txtdateofbirth').val() 
     && $('#txtdol').val() <= $('#txtdateofbirth').val() 
     && $('#txtdol').val() <= $('#txtdoj').val() 
     && $('#txtdol').val() <= $('#txtdateofbirth').val()); 
} 

，如果它不是

Answer 3

完成JS小提琴是here

首先亮相让我假定你实际上意味着以下

• 加入日期不应小于生日
• 离开日期不应该是小于加入日期和出生日期

而不是其他方式，请纠正我，如果我错了。

现在要寻求解决方案，您可以通过使用jQuery验证插件来实现此目的。只需将自定义验证功能添加到插件并根据它验证表单。请参阅示例代码

<form id="myForm"> 
    <p>Date Of Birth: 
     <input type="text" name="datepicker_dob" id="datepicker_dob" /> 
    </p> 
    <p>Date Of Joining: 
     <input type="text" name="datepicker_doj" id="datepicker_doj" /> 
    </p> 
    <p>Date Of Leaving: 
     <input type="text" name="datepicker_dol" id="datepicker_dol" /> 
    </p> 
    <button type="button" id="saveButton">Save</button> 
</form> 

初始化这样

$(document).ready(function() { 
    $("[id$=datepicker_dob],[id$=datepicker_doj],[id$=datepicker_dol]").datepicker({ 
     // add this option when you initialise the datetime picker, this will 
     // validate date based on our custom validation rule when we select a date 
     onSelect:function(){ 
      $(this).valid(); 
     } 
    }); 
}); 

接下来的日期时间选取器添加自定义的验证功能

$.validator.addMethod("dateValidatorLE", function(value, element, params) { 

    var isDateValid = true; 
    $(params).each(function(i) { 
     // alert($(params[i]).val()); 
     isDateValid &= (Date.parse(value) > Date.parse($(params[i]).val())) 
    }); 
    return this.optional(element) || isDateValid; 
}, $.validator.format('general error message')); 

的验证形式

$('#myForm').validate({ 
    rules: { 
     datepicker_doj: { 
      dateValidatorLE: ['#datepicker_dob'] 
     },   
     datepicker_dol: { 
      dateValidatorLE: ['#datepicker_dob', '#datepicker_doj'] 
     } 
    }, 
    messages: { 
     datepicker_doj: { 
      dateValidatorLE: 'DOJ must be greater than DOB' 
     },   
     datepicker_dol: { 
      dateValidatorLE: 'DOL must be greater that DOJ and DOB' 
     } 
    }, 
    onkeyup: function(e) { 
     this.element(e); 
    } 
}); 

让我知道这是否对你有帮助。