DateTimeBox Range Validation on Datagrid or EDataGrid

[eagleeye]

Hi friends, i have some problems to validate one column (datetimebox) in a Datagrid, the column show two datetimebox and I need validate both datetime like some example ( From - To) when From must be less than To

This is my code:

Extension for datetimebox

Code:

<script>
            $.extend($.fn.datagrid.defaults.editors, {
                datetimeboxrange: {
                    init: function(container, options) {
                        var c = $('<div style="display:inline-block"><input class="d1"><input class="d2"></div>').appendTo(container);
                        c.find('.d1,.d2').datetimebox();
                        return c;
                    },
                    destroy: function(target) {
                        $(target).find('.d1,.d2').datetimebox('destroy');
                    },
                    getValue: function(target) {
                        var d1 = $(target).find('.d1');
                        var d2 = $(target).find('.d2');
                        return d1.datetimebox('getValue') + ':' + d2.datetimebox('getValue');
                    },
                    setValue: function(target, value) {
                        var d1 = $(target).find('.d1');
                        var d2 = $(target).find('.d2');
                        var vv = value.split(':');
                        d1.datetimebox('setValue', vv[0]);
                        d2.datetimebox('setValue', vv[1]);
                    },
                    resize: function(target, width) {
                        $(target)._outerWidth(width)._outerHeight(22);
                        $(target).find('.d1,.d2').datetimebox('resize', width / 2);
                    }
                }
            });
</script>

The body of datagrid is the next code

Code:

<table id="dg" 
               title="DataGrid" 
               style="width:950px;height:250px" 
               data-options="
               singleSelect:true,
               data:data
               ">
            <thead>
                <tr>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:250">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>                    
                    <th data-options="field:'fecha_fin_prog',width:250,align:'center'" editor="{type:'datetimeboxrange',options:{validType:'dateRangeCheck',editable:false,readonly:true,currentText:'Hoy',closeText:'Cerrar',okText:'Aceptar',showSeconds:false}}" >Fecha Termino</th>
                    
                </tr>
            </thead>
        </table>

My question is how to program one validator? to avoid  date1 > date2 , my requirement is date1 <= date2

Thanks in advance 

[stworthy]

Please try the extended 'lessThan' and 'greaterThan' validator types.

Code:

$.extend($.fn.validatebox.defaults.rules, {
	lessThan:{
		validator:function(value,param){
			var d = $(param[1]).find(param[0]);
			var parser = d.datetimebox('options').parser;
			var v1 = value;
			var v2 = d.datetimebox('getValue');
			if (v1 && v2){
				var d1 = parser.call(d[0], v1);
				var d2 = parser.call(d[0], v2);
				if (d1 > d2){
					d.datetimebox('validate');
					param[2] = v2;
					return false;
				}
			}
			return true;
		},
		message:'The value must less than {2}'
	},
	greaterThan:{
		validator:function(value,param){
			var d = $(param[1]).find(param[0]);
			var parser = d.datetimebox('options').parser;
			var v1 = value;
			var v2 = d.datetimebox('getValue');
			if (v1 && v2){
				var d1 = parser.call(d[0], v1);
				var d2 = parser.call(d[0], v2);
				if (d1 < d2){
					param[2] = v2;
					return false;
				}
			}
			return true;
		},
		message:'The value must greater than {2}'		
	}
});
$.extend($.fn.datagrid.defaults.editors, {
    datetimeboxrange: {
        init: function(container, options) {
            var c = $('<div style="display:inline-block"><input class="d1"><input class="d2"></div>').appendTo(container);
            c.find('.d1').datetimebox($.extend({},options,{
            	validType:{
            		lessThan:['.d2',c]
            	}
            }));
            c.find('.d2').datetimebox($.extend({},options,{
            	validType:{
            		greaterThan:['.d1',c]
            	}
            }))
            return c;
        },
        destroy: function(target) {
            $(target).find('.d1,.d2').datetimebox('destroy');
        },
        getValue: function(target) {
            var d1 = $(target).find('.d1');
            var d2 = $(target).find('.d2');
            return d1.datetimebox('getValue') + ' : ' + d2.datetimebox('getValue');
        },
        setValue: function(target, value) {
            var d1 = $(target).find('.d1');
            var d2 = $(target).find('.d2');
            var vv = value.split(' : ');
            d1.datetimebox('setValue', vv[0]);
            d2.datetimebox('setValue', vv[1]);
        },
        resize: function(target, width) {
            $(target)._outerWidth(width)._outerHeight(22);
            $(target).find('.d1,.d2').datetimebox('resize', width / 2);
        }
    }
});

[eagleeye]

Thanks a lot, this work perfectly