JavaScript - Getting The Time Difference Based On Date And 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 Similar TutorialsHi Guys, I am trying to implement a countdown on my website. I want to calculate the difference between the current date and Jan 1st 2012 at 12:01am. I need to have the format in dd:hh:mm:ss so i can push it into this class. I've been reading posts but can't get it to work properly. Can anyone help me convert the dates? Thanks in advance. hi, anyone knows how to get the past 6th month date using time difference? like if the current date is given 18-April-2011 then the past 6th month date is 18-October-2010...how can this be done by using time difference? Thanks, verve Hello all. I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second. For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday. This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them. The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful. I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it. As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc. I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine. So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study. The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance. Anyway, I hope you can resolve my problem and I'm looking forward to a response! Thanks for your concern, you brain Gods you! AHa. 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 Please can u help? how would i get the total work hours between two times (8:30 to 5:30) from a web form. I tried just minusing one from the orther but it came back with "Nan" Hi All, I have a form that captures member registration details. In the admin section .. I would like to change the Status field of a record/s from NEW to PAYMENT DUE after 14 days from the data of submission. The status change should automatically trigger on the 15th day. So when the admin checks the list page he/she should be able to view the updated status field. Any pointers how to accomplish this? Thanks in advance. Vinny hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time. can any one send me the code for it time format is[05:00]. Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that. Code: var err_str=""; function validate_grid(value,id,ind) { if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } Hi Code: var err_str=""; function validate_grid(value,id,ind) { $("#result").html(" ").show(); if(ind==1 || ind==2) { var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/; if(!patt.test(value)) { mygrid.setCellTextStyle(id,ind,"background-color:yellow;"); if(err_str!="") err_str+="\n"+(ind+1)+".Enter numbers and : only.."; else err_str=(ind+1)+".Enter numbers and : only"; return false; } else { mygrid.setCellTextStyle(id,ind,"background-color:white;"); return true; } } } alert(err-str); here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails) thank you. I have a site where users enter there certain timezome (+1, +4, -8 etc) and i want to display a clock with the local time on their profile page so when people view there profile they can see currently what time it is for them. I currently a have this. Code: function timeclock() { var t=setTimeout("startclock()",500); } function startclock() { var x = new Date(); var hour = x.getHours(); var min = x.getMinutes(); var sec = x.getSeconds(); if (hour<10){hour="0"+hour} if (min<10){min="0"+min} if (sec<10){sec="0"+sec} document.getElementById("clock").innerHTML=hour+":"+min+":"+sec; timeclock(); } Is it possible to alter the date dependent on the timezone? Maybe put startclock(timezone) andchange it to new Date(timezone);? I am looking to change a flash movie based on the time of day. Basicaly I need it to switch between a day/night version of the flash. I have this piece of code and want to know how to call the day.swf, night.swf in the flash object section where i have written 'WHAT DO I PUT HERE?' Any help with be greatly appreciated. Thanks. Code: <script type="text/javascript"> <!-- var DayOrNightMovie = "day.swf"; now = new Date(); hour = now.getHours(); if (hour > 6 && hour < 18) { DayOrNightMovie = "day.swf"; } else { DayOrNightMovie = "night.swf"; } var FlashObject = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="520" height="85" hspace="0" vspace="0" align="top">' FlashObject += '<param name="movie" value="WHAT DO I PUT HERE?"> <param name="quality" value="high"><param name="wmode" value="transparent">' FlashObject += '<embed src="WHAT DO I PUT HERE?" width="520" height="85" hspace="0" vspace="0" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>' document.write(FlashObject); // --> </script> Hi Guys, I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP. Any help would be greatly appreciated. Thanks, Matt Hey. I'm currently looking for a countdown script, which is based on the server's time. I've only found scripts, that's based on the local computer's time, which means the output of the script changes, when the time on the computer is changed. And I want to make a public announcement which counts down to something - and should output the same at every person. I'm not that familiar with JavaScript, I know some jQuery - if anyone can supply any links or can help me with this, I'd appreciate it. Hi. I am having a little trouble with the following code, I am unsure where the problem is I will start from the beginning. Let me know if this is correct. 1. asked to declare a variable named timeStr=to the value returned from the showDateTime() function. 2.declare a variable named mapNum equal to the value returned from the getMap() function. Code: <title>SkyWeb: The Planisphere</title> <link href="skyweb.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="datetime.js"></script> <script type="text/javascript"> function timestr(){ /* timestr is a text string containing the current date and time mapNum is the number of the map to display in the planisphere */ var timeStr=showDateTime(); var mapNum=getMap(); } </script> </head> It asks me to scroll down to the div element with the id value "maps" and replace the line <img id="sky" src="sky0.jpg" alt=""/> with a script element that writes the following code<img id='sky' src='skymapNum.jpg' alt='' /> where mapNum is the value of the mapNum variable. replace the date/time value "Jan 1 2007, 12:00 am" with a script element that writes the value of the timeStr variable to the web page. Code: <div id="maps"> <img id="sky" src="sky0.jpg" alt="" /> <img id="mask" src="mask.gif" alt="" /> <div id="datetime"> January 1, 2007, 12:00 am </div> </div> I have tried it several ways but have been unable to get this through my think head, I am new to JS the textbook isnt very explanitory as you guys have been. Thanks for your time. 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. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <script type="text/javascript"> var info = new Date() var day = info.getDate() var mon = info.getMonth() var year = info.getFullYear() var hour = info.getHours() var min = info.getMinutes() var sec = info.getSeconds() alert(day+","+mon+","+year+","+hour+","+min+","+sec+",") if (day>=22 && mon>=5 && year>=2011 && hour>=12 && min>=00 && sec>=00) { document.write{ <script src="//c.tadst.com/common/fullscreen2.js" type="text/javascript"></script><tr><td id="c1" align="center" valign="middle"><h2 align="center" class=c>Time <span id=el_u1>until</span> SUMMER HOLIDAYS </h2> <div align="center"> <table class=wa> <tbody id=rs3><tr><td><span id=el_d1>7</span> <span id=el_d1t>days</span>, <span id=el_h1>19</span> <span id=el_h1t>hours</span>, <span id=el_m1>58</span> <span id=el_m1t>minutes</span>, <span id=el_s1>18</span> <span id=el_s1t>seconds</span></td></tr></tbody></table> </div> <h2 align="center"><span class="c">that is</span></h2> <p align="center"><script type="text/javascript"> <!-- et=1308231902;function f0(d){return ld[d.getUTCDay()]+','+' '+d.getUTCDate()+'.'+' '+lm[d.getUTCMonth()]+' '+pf(d.getUTCFullYear(),4)+', '+p2(d.getUTCHours())+':'+p2(d.getUTCMinutes())+':'+p2(d.getUTCSeconds());} cks={el:{t:[{o:7200,a:'CEST',d:1}],f:f0,c:{t:1308736800E3}}}; lm=new Array();lm[5]='Juni';ld=new Array();ld[2]='Dienstag';ld[3]='Mittwoch';ld[4]='Donnerstag';//--> </script> </p> <div align="center"> <table class="wa"> <tbody id="rs1"> <tr> <td id="el_d2" class="r dbl">7</td> <td class="dbl"> </td> <td id="el_d2t" class="dbl">days</td> </tr> <tr> <td id="el_h2" class="r dbl">187</td> <td class="dbl"> </td> <td id="el_h2t" class="dbl">hours</td> </tr> <tr> <td id="el_m2" class="r dbl">11275</td> <td class="dbl"> </td> <td id="el_m2t" class="dbl">minutes</td> </tr> <tr> <td id="el_s2" class="r dbl">676517</td> <td class="dbl"> </td> <td id="el_s2t" class="dbl">seconds</td> </tr> </tbody> </table> <script src="//c.tadst.com/common/common21.js?5" type="text/javascript"></script> <script src="//c.tadst.com/common/wcupd8.js?1" type="text/javascript"></script> </div> }; } else { document.write{ <img src="happysummerholiday.jpg" width="285" height="200" /> }; } </script> </body> </html> The Red part is html coding. Doesn't seam to work - please help me. The idea is that after the date (22.06.2011 at 12:00) the content changes to the picture. Thank you in advanced for helping me Hi guys, I have JavaScript code that displays the date, time and URL in the web page, here is the code: 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"> <head> <title>JavaScript Page One</title> </head> <body> <script type="text/javascript"> var today=new Date() var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); document.write(''+today.toString()+'<br>'+window.location+'') document.write("<br />"); document.write("Browser name: "+ browser); document.write("<br />"); document.write("Browser version: "+ version); </script> </body> </html> How can i format it so that it uses the following colors for different date and time components: Day in red, Date in green, Month in yellow, Year in blue, Hours and Minutes in brown? And also, what is the JavaScript code to successfully display the number of forms, anchors and links in the page? Thanks ~Savage Hi everyone, hope you can help. I've got a JS events calendar on my website, and on one of the entries I want the ticket link not to appear until a certain time & date (9:30am, Fri 29 Apr 2011, UTC+1). I've written the code for this to work: Code: var releasetime = 1304065800000 var currentdate = new Date() var currenttime = currentdate.getTime() if (currenttime >= releasetime){ document.write("<a href=\"ticket link\" rel="nofollow" target=\"_blank\">BUY TICKETS</a>") } And that's all good and working fine. EXCEPT, because it's taking the time & date from the local machine, all the user has to do is change the date on his PC to be able to see the ticket link. Is there any way to get the *actual* date & time? Thanks Cliff I have the following code on my site. I use this in the header of mysite Code: <script type="text/javascript"> var weekdaystxt=["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"] var montharray=("January","February","March","April","May","June","July","August","September","October","November","December") function showLocalgetthedate(){ var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var month=mydate.getMonth() var daym=mydate.getDate() if (daym<10) daym="0"+daym function showLocalTime(container, servermode, offsetMinutes, displayversion){ if (!document.getElementById || !document.getElementById(container)) return this.container=document.getElementById(container) this.displayversion=displayversion var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>' this.localtime=this.serverdate=new Date(servertimestring) this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time this.updateTime() this.updateContainer() } showLocalTime.prototype.updateTime=function(){ var thisobj=this this.localtime.setSeconds(this.localtime.getSeconds()+1) setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second } showLocalTime.prototype.updateContainer=function(){ var thisobj=this if (this.displayversion=="long") this.container.innerHTML=this.localtime.toLocaleString() else{ var hour=this.localtime.getHours() var minutes=this.localtime.getMinutes() var seconds=this.localtime.getSeconds() var ampm=(hour>=12)? "PM" : "AM" var dayofweek=weekdaystxt[this.localtime.getDay()] this.container.innerHTML=formatField(hour, 1)+":"+formatField(minutes)+":"+formatField(seconds)+" "+ampm+ " "+montharray(month)+" ("+dayofweek+")" } setTimeout(function(){thisobj.updateContainer()}, 1000) //update container every second } function formatField(num, isHour){ </script> I use this to display the information. Code: <script type="text/javascript"> new showLocalTime("timecontainer", "server-php", 0, "short") new showLocalTime("timecontainer2", "server-php", +300, "short") new showLocalTime("timecontainer3", "server-php", +360, "short") new showLocalTime("timecontainer4", "server-php", +600, "short") </script> This gives me 4 clocks which i set at different time zones Can someone assist me in showing me a way to accelerate the time for this clock. I would like the minutes to be only 5 seconds long versus the normal 60 seconds per minute. I fly a flight sim and the in game world clock is accelerated at this pace and my squad would like to be able to see the time it would currently be in the game so we can avoid launching the game at certain in game times. If this can't be done, does anyone know of a separate java script that can accomplish this? Thank you in advance, any and all help would be greatly appreciated. |