Handling timezones for Javascript date - javascript
I have a simple timer countdown HTML page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Countdown</title>
<style type="text/css">
#import "http://keith-wood.name/css/jquery.countdown.css";
#defaultCountdown { width: 240px; height: 45px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date("December 9, 2011 11:30:00");
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(2011);
});
</script>
</head>
<body>
<h2>Countdown</h2>
<p>Counting down to 11:30am Dec 9th, <span id="year">2011</span>.</p>
<div id="defaultCountdown"></div>
</body>
</html>
Problem is that it doesn't handle timezones properly. For example, it shows the correct countdown in my timezone but if someone views it from say in CST, it's off by 2 hours. What's the proper way to set the Date in the Javascript code? Right now, I have this
austDay = new Date("December 9, 2011 11:30:00");
Not sure how this will interact with the countdown plugin...
austDay = new Date(Date.UTC(year, month, day, hour, minute, second));
You can do something like:
var tz = d.getTimezoneOffset();
var date = new Date("December 9, 2011 11:30:00");
austDay = date.setMinutes( date.getMinutes() + tz );
Related
Datepicker jquery how to diasble 2 future days after today
How can I disable only two future dates after today for instance
today is 2020-12-26 but then 2020-12-27 and 2020-12-28 to be disabled like that. and all past dates must be enabled . I tried searching everywhere but no luck all I see is to disable all future dates which I don't want. Your help will be appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
maxDate: 0
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
</html>
I think its related to this question JQuery ui - date picker, disabling specific dates but you just get the next two days like this and assign it to unavailableDates. var today = new Date(); var dd = today.getDate()+1; var dd2 = today.getDate()+2; var mm = today.getMonth()+1; var yyyy = today.getFullYear(); nextday = yyyy+'-'+mm+'-'+dd; nextday2 = yyyy+'-'+mm+'-'+dd2; unavailableDates = [nextday,nextday2];
<html>
<head>
<meta charset="utf-8">
<meta https-equiv="X-UA-Compatible" content="IE=edge">
<title>Pay Fees</title>
<!--date picker -->
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<!--date picker -->
<script type="text/javascript">
$(document).ready(function() {
var today = new Date();
var dd = today.getDate()+1;
var dd2 = today.getDate()+2;
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
nextday = yyyy+'-'+mm+'-'+dd;
nextday2 = yyyy+'-'+mm+'-'+dd2;
unavailableDates = [nextday,nextday2];
$("#datepicker").datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ unavailableDates.indexOf(string) == -1 ]
}
});
});
</script>
</head>
<body>
<input type="text" id= "datepicker" name="datepicker">
</body>
I need a button to only during a certain time at certain days
I need a button to only appear from 12pm-3pm on Monday-Friday. When it is not during those times, the item (button) needs to not be shown. We also need to account the different time zones for people who will be viewing the site. Any help would be greatly appreciated
My code right now only disables the button during 12pm-3pm. I have not been able to input for it to only work on certain days. Also, I think the time only accounts for the server's time zone (Pacific Standard) and not the user's.
<a href="#" target="_blank"><input id="live" class="bttHider live"
type="submit" onclick="showHidden(); showbttHidden();"
value="Livestream Video - STREAMING NOW" disabled></a>
<script>
var h = new Date().getHours();
if (h >= 12 && h <= 15) {
document.getElementById('live').disabled=false;
}
</script>
var today = new Date();
var day = today.getDay();
var daylist = ["Sunday","Monday","Tuesday","Wednesday ","Thursday","Friday","Saturday"];
console.log("Today is : " + daylist[day] + ".");
if(daylist[day]!="" && daylist[day]!="Sunday"){
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
if(hour>="12" && (hour<=3&&minute==0)){
$("#btn1").show();}
else{$("#btn1").hide()}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn btn-info" id=btn1>Basic</button></div></body></html>
Using getstring in a hta file
I have a hta file which connects to a database via ADO and then prints to a table. However my code triggers a syntax error at the getstring line and a object does support property or method 'write' error at the document.write section of the code for the table. I am struggling to figure out how to use this getstring method as from my understanding it should be the most efficient way to print out the table.
<!DOCTYPE html>
<html>
<title>ARMS Hamburger Site</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=9">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-32">
<button">Try it</button>
<script language="javascript">
var today = new Date();
var t0 = today.getSeconds();
var connection = new ActiveXObject("ADODB.Connection") ;
var table = document.getElementById("myTable");
var connectionstring="Provider=Microsoft.ACE.OLEDB.12.0;Data
Source=\\\\drivepath\\blah\\filedatabase.accdb;Jet OLEDB:Engine
Type=5;Persist Security Info=False;Mode=Share Exclusive;"
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("SELECT * FROM table", connection);
rs.MoveFirst
var str=rs.GetString(,,"</td><td>","</td></tr><tr><td>"," ");
rs.close;
connection.close;
var today2 = new Date();
var t1 = today2.getSeconds();
alert(t1-t0);
</script>
<center>
<table border="1" width="100%">
<tr>
<td><script language="javascript">document.Write(str)</script></td>
</tr>
</table>
</center>
<br>
</footer>
</body>
</html>
Duplicated Time Series are shown using D3-timeseries() in javascript but it is expected to show only one plot
I am currently using the code repository D3-timeseries at https://github.com/mcaule/d3-timeseries
The problem is that I only want to draw one time series but the plot I get is
From the scroll bar of the attached picture, you can see that it creates tons of the same time series plot.
Below you can see my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<style>
.dot {
stroke: #000;
}
</style>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3-timeseries/src/d3_timeseries.js"></script>
<link rel="stylesheet" type="text/css" href="d3-
timeseries/src/d3_timeseries.css">
<script type="text/javascript">
//var margin = { top: 50, right: 50, bottom: 50, left: 50 };
function main() {
d3.json("PeriodDetection-result.json", function(error, data) {
if (error) {
console.log(error);
return;
}
data.forEach(function(d){ d.newDate = new Date(d.newDate * 1000)
})
var chart = d3.timeseries()
.addSerie(data,{x:'newDate',y:'temp'},
{interpolate:'monotone',color:"#333"})
.width(1000)
chart("body")
var show = true;
});
}
setInterval(function() { main(); }, 250);
main();
</script>
</body>
</html>
My date file looks like
I attach the put a simplified json file below as well, which should be saved as PeriodDetection-result.json.
[{"newDate":519955200,"temp":6.6},{"newDate":520041600,"temp":6},{"newDate":520128000,"temp":6.9},{"newDate":520214400,"temp":7.7},{"newDate":520300800,"temp":8},{"newDate":520387200,"temp":3.9},{"newDate":520473600,"temp":0.8},{"newDate":520560000,"temp":2.8},{"newDate":520646400,"temp":8},{"newDate":520732800,"temp":9.8},{"newDate":520819200,"temp":11.4},{"newDate":520905600,"temp":8.6},{"newDate":520992000,"temp":5.2},{"newDate":521078400,"temp":6.6},{"newDate":521164800,"temp":5.7},{"newDate":521251200,"temp":4.6},{"newDate":521337600,"temp":5.8},{"newDate":521424000,"temp":7},{"newDate":521510400,"temp":4.8},{"newDate":521596800,"temp":4.4},{"newDate":521683200,"temp":4.4},{"newDate":521769600,"temp":7.9},{"newDate":521856000,"temp":10.6},{"newDate":521942400,"temp":5},{"newDate":522028800,"temp":7.6},{"newDate":522115200,"temp":9.2},{"newDate":522201600,"temp":9.7},{"newDate":522288000,"temp":8.8},{"newDate":522374400,"temp":6.8},{"newDate":522460800,"temp":9.4},{"newDate":522547200,"temp":11},{"newDate":522633600,"temp":2.5},{"newDate":522720000,"temp":2.1},{"newDate":522806400,"temp":5.4},{"newDate":522892800,"temp":6.2},{"newDate":522979200,"temp":7.8},{"newDate":523065600,"temp":7.4},{"newDate":523152000,"temp":9.3},{"newDate":523238400,"temp":9.3},{"newDate":523324800,"temp":9.5},{"newDate":523411200,"temp":8.5},{"newDate":523497600,"temp":10},{"newDate":523584000,"temp":7.7},{"newDate":523670400,"temp":9.3},{"newDate":523756800,"temp":9.1},{"newDate":523843200,"temp":3.5},{"newDate":523929600,"temp":3.6},{"newDate":524016000,"temp":2.5},{"newDate":524102400,"temp":1.7},{"newDate":524188800,"temp":2.7},{"newDate":524275200,"temp":2.9},{"newDate":524361600,"temp":5.3},{"newDate":524448000,"temp":7.7},{"newDate":524534400,"temp":9.1},{"newDate":524620800,"temp":9.4},{"newDate":524707200,"temp":7.3},{"newDate":524793600,"temp":8.4},{"newDate":524880000,"temp":9.2},{"newDate":524966400,"temp":6.6},{"newDate":525052800,"temp":9.7},{"newDate":525139200,"temp":12.4},{"newDate":525225600,"temp":10.2},{"newDate":525312000,"temp":5.9},{"newDate":525398400,"temp":7.1},{"newDate":525484800,"temp":7.5},{"newDate":525571200,"temp":9.7},{"newDate":525657600,"temp":12.2},{"newDate":525744000,"temp":5.6},{"newDate":525830400,"temp":5.4},{"newDate":525916800,"temp":8.3},{"newDate":526003200,"temp":10.6},{"newDate":526089600,"temp":9.1},{"newDate":526176000,"temp":11.3},{"newDate":526262400,"temp":10.9},{"newDate":526348800,"temp":8.9},{"newDate":526435200,"temp":6.3},{"newDate":526521600,"temp":9},{"newDate":526608000,"temp":6.1},{"newDate":526694400,"temp":9.1},{"newDate":526780800,"temp":9.6},{"newDate":526867200,"temp":6},{"newDate":526953600,"temp":10},{"newDate":527040000,"temp":11},{"newDate":527126400,"temp":6.2},{"newDate":527212800,"temp":8.3},{"newDate":527299200,"temp":11.3},{"newDate":527385600,"temp":11.3},{"newDate":527472000,"temp":6.7},{"newDate":527558400,"temp":6.6},{"newDate":527644800,"temp":11.4},{"newDate":527731200,"temp":6.9},{"newDate":527817600,"temp":10.6},{"newDate":527904000,"temp":8.6},{"newDate":527990400,"temp":11.3},{"newDate":528076800,"temp":12.5},{"newDate":528163200,"temp":9.9},{"newDate":528249600,"temp":6.9},{"newDate":528336000,"temp":5.5},{"newDate":528422400,"temp":7.8}]
Any help is highly appreciated!
Stupid error, in the code, just comment out this line,"setInterval(function() { main(); }, 250),then it will work.
You can also use Pondjs or Momentjs to do this, its much cleaner, but can be a little tedious. It deals with these points and auto plots them base don how to create the code based on chart implementation chart by using react-timeseries-charts. They both work well together with pond or moment.
JavaScript date issue should display error for invalid date
I am writing an html file to take date input. I am using date picker to select the date, instead of selecting date from the date picker, if the user is manually typing the date in text field for ex: 09/31/16 I need to give information to the user that date is invalid date. But my code given below is taking as october 1st 2016 when I created the date object. if I am converting date to ISOString it is displaying as 30th sept. But my desired output is to display the message to the browser as an "Invalid date". Please help me as I have to resolve this because I am going to use dates at many places during my development. Thank You.
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function () {
$("#datepicker").datepicker();
});
function verifyDate() {
var d = new Date($("#datepicker").val());
console.log(d);
var d = new Date($("#datepicker").val()).toISOString();
console.log(d);
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" onblur="verifyDate()"></p>
</body>
</html>
if you want to get the date on user selection, your code should be like:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker({
onSelect: function(){
var dateValue = $(this).datepicker('getDate');
console.log(dateValue);
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" ></p>
</body>
Following way of validating dates can help in this:
let dateObj = document.getElementById("datepicker");
if (dateObj.validity.badInput) {
// show error message
}