javascript help!

jmack159

hi there,

i need some javascript for a project i'm working on, but this a bit over my head, so i need some help. i have a javascript event selection calendar that can select single or multiple dates, and returns it as a string like: "09/26/2007; 09/27/2007; 09/28/2007; ". i want to make sure that if there are multiple dates selected, that the dates are consecutive, then i need to isolate the first and last dates of the period. then insert the first date in one form field, and the last date in another field. if only one date is selected, then put that date in both the first and last form firm fields. its more the part about checking that the dates are consecutive that i have trouble thinking of a algorithm for, and also isolating the first and lasts dates. I'm ok with getting the values into the fields once they're checked and isolated. I've tried searching online for some examples, but the few i found were not that great, and really did not apply to the situation. any help is greatly appreciated!

thanks!!

--Josh

JPnyc

1 way to do it would be to disable all but the next date in the calendar. That would remove the need to check.

Scriptmaker

As far as checking if dates are consecutive, you could try looking for different "compare dates" functions, such as these:

http://www.mattkruse.com/javascript/date/

http://javascript.internet.com/forms/val-date.html

As long as all you are looking to do is VERIFY the dates are consecutive (not looking to rearrange them too) then after using the split() function on your compiled date string, you can loop through the array and verify each date is greater than the previous one.

As far as isolating the first and last dates, the first date will just be the first one in the array, and to get the last one, just do a count on the array (length I think in JS, not sure) and use the key with the highest number. Make sense?

jmack159

hey, thanks for the replies! sorry i haven't responded in a bit, been busy with classes and every thing... you know how it goes.:rolleyes:

so i've been working on this a bit and this is some code i've come up with (sorry if my javascript is poor):

// the default multiple dates selected,
    // first time the calendar is displayed
    var MA = [];

//function to catch multipule selected dates, and display them
function closed(cal) {

  //get the form fields and assign them to variables
  	var fm = document.getElementById("date");
	var sfm = document.getElementById("sdate");
    var efm = document.getElementById("edate");

  // reset initial content.
  fm.value = "";
  sfm.value = "";
  efm.value = "";

  // Reset the "MA", in case one triggers the calendar again.
  // CAREFUL!  You don't want to do "MA = [];".  We need to modify
  // the value of the current array, instead of creating a new one.
  // Calendar.setup is called only once! :-)  So be careful.
  MA.length = 0;


  // walk the calendar's multiple dates selection hash
  for (var i in cal.multiple) {
  	var d = cal.multiple[i];
    // sometimes the date is not actually selected,
    // so let's check
    if (d) {
      // OK, selected.  Fill an input field or something.
      fm.value += d.print("%m/%e/%Y; ");
      // and push it in the "MA", in case one triggers the calendar again.
      MA[MA.length] = d;
    }
  }
  	//for now use the current input field for the date source
  	var temp = fm.value;
	//now split into an array
	var dates = split("; ", fm.value, -1);
	var x, y, holder;
	FirstDate = new Date();
	SecondDate = new Date();

	for(x = 0; x < dates.length; x++){
		for(y = 0; y < (dates.length-1); y++){
			array_first = split("/", dates[y]);
			array_second = split("/", dates[y+1]);

			FirstDate.setMonth(array_first[0]);
			FirstDate.setDate(array_first[1]);
			FirstDate.setYear(array_first[2]);

			SecondDate.setMonth(array_second[0]);
			SecondDate.setDate(array_second[1]);
			SecondDate.setYear(array_second[2]);

			//here you can modify the condition to work for ascending or descending
			if (FirstDate > SecondDate){
				holder = dates[y+1];
				dates[y+1] = dates[y];
				dates[y] = holder;
			}
		}
	}

	sfm.value = dates[0].print;
	efm.value = dates[dates.length].print;

	cal.hide();
	return true;
};

the function closed() is used as a callback function that the date picker calendar uses when the onClose event is triggered. previously, the function ended with printing the selected dates into fm.value, seperated by a semicolon and a space.

i get an error using the mozilla error console: "split is not defined", where i initially split fm.value into var dates by string "; ". if i get this working then it should sort the dates given (the order the dates are clicked in the calendar determines the order the dates would appear in fm.value), and put the first and last dates into their corresponding fields. i haven't quite gotten to checking if they are consecutive yet. any help with this would be great. thanks much!

JPnyc

As far as I know, the JavaScript split function only takes one parameter, that being the character you want to split the string on.

tekky

JPnyc wrote:
As far as I know, the JavaScript split function only takes one parameter, that being the character you want to split the string on.

Correct, but its also a method of the String objects, not a stand alone function.

Lucky for the poster, I helped rewrite a DatePicker for a JS library and had the "pleasure" of learning a metric crap ton of Javascript Date stuff... here's a slimmed down (well not really slimmed, you have to delete the stuff yourself, I just commented it out) version that should make your life easier 😉

// the default multiple dates selected,
    // first time the calendar is displayed
    var MA = [];

//function to catch multipule selected dates, and display them
function closed(cal) {

  //get the form fields and assign them to variables
  	var fm = document.getElementById("date");
	var sfm = document.getElementById("sdate");
    var efm = document.getElementById("edate");

  // reset initial content. -- little cleaner here too
  fm.value = sfm.value = efm.value = "";

  // Reset the "MA", in case one triggers the calendar again.
  // CAREFUL!  You don't want to do "MA = [];".  We need to modify
  // the value of the current array, instead of creating a new one.
  // Calendar.setup is called only once! :-)  So be careful.
  MA.length = 0;


  // walk the calendar's multiple dates selection hash
  for (var i in cal.multiple) {
  	var d = cal.multiple[i];
    // sometimes the date is not actually selected,
    // so let's check
    if (d) {
      // OK, selected.  Fill an input field or something.
      fm.value += d.print("%m/%e/%Y; ");
      // and push it in the "MA", in case one triggers the calendar again.
      MA.push(d); //correct way to handle adding array items
      //this works... but not as clean
      //MA[MA.length] = d;
    }
  }
  	//for now use the current input field for the date source
  	var temp = fm.value;
	//now split into an array
	//JS uses methods on objects for a lot of things
	//var dates = split("; ", fm.value, -1);
	//split is done with strings like this
	var dates = fm.value.split("; "); //ref: http://www.w3schools.com/jsref/jsref_split.asp
	var x, y, holder;

	//move these date vars into your for loop -- you'll see why in a second
	//create a local function to compare dates...
	var checkDates = function(a,b) {
		//this function returns true if a < b AND a+1=b
		if(a<b) { //date1 is  less than date2... now lets see if they are consecutive...
			var test = new Date(a);
			test.setDate(test.getDate()+1); //add 1 day to date1, note this works EVEN with end of months/end of years
			if(Number(test) == Number(b)) { //Number converts the dates to integers since JS cant compare objects reliably
				return true;
			}
		}
		return false;
	}

	for(x = 0; x < dates.length; x++){
		for(y = 0; y < (dates.length-1); y++){
			//JS understands your date format already... just pass the values into your Date() objects
			FirstDate = new Date(dates[y]);
			SecondDate = new Date(dates[y+1]);

			/* 
			 * trash all this...

				array_first = dates[y].split("/");
				array_second = dates[y+1].split("/");

				FirstDate.setMonth(array_first[0]);
				FirstDate.setDate(array_first[1]);
				FirstDate.setYear(array_first[2]);

				SecondDate.setMonth(array_second[0]);
				SecondDate.setDate(array_second[1]);
				SecondDate.setYear(array_second[2]);

			 */
			if (checkDate(FirstDate,SecondDate)) {
				alert("FirstDate is less than SecondDate AND SecondDate is the day after FirstDate");
				//change this how you need it...
				//holder = dates[y+1];
				//dates[y+1] = dates[y];
				//dates[y] = holder;
			}
		}
	}

	sfm.value = dates[0].print;
	efm.value = dates[dates.length].print;

	cal.hide();
	return true;
};

jmack159

hey there, thanks fort the help!

ok, so it is working correctly sort the dates, and the start (first) date is correctly placed in sfm, but it does not work for efm.

here is the code again:

//function to catch multipule selected dates, and display them
    function closed(cal) {

  	//get the form fields and assign them to variables
  	var fm = document.getElementById("date");
	var sfm = document.getElementById("sdate");
    var efm = document.getElementById("edate");

  	// reset initial content. -- little cleaner here too
  	fm.value = sfm.value = efm.value = "";

  	// Reset the "MA", in case one triggers the calendar again.
  	// CAREFUL!  You don't want to do "MA = [];".  We need to modify
  	// the value of the current array, instead of creating a new one.
  	// Calendar.setup is called only once! :-)  So be careful.
  	MA.length = 0;


  	// walk the calendar's multiple dates selection hash
  	for (var i in cal.multiple) {
  		var d = cal.multiple[i];
    	// sometimes the date is not actually selected,
    	// so let's check
   		if (d) {
      		// OK, selected.  Fill an input field or something.
      		fm.value += d.print("%m/%e/%Y; ");
      		// and push it in the "MA", in case one triggers the calendar again.
      		MA.push(d); //correct way to handle adding array items
      	}
  	}
  	//for now use the current input field for the date source
  	var temp = fm.value;
	//now split into an array
	var dates = temp.split("; ", -1); //ref: http://www.w3schools.com/jsref/jsref_split.asp

	//move these date vars into your for loop -- you'll see why in a second
	//create a local function to compare dates...
	var checkDates = function(a,b){
		//this function returns true if a < b AND a+1=b
		if(a<b) { //date1 is  less than date2... now lets see if they are consecutive...
			var test = new Date(a);
			//add 1 day to date1, note: this works EVEN with end of months/end of years
			test.setDate(test.getDate()+1); 
			//Number converts the dates to integers since JS cant compare objects reliably
			if(Number(test) == Number(b)){ 
				return true;
			}
		}
		return false;
	}

	var x, y, holder;
	for(x = 0; x < dates.length; x++){
		for(y = 0; y < (dates.length-1); y++){
			//JS understands your date format already... 
			//just pass the values into your Date() objects
			FirstDate = new Date(dates[y]);
			SecondDate = new Date(dates[y+1]);

			if(!checkDates(FirstDate,SecondDate)){
				//alert("FirstDate is less than SecondDate AND SecondDate is the day after FirstDate");
				//change this how you need it...
				holder = dates[y+1];
				dates[y+1] = dates[y];
				dates[y] = holder;
			}
		}
	}

	sfm.value = dates[0];
	efm.value = dates[(dates.length-1)];

	cal.hide();
	return true;
};

using efm.value = dates[dates.length]; "undefined" is placed in efm. when i use efm.value = dates[(dates.length-1)]; the field appears blank. thanks for the help, im actually making some progress now!

tekky

Do you have this somewhere I can use my debugging tools with? it would make this easier for both of us 😉

jmack159

i don't have a copy of the project on a public server, but i put this page up on one i have access to. not the full page, but it fully represents the problem. thanks for your help!

http://nutrisci.rutgers.edu/dixonlab/test/test.php

tekky

I'm not seeing the problem 🙁 Maybe tommorow when I'm not on muscle relaxers and vicodin :/

jmack159

i figured it out. should be: efm.value = dates[(dates.length-2)]
because it appears that the last element in the array is empty from the split where i do split("; "). so shifting over one key fixes the problem, and it now works fine. would it be better to pack the keys first so that i can keep it length-1? is that even possible with javascript? thanks so much!!

tekky

Fix your append method.... I woudl do it like this

if (var.length>0) {
   var += ' ' + var2 + ';';
}else{
   var = var2 + ';';
}

Note: no spaces is appended at the end (since you have one, split is giving you an array value with a space in it...)