validate date2 greater than date1

[crosemffet]

hello everybody and thanks in advance for your support.
I need to establish a date interval, example date 1:2016-01-01 and date 2:2016-02-01
so, my form has 2 date box.
the idea is to validate that date2 must be always greater than date 1 (obviously)
my code is:
<input class="easyui-datebox" label="evalFrom:" labelPosition="top" style="width:200px;" id="evalFrom" name="evalFrom" required data-options="formatter:myformatter,parser:myparser,editable:false,required:true">
<input class="easyui-datebox" label="evalTo:" labelPosition="top" style="width:200px;" id="evalTo" name="evalTo" required data-options="formatter:myformatter,parser:myparser,editable:false,required:true">

I know that I need to extend the $.fn.validatebox.defaults.rules but I'm not sure how to  make it.
note: I'm also using this date format: YYYY-MM-DD
can anybody point me in the right direction?
thanks in advance,

[jarry]

Please look at this topic http://www.jeasyui.com/forum/index.php?topic=2985.msg6641#msg6641

[crosemffet]

hello jarry and thanks for your reply.
I've already try the example you show me, but is not working.
I know your example works, but the problem seems to be in my code, since I'm using options: "formatter:myformatter,parser:myparser" to format the dates in format "YYYY-MM-DD".
should I make some modification to your example provided to understand the "YYYY-MM-DD" format in both date fields?
thanks again for your support,

[jarry]

Please try the following code:

Code:

<script type="text/javascript">
function myformatter(date){
	var y = date.getFullYear();
	var m = date.getMonth()+1;
	var d = date.getDate();
	return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
	if (!s) return new Date();
	var ss = s.split('-');
	var y = parseInt(ss[0],10);
	var m = parseInt(ss[1],10);
	var d = parseInt(ss[2],10);
	if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
		return new Date(y,m-1,d);
	} else {
		return new Date();
	}
}
$.extend($.fn.validatebox.defaults.rules, {
	greaterThan:{
		validator: function(value,param){
			var v1 = $(param[0]).datebox('getValue');
			var d1 = myparser(v1);
			var d2 = myparser(value);
			return d2 > d1;
		},
		message: 'Please select a greater date.'
	}
});
</script>
<input class="easyui-datebox" label="evalFrom:" labelPosition="top" style="width:200px;" id="evalFrom" name="evalFrom" required data-options="formatter:myformatter,parser:myparser,editable:false,required:true">
<input class="easyui-datebox" label="evalTo:" labelPosition="top" style="width:200px;" id="evalTo" name="evalTo" required data-options="formatter:myformatter,parser:myparser,editable:false,required:true,validType:'greaterThan[\'#evalFrom\']'">

[crosemffet]

jarry, thanks again for your intervention.
unfortunately the code you provided doesn't work.
I don't know where the problem is, I've put the code online just to let you check it.
please try the following url: https://neron.telegram.press/test_1.php
the idea is to check the process: if the date fields are empty you will see the red color in the fields.
if the second date is before the first date, the red color doesn't show (the event is not fired).
the complete code of the test_1.php is as follows:
#################
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/demo.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

<center>
<form method="post" name="mainForm" id="mainForm" accept-charset="UTF-8"> 
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="width:100%;max-width:800px;padding:30px 60px;">
      <table width="100%" border="0">

      <tr>
          <td valign="middle" align="center">
            <div style="margin-bottom:20px">
                <input class="easyui-datebox" label="dateFrom:" labelPosition="top" style="width:200px;" id="evalFrom" name="evalFrom" required data-options="formatter:myformatter,parser:myparser,editable:false,required:true">
            </div>
        </td>
        </tr>

      <tr>
          <td valign="middle" align="center">
            <div style="margin-bottom:20px">
                <input class="easyui-datebox" label="dateTo:" labelPosition="top" style="width:200px;" id="evalTo" name="evalTo" data-options="formatter:myformatter,parser:myparser,editable:false,required:true,validType:'greaterThan[\'#evalFrom\']'">
            </div>
        </td>
        </tr>
            
     </table>
    
    </div>
    <br />
      
   <table width="100%" border="0">
     <tr>
      <td width="60%">&nbsp;</td>
      <td width="40%"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a></td>
     </tr>
   </table>

</form>
</center>
<script>
function myformatter(date){
   var y = date.getFullYear();
   var m = date.getMonth()+1;
   var d = date.getDate();
   return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
}
function myparser(s){
   if (!s) return new Date();
   var ss = (s.split('-'));
   var y = parseInt(ss[0],10);
   var m = parseInt(ss[1],10);
   var d = parseInt(ss[2],10);
   if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
      return new Date(y,m-1,d);
   } else {
      return new Date();
   }
}
function submitForm(){
   $('#mainForm').attr('action', 'test_2.php');
   $('#mainForm').form('submit');
}
</script>

[jarry]

You are missing the definition of the 'greaterThan' validator. Please look at this example http://code.reloado.com/oqayel/edit#preview. It works fine.

[crosemffet]

dear Jarry,  you are right !.
after 20 hours of code writing, I better go to sleep,
thanks again for your support.