出生日期，加入日期和離開日期的有效日期

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); 
    } 
}); 

讓我知道這是否對你有幫助。