Develop Reference

JavaScript clock not displaying properly

I'm trying to make an updating JavaScript clock on my webpage. The problem I'm having is that, while the value itself updates (I use alert(timeNow) to show the value and make sure it's updating), the clock on the website doesn't. I was just wondering if there was something I was missing, or if I've just happened to come across something that I can't quite do. I'd prefer if there was a way to do it using jQuery, as I understand that a little better than normal JavaScript.
Javascript:
function updateClock() {
var thisDate = new Date();
if (thisDate.getHours() > 11 && thisDate.getHours() != 0) {
var Hours = Math.abs(thisDate.getHours() - 12);
var AmPm = "PM"
} else {
var Hours = thisDate.getHours()
var AmPm = "AM"
}
if (thisDate.getMinutes() < 10) {
var Mins = "0" + thisDate.getMinutes();
} else {
var Mins = thisDate.getMinutes();
};
var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth() + 1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm;
return timeNow;
};
setInterval(updateClock, 1000);
$("span#time").append(updateClock());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="time"></span>

You are not consuming the return value of updateClock function, thus the updated time is not reflecting.
You should update the text of time span
Use
setInterval(function(){
$("span#time").text(updateClock());
}, 1000);

You are returning the time in the function updateClock(). What you actually want to do is to set it into the DOM at the end of updateClock(). Here is an updated example:
function updateClock() {
var thisDate = new Date();
if (thisDate.getHours() > 11 && thisDate.getHours() != 0) {
var Hours = Math.abs(thisDate.getHours() - 12);
var AmPm = "PM"
} else {
var Hours = thisDate.getHours()
var AmPm = "AM"
}
if (thisDate.getMinutes() < 10) {
var Mins = "0" + thisDate.getMinutes();
} else {
var Mins = thisDate.getMinutes();
};
var timeNow = thisDate.getDate() + "/" + (thisDate.getMonth()+1) + "/" + thisDate.getFullYear() + " " + Hours + ":" + Mins + " " + AmPm;
$("span#time").text(timeNow);
}
setInterval(updateClock, 1000);
You could of course also just use the returned value of updateClock() to update the DOM. In this way, you would separate the DOM manipulation and the JavaScript time calculation. #Satpal described this way.

Try This...
$(document).ready(function()
{
goforit();
});
var dayarray=new Array ("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June",
"July","August","September","October","November","December")
function getthedate() {
d = new Date();
d.setUTCFullYear(2004);
d.setUTCMonth(1);
d.setUTCDate(29);
d.setUTCHours(2);
d.setUTCMinutes(45);
d.setUTCSeconds(26);
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
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn=""
if (hours>=12)
dn=""
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//Hire change font size
var cdate=""
+ mydate.toLocaleString()
+""
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit()
{
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<SPAN id=clock style="display:block"></SPAN>

setInterval(function() {
$("span#time").text(moment(new Date()).format('DD/M/YYYY LTS'));
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<span id="time"></span>

Having ng-model and ng-value set for the single input field

HTML CODE
<div>
<label for="date">Update Time:</label>
<input id="date" ng-model="formData.Updt_Time" ng-value="ts">
</div>
Here i am trying to assign ng-model and ng-value to the input field since i m the value(ng-value="ts") this ts would be coming from my controller, and i will have to save the data to formData. On form submit i will be inserting all the values in the set formData to my mySQL.
CONTROLLER CODE
clientApp.controller('formCtrl',function($scope,$http){
$scope.statuses = ["Active", "Inactive"];
$scope.cluster = ["East Coast","West Coast","PayPal"]
// Update Date
var currentTime = new Date()
var yr=currentTime.getFullYear()
var mnth=currentTime.getMonth()
var dt=currentTime.getDate()
if (mnth < 10) {
mnth = "0" + mnth
}
if (dt < 10) {
dt = "0" + dt
}
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds = currentTime.getSeconds()
if (minutes < 10) {
minutes = "0" + minutes
}
if (seconds < 10) {
seconds = "0" + seconds
}
$scope.ts = yr + "-" +mnth+ "-" + dt + " " + hours + ":" + minutes + ":" + seconds + " ";
//when submit button is clicked
$scope.submit = function() {
alert("Submit Clicked");
$http.post('/clientPost', $scope.formData).success(function(response) {
console.log('Data posted successfully');
})
.error(function(data){
console.log("There is an error");
console.log('Error: ' + data);
});
};
});
How ever the ng-model and ng-value doesn't seem to work together. Is there a workaround.

First of I have a few recommendations:
You should start using the 'controller as' notation in Angular, as it is more readable and does not clutter up the $scope. (Check out John Papa's style guide for writing better Angular code: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)
If you are going to do some stuff with dates, I recommend using the moment.js library, which will save you from the annoyance that is the Date-object in javascript.
Now, from what I understand from your question, you are trying to set the value of the textbox to be the formatted date, which you stored in the variable ts.
To set the value of the textbox and also the value of the model, you could simply set the value of ts to the model directly, which would then cause Angular to update the value of the textbox.
HTML
<div>
<label for="date">Update Time:</label>
<input id="date" ng-model="formData.Updt_Time">
</div>
JAVASCRIPT
...
var ts = yr + "-" +mnth+ "-" + dt + " " + hours + ":" + minutes + ":" + seconds + " ";
$scope.formData.Updt_Time = ts;
...

time is not getting updated on page. Any ideas?

I want to show start time and also show the current time. For some reason its not working.
Here is the html
<body >
<label>App Started At: </label><div id="starttime" />
<label >Current Time: </label><div id="nowtime" />
</body>
and java script
var appStartTime = getCurrentTime();
updatetimes();
function updatetimes() {
var nowStr = getCurrentTime();
document.getElementById("starttime").innerHTML = appStartTime;
document.getElementById("nowtime").innerHTML = nowStr;
setTimeout(updatetimes, 5000);
}
function getCurrentTime() {
var now = new Date()
return now.getMonth() + "/" + now.getDate() + "/" + now.getFullYear() + " - " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
}
Code is available at https://jsfiddle.net/nh6mun7L/
Can someone please help?

Don't use a self closing DIV.
E.g., dont do this:
<div />
Do this:
<div></div>
See:
https://jsfiddle.net/nh6mun7L/1/

Using JavaScript To Change the HTML Contained In An External Script

I have an element on my website that is hosted externally and referenced in a script on my page.
I want to automatically change the text within this content so that it always displays tomorrow's date.
Script for the widget:
<script src="//my.externalwidget.com/12345.js" type="text/javascript" charset="utf-8" async="async"></script>
HTML contained in external script:
<div id="changeHeaderOne">THIS SHOULD DISPLAY TOMORROW'S DATE</div>
My JS:
<script type="text/javascript">
var currentDate = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dateParse = currentDate.toString();
var dayAbbr = dateParse.substr(0, 3);
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
document.getElementById("changeHeaderTwo").innerHTML = "Tomorrow's date is " + dayAbbr + " " + month + "/" + day + "/" + year;
document.getElementById("changeHeaderOne").innerHTML = "Tomorrow's date is " + dayAbbr + " " + month + "/" + day + "/" + year;
I know my script is working because it runs properly on #changeHeaderTwo (located in DOM) but not on #changeHeaderOne (externally hosted and loaded using the script on top).
Any ideas how to make this apply to the externally loaded code as well?

You are using document.getElementByClass() (which should really by document.getElementsByClassName()) when your div has an id. Use document.getElementById() instead.

Jquery How to check today time greater then use given time?

How to check time conditionin Jquery
var startTime="20:02:55"; // or 12:34
var endTime ="21:02:55" // or 1:34
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
if(time >startTime || time < endTiime){
$("#a").html("show Box");
}else{
$("#a").html("Expire BOx");
}
How to check 12 hour and 24 hour condition also?
is it correct? i need am, pm format check please can anyone help me?

Here is some code. I am appending to show both behaviour.
Here is DEMO
test("20:02:55", "21:02:55");
test("13:02:55", "15:02:55");
function test(start_time, end_time) {
var dt = new Date();
//convert both time into timestamp
var stt = new Date((dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear() + " " + start_time);
stt = stt.getTime();
var endt = new Date((dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear() + " " + end_time);
endt = endt.getTime();
var time = dt.getTime();
if (time > stt && time < endt) {
$("#a").append("<br> show Box ");
} else {
$("#a").append("<br> Expire BOx ");
}
}

Try this.
I took the logic to print 'Show Box' if the current time is in between the start and end time. else viceversa.
var startTime="20:02:55"; // or 12:34
var endTime ="21:02:55" // or 1:34
var dt = new Date();
var st = new Date('00','00','00',startTime.split(':')[0],startTime.split(':')[1],startTime.split(':')[2]);
var et = new Date('00','00','00',endTime.split(':')[0],endTime.split(':')[1],endTime.split(':')[2]);
if(dt.getTime() >st.getTime() && dt.getTime() < et.getTime()){
alert("show Box");
}else{
alert("Expire BOx");
}