I have an input field that I would like to refresh every 2 seconds or so. However,I can't seem to get the 'setInterval' right because it is not updating my ID. Should I not be using the
ID to declare the refresh? Any help will be most appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
<script src="Scripts/Global.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
Time: <input type="time" id="theTime">
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("theTime").innerHTML = t;
}
</script>
<script type="text/javascript">
$(document).ready( function() {
var now = new Date();
//now2 prevents the milliseconds from showing up in the input
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
});
</script>
</body>
</html>
You're setting the innerHTML of myTimer, where you should really be setting the valueAsDate, like in your $(document).ready function.
Here's how myTimer should look:
function myTimer() {
var now = new Date();
var now2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours()-8, now.getMinutes(), now.getSeconds());
$('#theTime')[0].valueAsDate = now2;
}
and then you can call myTimer() from within your $(document).ready:
$(document).ready( function() {
myTimer();
});
you are trying to set the innerHTML of an input field. use $('#theTime').val() instead!
Related
I tried to make a multi date selector calendar with jqueryUI and came to know about a plugin named "Multi-Dates-Picker". The problem with that is that I could not dynamically set the value in the usual way of a setter method in jqueryUI widgets, while the getter method works fine.
var date = new Date();
var today = new Date();
var tomorrow = (new Date()).setDate(today.getDate() + 1);
function myFunction() {
$('#mdp-demo').multiDatesPicker({
minDate: 3, // today
maxDate: 15, // +30 days from today
maxPicks: 2,
});
}
function maxpicksup() {
// Setter
$("#mdp-demo").datepicker("option", "maxDate", 21);
$("#mdp-demo").datepicker("option", "minDate", 0);
//setter
$("#mdp-demo").datepicker("option", "maxPicks", 5);
// Getter
var firstDay = $("#mdp-demo").datepicker("option", "maxPicks");
alert(firstDay);
}
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-multidatespicker#1.6.6/jquery-ui.multidatespicker.js"></script>
<body onload="myFunction()">
<div class="" id="mdp-demo"></div>
<button onclick="maxpicksup()">click</button>
</body>
I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!
Why am I not getting a zero, but an "18", from .getHours(), when comparing two dates that are separated by only seconds?
Here is the code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<span id="test">starting...</span>
<script>
var a = document.getElementById("test");
window.setInterval(myHourCheck, 1000);
var originalDate = new Date();
function myHourCheck() {
var current = new Date();
var original = originalDate;
var timeDelta = current.getTime() - original.getTime();
var hours = new Date(timeDelta).getHours();
a.innerHTML = hours;
}
</script>
</body>
</html>
Stepping through confirms that only seconds separate current from original.
new Date constructs a Date object with your local time zone. The hour offset is screwing you up.
You can get around this by using the UTC versions of the methods:
new Date(0).getUTCHours() === 0
I am learning AngulaJS, here is the code:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ClockCtrl">
Current time is: {{ time.now }}
</div>
</body>
</html>
the script.js:
function ClockCtrl($scope){
var time = {};
time.now = new Date().toString();
$scope.time = time;
setInterval(function(){
$scope.time.now = new Date().toString();
console.log(time.now);
}, 1);
}
But i don't know why the time cann't be update in the html display?
You should use $interval directive instead of setInterval, which will internally call $scope.$apply() to update the bindings
function ClockCtrl($scope, $interval){
$interval(function(){
$scope.time.now = new Date().toString();
}, 1000);
////Or, You can use $scope.$apply()
//setInterval(function () {
// $scope.time.now = new Date().toString();
// $scope.$apply();
//}, 1000);
}
DEMO
Hi I am new to Javascript and am trying to create a function that checks two dates. I have read it is useful to put the JS in the head part of the document, but this is not returning anything. I am also new to stackoverflow so I hope I did this correctly. :) Does anyone see the error?
<!DOCTYPE html>
<html>
<head>
var myDate = new Date(); // Your timezone!
var myEpoch = myDate.getTime()/1000;
var deadline = '1341596750.000';
document.write(myEpoch);
document.write("<br>",deadline);
if (myEpoch < deadline) {
document.write("<p>Just in time!</p>");
} else {
document.write("<p>Too late!</p>");
}
</head>
<body>
<br><br><br><br>http://www.epochconverter.com/
</body>
</html>
You have to mention it's a script using <script>. Also you shouldn't output DOM in the <head> like you are doing with document.write. Manipulate the DOM like this instead:
<head>
<script type="text/javascript">
var myDate = new Date(); // Your timezone!
var myEpoch = myDate.getTime()/1000;
var deadline = '1341596750.000';
document.write(myEpoch);
document.write("<br>",deadline);
if (myEpoch < deadline) {
document.getElementById("useme").innerHTML("Just in time!");
} else {
document.getElementById("useme").innerHTML("Too late!");
}
</script>
</head>
<body>
<p id="useme"></p>