time is not getting updated on page. Any ideas? - javascript

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/

Related

Load JS function inside a div

I have a simple span and I want to show full date from Javascript inside this span. I'm not getting how to do it.
HTML (The date would be in place of the "..."):
<h3>Data Atual: </h3><span id="date" onload="newDate()">...</span>
Javascript:
function newDate() {
var dateBox = document.getElementById('date');
dateBox.innerHTML = '';
var date = new Date();
var newDate = date.getDay + ', ' + date.getDate + ' de ' + date.getMonth + ', ' + date.getFullYear + '.';
dateBox.innerHTML += newDate;
}
Thanks in advance
The load event doesn't fire on static HTML elements, only elements that load their data asynchronously from an external URL.
Put the call in the body's onload event.
<body onload="newDate()">
you can use this code to show the complete day in your span text:
document.getElementById("date").innerHTML = createNewDate();
function createNewDate() {
const date = new Date();
const newDate = date.getDay + ', ' + date.getDate + ' de ' + date.getMonth + ', ' + date.getFullYear + '.';
return newDate;
}
do not need to load it on start. Actually you are using get dates wrongly. This following code will solve it your problem. Put it before </body>
<script>
var date = new Date();
var newDate = date.getDay() + ', ' + date.getDate() + ' de ' + date.getMonth() + ', ' + date.getFullYear() + '.';
document.getElementById("date").innerHTML = newDate;
</script>

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;
...

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.

I have javascript to get new time and date

I have a JavaScript code to get new time. But when i reload the page the time doesn't change instead it says 1/10/2014 10:57, how can i add a function for the time and date to detect and change
Below is the code I tried but its not working.
<script type="text/javascript">
(function () {
// using current UTC time from server as ref, display local time in div id="now"
var now = new Date();
now.setTime(1389322677492);
var nowstr = ""
+ (now.getMonth() + 1) + "/"
+ now.getDate() + "/"
+ ((now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear()) + " "
+ now.getHours() + ":"
+ ((now.getMinutes() < 10) ? '0' + now.getMinutes() : now.getMinutes());
var el = document.getElementById("now");
el.appendChild(document.createTextNode(nowstr));
})();
</script>
Thanks for helping me.
Thats because you are explicitly setting it to 1389322677492 everytime. All you need to do is remove the line:
now.setTime(1389322677492);

return system date on checkbox check jquery

I am somewhat a beginner to jquery. I am having trouble creating a function to fill a textbox with the current date when a checkbox is clicked. I have the routine working on its own, but i would like to wrap it in a function so i can call it multiple times on the page. I have included the code here as well as a jsfiddle link
jsFiddle Link
html:
<span id="ContentPlaceHolder1_Label8">Start Date:</span>
<input name="ctl00$ContentPlaceHolder1$startdateSrvcTXT" type="text" id="ContentPlaceHolder1_startdateSrvcTXT" disabled="disabled" class="aspNetDisabled" />
<span id="ContentPlaceHolder1_Label11">Check to Start</span>
<input id="ContentPlaceHolder1_StartFillCHK" type="checkbox" name="ctl00$ContentPlaceHolder1$StartFillCHK" />
javascript:
/*----This works------
$('#ContentPlaceHolder1_StartFillCHK').click(function () {
if (this.checked) {
var myDate = new Date();
var prettyDate = (myDate.getMonth() + 1) + '.' + myDate.getDate() + '.' +
myDate.getFullYear();
$('#ContentPlaceHolder1_startdateSrvcTXT').val(prettyDate);
} else { //if not checked
$('#ContentPlaceHolder1_startdateSrvcTXT').val('');
}
});
*/
//this doesnt
function fillclick(txtid,checkid){
$("'" + checkid + "'").click(function () {
if (this.checked) {
var myDate = new Date();
var prettyDate = (myDate.getMonth() + 1) + '.' + myDate.getDate() + '.' +
myDate.getFullYear();
$("'" + txtid + "'").val(prettyDate);
} else { //if not checked
$("'" + txtid + "'").val('');
}
});
}
fillclick("#ContentPlaceHolder1_startdateSrvcTXT","#ContentPlaceHolder1_StartFillCHK");
You're querying by ID; you need to use # selectors:
$("#" + checkid).click
and
$("#" + txtid).val
Edit: You're already using them. There's no need to quote anything, they're already strings:
$(checkid).click
and
$(txtid).val
.
function fillclick(txtid,checkid){
$("#" + checkid).click(function () {
if (this.checked) {
var myDate = new Date();
var prettyDate = (myDate.getMonth() + 1) + '.' + myDate.getDate() + '.' + myDate.getFullYear();
$("#" + txtid).val(prettyDate);
} else { //if not checked
$("#" + txtid).val('');
}
});
}
I won't say anything about the function to get the current time. I will try to help you to do the next things.
You have a checkbox and a text box like these:
<input type="checkbox" id="ch1" name="ch1" />
<input type="text" id="current_time" name="current_time">
Now, use this code to do what you need:
$(document).ready(function() {
var myTime = getTime(); // getTime() is your own function to get the current time.
if ($('#ch1').is(':checked')) {
$('#current_time').val(myTime);
}
});
I hope I could help you.

Categories

Resources