JavaScript - How To Validate Time Where To-time Must Be Greater Than From-time.

hi,

can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds

regards,
verve

This is my first time doing JavaScript I don't what I did wrong here, but the problem its not showing up the current date and time.
Code:

<script language = "JavaScript" type="text/javascript"> 
now = new Date(); 
localtime = now.toString();
 utctime = now.GMTString();
 document.wite("<b>localtime</b>" + localtime + "</br>");
 document.write("<b>utctime</b>" + utctime); 
 </script>

This is what supposed to look like


I have tried using different browser chrome,IE9,Maxtor, and Opera my OS is Win7

Hi - I have a date in my javascript like this:

Mon Dec 12 00:00:00 UTC+0430 2011

I need to convert it to a date without the offset (the +0430).

I actually changed my computer's timezone to generate this offset - we have uses placing orders on our site who don't use UTC and it's throwing our orders out as they need to select a delivery date but it's passing the date with the offset.

How do I convert a date to UTC time?

Thanks

Hi there! Well, I recently found the Image clock code, and I am loving it! But, I would like it to only display pacific time, not retrieve the time from a users browser.

Here's my code:

Code:

<script type="text/javascript">

/***********************************************

* JavaScript Image Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["/users/1712/49/18/66/album/c012.png", "/users/1712/49/18/66/album/c112.png", "/users/1712/49/18/66/album/c211.png", "/users/1712/49/18/66/album/c311.png", "/users/1712/49/18/66/album/c411.png", "/users/1712/49/18/66/album/c511.png", "/users/1712/49/18/66/album/c611.png", "/users/1712/49/18/66/album/c711.png", "/users/1712/49/18/66/album/c811.png", "/users/1712/49/18/66/album/c911.png", "/users/1712/49/18/66/album/cam11.png", "/users/1712/49/18/66/album/cpm13.png", "/users/1712/49/18/66/album/ccolon11.png"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}

	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
	}

	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"></span>')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}

	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML

	}


</script>




<DIV STYLE="position:absolute; top:260px; left:215px; width:109px; height:28px">
<FONT SIZE="+2" COLOR="black">
<TABLE BORDER="0" cellpadding="10" CELLSPACING="0" TOP MARGIN="0">
<TR>

<TD WIDTH="109" HEIGHT="28" BACKGROUND="/users/1712/49/18/66/album/clock210.png" VALIGN="top">

<script type="text/javascript">

new imageclock.display()

</script>

</TD>
</TR>
</TABLE>
</DIV>

Much appreciated!

Hi brothers and sisters,

My first post here. I am trying to do a self-test system for my small company, everything is going smoothly so far however, I am facing some problem with setting a cut off time for doing the test. For example, my staff could not go in to the system after 8pm. Anyone had any idea on how to do it?? I have only some basic knowledge of php which I learn in school thus setting time limit might be too advance for me thus need you guys help.

Thank alot

Hi,

I have very little JS knowledge, on a scale of 1 - 10 I would give me a 1, so apologies if I have this completely backwards.

AIM:

I have a form that takes in times a person was doing an activity, and you can enter multiple times & activities in one go.

e.g.

Person A | Lunch | 12:00 - 13:00
| Meeting | 13:30 - 14:00


I need the JS to validate that Activity B (Meeting in the above example) does not overlap with Activity A (Lunch in the above example). It also needs to check this for all activity's so that none overlap with each other else output error.

I have managed to do this server side in PHP and will include the code as it may help show what I am trying to do better than Im explaining.


PHP Code

Code:

	$Code = $_POST['code'];
	$NumberofCodes = count($Code);
	$Start = array();
	$_POST['starthr'] = array_values($_POST['starthr']);
	$_POST['startmin'] = array_values($_POST['startmin']);
	$i = 0;
	foreach($_POST['starthr'] as $key1 => $value1) {
	$Start[(int)$i] = $_POST['starthr'][$key1] .":". $_POST['startmin'][$key1];
	$i++;
	}
	$Stop = array();
	$_POST['stophr'] = array_values($_POST['stophr']);
	$_POST['stopmin'] = array_values($_POST['stopmin']);
	$i = 0;
	foreach($_POST['stophr'] as $key1 => $value1) {
	$Stop[(int)$i] = $_POST['stophr'][$key1] .":". $_POST['stopmin'][$key1];
	$i++;
	}
		
	$i = 0;
	$j = 1;
	
	while ($i < $NumberofCodes){
		while(($j-1) < $NumberofCodes){
		
	if (($Start[$j] > $Start[$i] && $Start[$j] < $Stop[$i]) || ($Stop[$j] > $Start[$i] && $Stop[$j] <= $Stop[$i])) 
	{
		//Stop form executing and provide error information.
	}
	$j++;
	}
	$i++;
	}

JS Code (What I could manage)

Code:

	var i = 0;
	var j = 1;
	var Start = new Array();
	var Stop = new Array();
	var aa = new Array();
	var bb = new Array();
	
	while (i < counter){
		while((j-1) < counter){
	Start[i] = document.myform.elements('starthr['+i+']').value + ":" + document.myform.elements('startmin['+i+']').value;
	Stop[i] = document.myform.elements('stophr['+i+']').value + ":" + document.myform.elements('stopmin['+i+']').value;
	var a = toDate(Start[i],"h:m")
	var b = toDate(Stop[i],"h:m")
	
	aa[i] = a;
	bb[i] = b;
	
	
	function toDate(dStr,format) {
			var now = new Date();
	 		now.setHours(dStr.substr(0,dStr.indexOf(":")));
			now.setMinutes(dStr.substr(dStr.indexOf(":")+1));
			now.setSeconds(0);
		return now;
	
}	
	if ((aa[j] > aa[i] && aa[j] < bb[i]) || (bb[j] > aa[i] && bb[j] <= bb[i])) 
	{
		//Fail validation
	}
	else
	{
	        //Pass Validation
	}
	j++;
	}
	i++;
	}

Any help on this would great.




Thanks
Barry

I wanted to make script that will work fine with pictures. For example if its 21:21 there are pictures of those numbers instead of normal mechanic numbers.
I tested this code:
Code:

<script type="text/javascript">
function Time() {
var Date1=new Date()
var Hours1=Datum.getHours()
var Minutes1=Datum.getMinutes()
if (Hours1==21 & Minutes1==12)
document.write("<img src='http://img839.imageshack.us/img839/2383/47819853.png'" + "<img src='http://img714.imageshack.us/img714/9003/asdadajy.png'" + "<img src='http://img210.imageshack.us/img210/2020/34813695.png'")
}
</script>

And have this:
Code:

<button type="button" onClick="vreme()">Click</button>

That work fine for time 21:12 but if i want to work for all pictures i will ahve to write different code like:
if ...
elseif...
elseif...
And plenty of those codes which is totaly wrong. What should I do?

I have created a kdate.js file in Kannada to display current, day,month,date,year and time.While the day,month are displayed in kannada the date,year time are shown in english.I want them to display in Kannada.Will some one guide me how I can do this and what are changes that to make in the javascript code.I have used unicode while writing Kannada script.
I also want to know how to increase and change font color and the time element to be displayed on the next line.
Please help and guide me.
thanks
js file in the form the text is sent as an attachment.

Hello everyone...

I have Javascript code here which gives the time (hours, minutes, seconds) and date (year, month, day), and it updates every second. What I want to do is redirect to a certain page every 10 minutes, on the 10th, 20th, 30th, 40th, 50th and 60th minutes.

The time displays and updates every second, but no redirect happens. Please fix my code! Thanks in advance.


Code:

<tr><td align="center">
<SPAN ID="clock"><?php echo date('d/m/Y <\b\r> H:i:s', time()); ?></SPAN>
</td></tr>

<SCRIPT type="text/javascript">

	var year2 = <?php echo date('Y', time()); ?>;
	var month2 = <?php echo date('m', time()); ?>;
	var day2 = <?php echo date('d', time()); ?>;
	var hour2 = <?php echo date('H', time()); ?>;
	var minute2 = <?php echo date('i', time()); ?>;
	var second2 = <?php echo date('s', time()); ?>;
	var daysInMonth = <?php echo date('t', time()); ?>;

	function updateClock()
	{
		second2+=1;
		if(second2>=60){second2=0;minute2+=1;}
		if(minute2>=60){minute2=0;hour2+=1;}
		if(hour2>=24){hour2=0;day2+=1;}
		if(day2>daysInMonth){day2=0;month2+=1;}
		if(month2>12){month2=0;year2+=1;}
		byt(nollor(day2)+"/"+nollor(month2)+"/"+year2+"<br />"+nollor(hour2)+":"+nollor(minute2)+":"+nollor(second2),"clock");

		updateUtlogg();
		redirect(minute2,second2);

	}

	var utloggUtloggad = false;

	function updateUtlogg()
	{
		if(utloggUtloggad)
		{
			return true;
		}

		return(true);
	}

	function nollor(nummer)
	{
		if(nummer<10)
		{
			tmp="0"+nummer;
		}
		else
		{
			tmp=nummer;
		}
		return tmp;
	}

	function byt(txt,lager)
	{
		if(document.getElementById(lager))
		{
			document.getElementById(lager).innerHTML=txt;
		}
	}


	function redirect(x,y)  {
	if(nollor(x)==0 && nollor(y)==0 || nollor(x)==10 && nollor(y)==0 || nollor(x)==20 && nollor(y)==0 || nollor(x)==30 && nollor(y)==0 || nollor(x)==40 && nollor(y)==0 || nollor(x)==50 && nollor(y)==0)
			{
	setTimeout("location.href = updateInterval.php;",0);
			}
				}


	var oInterval = window.setInterval("updateClock()",1000);

</SCRIPT>

Hi, back for more help

Im doing a hire price script for my works website, i have two time input input boxes using <select> function. I need a script to figure out the time diffrence between the two times, and if the second time is 3 or more hours before the first time it adds a days charge, well, it dosent even need to figure out the exact difference between the two, only need to see if the second is > by 3 or more, here is my script

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" profile="http://gmpg.org/xfn/11">
<head>
	<meta http-equiv="Content-Type" content="UTF-8" />
	<title>Car Hire Ottershaw | Van Hire Ottershaw | Car Rental | Van Rental </title>
	<meta name="keywords" content="Car Hire Ottershaw, Surrey, Van Rental Ottershaw, Van Hire Ottershaw, Car Rental Ottershaw,  " />
	<link rel="stylesheet" href="layout-ff.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

	<!-- put java here................................. -->
<script language="javascript" type="text/javascript" src="datetimepicker.js">

//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com 

</script>

	<!-- stop java here ................................. -->

	</head>
	<body>

		<!-- content ................................. -->
		<form name="date">
			<select name="car" id="car">
				<option value="A">Manual Panda / Auto Smart</option>
				<option value="B">Manual Clio 3 3Dr or 5 Dr / Manual Picanto</option>
				<option value="CD">Manual Rio / Clio 1.2T / Auto Picanto</option>
				<option value="E">Manual Venga / Auto Rio</option>
				<option value="F">Auto Focus / Cee'd / Manual Megane</option>
				<option value="G">Auto Cee'd Estate / Manual Megane Estate</option>
				<option value="H">Auto Mondeo</option>
				<option value="I">Manual Sportage 2WD</option>
				<option value="J">Auto Sportage 4X4</option>
				<option value="K">Auto Galaxy / Manual RCZ</option>
				<option value="L">Auto Sorento 4X4</option>
				<option value="M">Manual Kangoo Van</option>
				<option value="O">Manual LWB LL29 Trafic</option>
			</select>

			
			
			
			<p>start date:</p>
			<input id='firstDate' type="text" size="25"><a href="javascript:NewCal('firstDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
			<p>Start Time:
			<select name="time1" id="time1">
				<option value="1">08:00</option>
				<option value="2">08:30</option>
				<option value="3">09:00</option>
				<option value="4">09:30</option>
				<option value="5">10:00</option>
				<option value="6">10:30</option>
				<option value="7">11:00</option>
				<option value="8">11:30</option>
				<option value="9">12:00</option>
				<option value="10">12:30</option>
				<option value="11">01:00</option>
				<option value="12">01:30</option>
				<option value="13">02:00</option>
				<option value="14">02:30</option>
				<option value="15">03:00</option>
				<option value="16">03:30</option>
				<option value="17">04:00</option>
				<option value="18">04:30</option>
				<option value="19">05:00</option>
				<option value="20">05:30</option>
				<option value="21">06:00</option>
				<option value="22">06:30</option>
				<option value="23">07:00</option>
				<option value="24">07:30</option>
				
			</select>
			
			<p>end date:</p>
			<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>
			
			<p>End Time:
			<select name="time2" id="time2">
				<option value="1">08:00</option>
				<option value="2">08:30</option>
				<option value="3">09:00</option>
				<option value="4">09:30</option>
				<option value="5">10:00</option>
				<option value="6">10:30</option>
				<option value="7">11:00</option>
				<option value="8">11:30</option>
				<option value="9">12:00</option>
				<option value="10">12:30</option>
				<option value="11">01:00</option>
				<option value="12">01:30</option>
				<option value="13">02:00</option>
				<option value="14">02:30</option>
				<option value="15">03:00</option>
				<option value="16">03:30</option>
				<option value="17">04:00</option>
				<option value="18">04:30</option>
				<option value="19">05:00</option>
				<option value="20">05:30</option>
				<option value="21">06:00</option>
				<option value="22">06:30</option>
				<option value="23">07:00</option>
				<option value="24">07:30</option>
				
			</select>
			
			<p>Days:</p>
			<input type="text" name="days" />

			<p>Price:</p>                                      
			<input type="text" name="rentalamount" />   
			<p>Deposit:</p>                                
			<input type="text" id="depo" name="depo" />  
			<p>Excess mile price</p>			
			<input type="text" name="mile" /> 
			

			<p><input type="button" value="Quote" onclick="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()" />
			<INPUT TYPE=RESET name="clear" value="Clear Form"/></p> 

		</form>
		
		<p> GAV: Deposit and mile excess now working, 28 days now works and now have a reset button also made a pop up for age restriction(select sportage/galaxy/rcz
	) all prices are now on here now all to do is set up cecks on the dates ( summer/ winter. collect before return e.c.t) im starting to like this java script **** !</p>
		<!-- /content -->

	</body>

</html>

thanks

I want to make a javascript clock (using Server time and not user computer time). After searching I have found the code on http://www.elated.com/articles/creat...ascript-clock/
The Code is:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#clock { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color: white; background-color: black; border: 2px solid purple; padding: 4px; }
</style>

<script type="text/javascript">
<!--

function init ( )
{
  timeDisplay = document.createTextNode ( "" );
  document.getElementById("clock").appendChild ( timeDisplay );
}

function updateClock ( )
{
  var currentTime = new Date ( );

  var currentHours = currentTime.getHours ( );
  var currentMinutes = currentTime.getMinutes ( );
  var currentSeconds = currentTime.getSeconds ( );

  // Pad the minutes and seconds with leading zeros, if required
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;

  // Choose either "AM" or "PM" as appropriate
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";

  // Convert the hours component to 12-hour format if needed
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;

  // Convert an hours component of "0" to "12"
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;

  // Compose the string for display
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

  // Update the time display
  document.getElementById("clock").firstChild.nodeValue = currentTimeString;
}

// -->
</script>

</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 )">

<div>
  <span id="clock">&nbsp;</span>
</div>


</body>
</html> 


The problem is that it (the code above) is using the users computer time.

(I found (in the comments of http://www.elated.com/articles/creat...ascript-clock/) that I should use:
PHP Code:
var currentTime = [serverValue goes here]; 


But I don't really know what should I put in the "serverValue goes here" ..... )


So how can I make this code to use the server time (and not the users time)?


Any Suggestion Will Be Helpfull

Hi,

There are two text boxes in a HTML form. The first text box takes the time when the user starts to work on a project. The second box takes the time when the user stops working on that project.

Now, I would like to calculate the total time worked on that project for that user. That is (stop time - start time). I tried few things without success.

Any help will be appreciated.

I got this script and I'm trying to get the EST hour but I have a big concern that it doesn't work, can somebody help me and tell me if it works by him (it should display "15" even if he doesn't have est time) and if not plaese tell me why. Thank you. Try it he http://jsfiddle.net/fqz37/

Code:

// function to calculate local time
// in a different city
// given the city's UTC offset
function calcTime(city, offset) {

    // create Date object for current location
    d = new Date();

    // convert to msec
    // add local time zone offset 
    // get UTC time in msec
    utc = d.getHours() + (d.getTimezoneOffset() * 60000);

    // create new Date object for different city
    // using supplied offset
    nd = d.getHours(utc + (3600000*offset));

    // return time as a string
    return nd.toLocaleString();

}

// get NY time
ny=(calcTime('', '-5'));

document.write (ny);

How to know the execution time of a function?

For example, which of these functions run in less time? That is, which of these functions are more weightless to run?

Code:

document.getElementById("my_image").src = "images/picture.png";

//or

document.getElementById("my_image").style.webkitTransform = "rotate(45deg)";

Thanks in advance!