Develop Reference

How To convert UTC into local time on the web with javascript? from http://openweathermap.org/

I am building a weather app using HTML, CSS and JavaScript.
I have succeed in displaying my current time but no luck displaying local time of the input city.
here is what it looks like:
Can I perhaps us getTimeZoneOffset() somewhere? I don't seem to figure out
function displaytheResults (weather) {
let now = new Date();
let date = document.querySelector('.location .date')
date.innerText = dateBuilder(now);
}
function dateBuilder(dt) {
let months = ['January', 'Febuary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
let days = ['Monday', 'Tuesday', 'Wednesday','Thursday', 'Friday', 'Saturday']
let date = dt.getDate();
let year = dt.getFullYear();
let day = days[dt.getDay()];
let month = months[dt.getMonth()]
return `${day} ${date} ${month} ${year}`;
}

Once you have the offset value, pass it into this function, in order to get the time in the desired city:
function dateBuilder(city, offset) {
var date = new Date();
var utc = date.getTime() + (date.getTimezoneOffset() * 60000);
var newDate = new Date(utc + (3600000 * offset));
return `The local time in ${city} is ${newDate.toLocaleString()}`
}

How to change the number format to letters the months in javascript [duplicate]

This question already has answers here:
Get month name from Date
(40 answers)
Closed 2 years ago.
const getCurrentDate = () => {
var date = new Date().getDate();
var month = new Date().getMonth();
return date + "-" + month;
};
I want to transform the number on the month var to letters f.e " 2-8 to 2 - August "

Create a const-array for the months and get the month-th element of it.
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const getCurrentDate = () => {
var date = new Date().getDate();
var month = new Date().getMonth();
return date + "-" + MONTHS[month];
};
console.log(getCurrentDate());

Date time format changes when browser viewport is being resize

Scenario is:
I have a displayed full live datetime in javascript including name of the day.
However that format consumes too much space when the viewport is being resized so my solution is to
change the format (make it shorter) if the screen size is smaller.
It goes like this:
When the user has a very wide screen I'd like to provide her/him the full datetime and day like this:
"23:34:39 - October 3, 2019 - Thursday"
When the user is using a tablet format should be:
"23:34:39 - Oct 3, 2019 - Thu"
And when the user is on mobile or older phones which has a very small screen, the format should be:
"23:34:39 - 2019-10-03 - Thu" of if the code detects even smaller screen I will remove the seconds.
I have found several threads here about rezise(function()); here and addEventListener here also another one here so I have done some modification in my code but I can't seem to make it work, there is no display at all after I added the addEventListener.
here is my jsclock.js
window.addEventListener("resize", function() {
if (window.matchMedia("(min-width: 1000px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ '+months[month]+' '+d+', ' +year+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
} else if (window.matchMedia("(min-width: 800px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
d = date.getDate();
day = date.getDay();
days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ '+months[month]+' '+d+', ' +year+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
} else (window.matchMedia("(min-width: 200px)").matches) {
function date_time(id) {
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12');
d = date.getDate();
if(d<10)
{
d = "0"+d;
}
day = date.getDay();
days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = ''+h+':'+m+':'+s+' ❖ ' +year+'-'+months[month]+'-'+d+' ❖ '+days[day]+'';
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}
}
and how I'm displaying it.
span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>

Generate the HTML for all the timestamps:
<span class="size-l date-time">nice and long datetimestamp<span>
<span class="size-m date-time">shorter datetimestamp<span>
<span class="size-s date-time">shortstamp</span>
and then hide them by default using CSS, with media queries that unhide whichever needs to be unhidden. There is no reason to use JS here at all:
.date-time { display: none; }
#media screen and (min-width: 300px) {
.size-s .date-time { display: inline-block; }
}
#media screen and (min-width: 576px) {
.size-m .date-time { display: inline-block; }
}
#media screen and (min-width: 800px) {
.size-l .date-time { display: inline-block; }
}

Is it possible to pop up a html element?

My requirement is like I have a textarea which is disabled. On click of a button the user should be prompted for a datetime and it should be appended to the textarea value with a newline so that I can read it later one by one. Because I need to store these datetime values in an xml file which would be used to remember these values.
I am looking for a way to get a datetime input on click of a button. I thought to popup a datetime element to get the input using jquery. But I am not sure will it work or not. Is there any way to do it ?
<textarea id="schedule" name="schedule" placeholder="Mailing Schedule's" class="inputarea" disabled="disabled"></textarea>
$('#addschedule').click(function(){
var schedule=prompt("Enter Schedule");
var val = $("textarea#schedule").val();
if(val!="")
$("textarea#schedule").val(val+"\n"+schedule);
else
$("textarea#schedule").val(schedule);
});
I tried it for text input. But I dont know how to do it for datetime. Sorry If its not that good question. But some help would be appreciated.

$(function(){
$('button').click(function(){
var d = new Date();
var t = d.toLocaleTimeString();
var mL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var mS = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var week = ["Sunday", "Monday", "Tuesday", "Wednesday","Thursday", "Friday", "Saturday"];
var day = week[d.getDay()];
var date = d.getDate();
var month = mL[d.getMonth()];
var year = d.getFullYear();
var total = day+' '+date+' '+month+' '+year+' '+t+'\n';
var schedule=prompt("Enter Schedule", 'here');
var val = $("textarea#schedule").val();
if(val!=="")
$("textarea#schedule").val(val+'\n'+total+' '+schedule);
else
$("textarea#schedule").val(total+' '+schedule);
});
});

How do I format a date string without changing the culture?

I am getting string data from a Google Calendar feed. The date is already set, by parameter, with the desired timezone.
2014-05-24T07:00:00.000-04:00
I know there are wonderful libraries like moment.js and date.js this will help format my date, but they also work with a Date object, which throws my date into a client's culture. At that point I am then juggling offsets. Would rather avoid that.
Other than a lot of conditional string manipulation, is there a simple way to do this, or I am oversimplifying (again)?
Example:
2014-05-24T07:00:00.000-04:00 to May, 24, 2014 - 7:00 AM

The following short code will parse your date, using the values present, without offsetting by the timezone:
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var res = /(\d+)\-(\d+)\-(\d+)T(\d+)\:(\d+)/
.exec('2014-05-24T07:00:00.000-04:00');
var am = (res[4] < 12);
var date = months[res[2]-1] + ', ' + res[3] + ', ' + res[1];
var time = am ? (parseInt(res[4]) + ':' + res[5] + 'AM') :
(res[4] - 12 + ':' + res[5] + 'PM');
var formatted = date + ' - ' + time;
console.log(formatted);

You can convert this string into a Date object like below,
new Date("2014-05-24T07:00:00.000-04:00")
Then you can easily convert this date object into your desired format by using any of the jQuery libraries such as jquery.globalize.js ...

Here you go:
var d = new Date('2014-05-24T07:00:00.000-04:00');
var calendar = {
months: {
full: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
days: {
full: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
short: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
};
console.log(calendar.months.short[d.getMonth()]+', '+d.getDate()+', '+d.getFullYear());

A simple function to reformat the string is:
function reformatDateString(s) {
s = s.match(/\d+/g);
var months = ['January','February','March','April','May','June','July',
'August','September','October','November','December'];
var ampm = s[3]<12? 'AM':'PM';
return months[--s[1]] + ', ' + +s[2] + ', ' + s[0] + ' - ' +
(s[3]%12 || 12) + ':' + s[4] + ' ' + ampm;
}
console.log(reformatDateString('2014-05-24T07:00:00.000-04:00')); // May, 24, 2014 - 7:00 AM
console.log(reformatDateString('2014-05-24T17:00:00.000-04:00')); // May, 24, 2014 - 5:00 PM
console.log(reformatDateString('2014-05-04T00:20:00.000-04:00')); // May, 4, 2014 - 12:20 AM
Which also assumes that you don't want leading zeros on single digit numbers except for the minutes, as a time like 12:5 PM isn't as readable (to me) as 12:05 PM.
Also you may need to modify the months array, it's not clear in the OP whether you want full month names or abbreviations (Jan, Feb, etc.).