Page 1 of 1

Check on from - to date

Posted: Sun Jun 13, 2010 6:41 am
by Gregor
Problem: I wanted to check in Frombuilder if a 'to-date' is >= than the 'from-date'.

With extensive help from forum member Arnoud, the following solution came up.

Steps:
1. make two new date fields. For the example, let's call them startdate and enddate. The type of these fields is 'datepicker'.
2. in the advanced settings tab of each field, you fill in a field alias and in the following function in the javascript field
- startdate -> start
- Javascript:

Code: Select all

onchange="set_startdate_enddate(this.id, 'start');"
- enddate -> end
- javascript field:

Code: Select all

onchange="set_startdate_enddate(this.id, 'end');"
3. Now some javascript needs to be added to the 'Form Template':

Code: Select all

{* this script can be placed in a external .js file *}
{literal}
    <__script__ language="JavaScript">
    <!--
    /* set start_date / end_date as today's date */ 
    var date_now = new Date();
    var start_date = date_now.getDate()+ "/"+ (date_now.getMonth() + 1) + "/"+ date_now.getFullYear();
    var end_date = date_now.getDate()+ "/"+ (date_now.getMonth() + 1) + "/"+ date_now.getFullYear();
        
	/* check form, throw error is available */ 
       /* change the error-text and the alert to what ever you like */
	function check_me() {
	    var error = "";
	    if (compare_timestamp(start_date, end_date) == false) {
	        error += "\n- Start verlof vanaf mag niet later liggen dan eind verlof.";
	    }
	    if (error != "")	{
	        alert('Het formulier is niet correct ingevuld:'+error);
	        return false;
	    }
	    return(true);
	}
	
	/* compare timestamp end_date versus start_date */
	function compare_timestamp(start_date, end_date) {
	    //alert(start_date);
	    //alert(end_date);
	    var start_date_epoch = date_to_date_as_epoch(start_date);
	    var end_date_epoch = date_to_date_as_epoch(end_date);
            /* check if enddate is later than startdate, in this case the startdate is allowed to be equal to enddate */
	    if (start_date_epoch >= end_date_epoch) {
	        return false;
	    } else {
	        return true;
	    }
        }
	
/* convert fulldate to epoch-time */
function date_to_date_as_epoch(ddmmyyyy) {
	var ddmmyyyy_array    = ddmmyyyy.split("/");
	var date = new Date(0, 0, 0, 0, 0, 0, 0);
	date.setDate(ddmmyyyy_array[0]);
	date.setMonth(ddmmyyyy_array[1] - 1);
	date.setFullYear(ddmmyyyy_array[2]);
	var epoch = date.getTime();
	return epoch;
}
	
	/* read out startdate / enddate from select, option */	
       function set_startdate_enddate(id, startend) {	
		var id;
		var startend;
		//var stripped_id = id.substr(0, id.length -1);

                if (startend == 'start') {
                   // start is 5 letters 
                   var stripped_id = id.substr(0, 5);
                } else {
                   // end is 3 letters
                  var stripped_id = id.substr(0, 3);
                }

		dd_key = stripped_id + '_day';
		mm_key = stripped_id + '_month';
		yyyy_key = stripped_id + '_year';
		
		var dd_obj = document.getElementById(dd_key);
		var dd_index = dd_obj.selectedIndex;
		var dd_var = dd_obj.options[dd_index].value;
		var mm_obj = document.getElementById(mm_key);
		var mm_index = mm_obj.selectedIndex;
		var mm_var = mm_obj.options[mm_index].value;
		var yyyy_obj = document.getElementById(yyyy_key);
		var yyyy_index = yyyy_obj.selectedIndex;
		var yyyy_var = yyyy_obj.options[yyyy_index].value;

		if (startend == 'start') {
		    start_date = dd_var + '/'+ mm_var + '/'+ yyyy_var;
		} else {
		    end_date = 	dd_var + '/'+ mm_var + '/'+ yyyy_var;
		}		
    }    
    -->
    </__script>
{/literal}

{* DEFAULT FORM LAYOUT / pure CSS *}
That's it.

Gregor