Solved: need to validate date time in tabular format

Hi Team,

I have an issue with date time picker. i have 3 date fields that are Pdate,Qdate,bDate , i put the validation while selecting B Date is greater then Q Date and q Date is greater then P Date and B Date is greater then P Date simple you can say that P Date , Q Date and B Date is in increasing order when i am taking date picker it's working fine but when i am using the date time picker its comparing each column time separatly and checking the time also in increasing order but i want only date compare my code is below please check and let me know if you need more clarification . please help me out on my below code where
i m doing wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>



<script>
    function validateDates() {
	 //get values of dates
	 var array = [];
	 var error = false;
	 $(".chkValues:checked").each(function() {
	   var parent = $(this).closest('tr');
	   var last = 0;
	   //var lbl = ['Pdate','PPDate','Bdate'];
	   var lbl = ['Pdate','QDate','Bdate'];
	   $('.date', parent).each(function(i, e) {
	     console.log(parent);
	     var dt = new Date(e.value.split("/").reverse().join("-"));
	     console.log(dt);
	     if (dt.getTime() <= last) {
	    	 alert(lbl[i] + ' date must be greater than ' + lbl[i-1] + ' date');
	       error=true;
	     }
	     last = dt.getTime();
	   });
	   $row = $(this).data('row'); //row1, row2, row3 etc
	   $('input.' + $row).each(function() {
	     array.push($(this).val());
	   });
	 });
	 return error ? [] : array;
	}
	
	$(document).ready(function() {
		
	$('#btnSubmit').click(function(evt){
	   evt.preventDefault();
	   
	   const array = validateDates();
	   console.log(array.length)
	   if (array.length === 0) {
	     //alert("Some issue with dates");
	     return;
	   }
	   $.ajax({
	     type: "POST",
	     url: "Test.jsp",
	     data: {
	    	 array : array 
	    	 },

	     success: function(responseFromServer) {
	       $.each(responseFromServer, function(resultMessageKey, resultMessageValue) {
	    	   window.location.reload();
	    	   $('#content').html(resultMessageKey);
	       });
	     },
	     error: function() {
	       alert(" Ajax call Failed to Update Values  into Database ");
	     }
	   });
	 });

	 $(".date").datetimepicker({
		 format:'d/m/Y H:i'
	 });

	 $('.chkValues').on('click', validateDates);
	}); 
  </script>
  </head>
<body>
    <form action="" id="myForm" method="post">
  <table id="tableData" width="100%" name="tableData">
    <tr>
      <th>Check/UnCheck</th>
      <th>MYear</th>
      <th>P Date</th>
      <th>Q Date</th>
      <th>B Date</th>
    </tr>
    <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row0" type="text" name="mYear" id="mYear0" value="1-2020"></td>
      <td><input class="date row0" id="pDate0" name="dob" type="text" value="24/01/2020 12:50" /></td>
      <td><input class="date row0" id="qDate0" name="dob" type="text" value="26/01/2020 10:50" /></td>
      <td><input class="date row0" id="bDate0" name="dob" type="text" value="28/01/2020 09:40" /></td>
    </tr>
     <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row1" type="text" name="mYear" id="mYear1" value="2-2020"></td>
      <td><input class="date row1" id="pDate1" name="dob" type="text" value="20/02/2020 08:50" /></td>
      <td><input class="date row1" id="qDate1" name="dob" type="text" value="22/02/2020 11:25" /></td>
      <td><input class="date row1" id="bDate1" name="dob" type="text" value="24/02/2020 05:15" /></td>
    </tr>
    <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row2" type="text" name="mYear" id="mYear2" value="3-2020"></td>
      <td><input class="date row2" id="pDate2" name="dob" type="text" value="24/03/2020 02:35" /></td>
      <td><input class="date row2" id="qDate2" name="dob" type="text" value="26/03/2020 22:45" /></td>
      <td><input class="date row2" id="bDate2" name="dob" type="text" value="28/03/2020 20:15" /></td>
    </tr>
  </table>
  <input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>

Open in new window

need to validate date time in tabular format

Premium Content

Premium Content

Why Experts Exchange?

Ask ANY Question

Did You Know?