I try to format an ISO date string with Intl.DateTimeFormat.
Since it does not accept strings, I have tried to modified the instance's format function.
It returns an error:
RangeError: Invalid time value
var str = '2018-05-30T12:20:51.526Z'
var date = new Date(str)
var dtf = new Intl.DateTimeFormat('en');
var format = dtf.format;
dtf.format = function(str) {
var date = new Date(str);
return format(date);
}
console.log(new Intl.DateTimeFormat('en').format(date)) // 5/30/2018
console.log(dtf.format(str))
Here is a JsBin with the code.
I think you could best use 'moment.js' to format it.
var str = '2018-05-30T12:20:51.526Z'
var date = new Date(str)
console.log(new Intl.DateTimeFormat('en').format(date))
console.log(moment(str).format("MM/DD/YYYY"));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<title>JS Bin</title>
</head>
<body>
</body>
</html>
Import the 'moment' script in your HTML file and you can convert your ISO date to whatever format you want.
Related
Best result i get is this, its simplest code i found here and save to MySQL on correct format. but i need to get GMT+7 datetime, how to add additional 7 Hours to this script?
<html>
<head>
<title>Web Page Design</title>
<script>
document.writeln(new Date().toISOString().slice(0, 19).replace('T', ' '));
</script>
</head>
<body><br>Current Date is displayed above...</body></html>`
Result :
2018-11-23 11:14:38
Current Date is displayed above...
If you just need to add 7 hours here is an example:
<html>
<head>
<title>Web Page Design</title>
<script>
var now = new Date();
now.setHours(now.getHours() + 7);
document.writeln(now.toISOString().slice(0, 19).replace('T', ' '));
</script>
</head>
<body><br>Current Date is displayed above...</body>
</html>`
i'm trying to convert date (from a input type="date") to miliseconds but my output is "NaN, NaN" for some reason.
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stats</title>
<h1>Stats</h1>
</head>
<body>
<div class="contenedorFechas" for="fechas">
<p>Insert date to promediate temps and humidity</p>
<input type="date" id="fechaUno">
<input type="date" id="fechaDos">
<input type ="button" id="btnPetDatos" value="Solcitar">
<p id="pRespuesta">...</p>
</div>
</body>
<script src="metodosJS.js" type="text/javascript"></script>
</html>
Javascript:
document.getElementById("btnPetDatos").onclick = function (){
var auxUno = new Date(document.getElementById("fechaUno").value);
var auxDos = new Date(document.getElementById("fechaDos").value);
var fechaUno = auxUno.getMilliseconds();
var fechaDos = auxDos.getMilliseconds();
var Parametros = [fechaUno,fechaDos];
document.getElementById("pRespuesta").innerHTML = Parametros;
}
You forgot to take value of date elements
document.getElementById("btnPetDatos").onclick = function (){
var auxUno = new Date(document.getElementById("fechaUno").value);
var auxDos = new Date(document.getElementById("fechaDos").value);
var fechaUno = auxUno.getMilliseconds();
var fechaDos = auxDos.getMilliseconds();
var Parametros = [fechaUno,fechaDos];
document.getElementById("pRespuesta").innerHTML = Parametros;
}
And are u sure to use getMilliseconds() method because u choose time so there is not hour or minute so u will take 0 always.
u can use getTime() method it return an integer to you. So you can use them how you want.
in cesium the default timezone is UTC. So I want to change the UTC timezone to SGT timezone....Can you correct my mistake and my code is found below.. SGT Timezone is GMT+8.. I want to see the Singapore time on the timeline and the clock view... Also i want the UTC replaced with SGT. here is my code below
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>SGT Timezone </title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
//SST timezone
var TZcode = 'SGT';
//Construct a new Date
var UTCoffset = new Date();
//Return the timezone difference between UTC and Local Time:
UTCoffset = -UTCoffset.getTimezoneOffset();
//Construct a Julian Date
var UTCscratch = new Cesium.JulianDate();
// Date formatting to a global form
function localeDateTimeFormatter(datetime, viewModel, ignoredate) {
if(UTCoffset) datetime = Cesium.JulianDate.addMinutes(datetime, UTCoffset, UTCscratch);
var gregorianDT = Cesium.JulianDate.toGregorianDate(datetime), objDT;
if(ignoredate)
objDT = '';
else {
objDT = new Date(gregorianDT.year, gregorianDT.month-1, gregorianDT.day);
objDT = gregorianDT.day + ' ' + objDT.toLocaleString("en-us", { month: "short" }) + ' ' + gregorianDT.year;
if(viewModel || gregorianDT.hour+gregorianDT.minute === 0)
return objDT;
objDT += ' ';
}
return objDT + Cesium.sprintf("%02d:%02d:%02d "+TZcode, gregorianDT.hour, gregorianDT.minute, gregorianDT.second);
}
function localeTimeFormatter(time, viewModel) {
return localeDateTimeFormatter(time, viewModel, true);
}
viewer.animation.viewModel.dateFormatter = localeDateTimeFormatter;
viewer.animation.viewModel.timeFormatter = localeTimeFormatter;
viewer.timeline.makeLabel = function(time) { return localeDateTimeFormatter(time); }
document.querySelectorAll('.cesium-timeline-ticLabel').forEach(function(i) {
i.textContent = i.textContent.replace("UTC", "SGT");
});
</script>
</body>
</html>
THE default timezone is UTC thus I want to change to SGT timezone which GMT +8
Why am I not getting time in local format inside the span with the timestamp class?
var modifiedField = document.querySelector(".modified");
var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";
modifiedField.innerHTML = modifiedFieldContent;
var updatedTime = new Date();
var timestamp = modifiedField.querySelector(".timestamp");
timestamp.appendChild(document.createTextNode(timestamp.toLocaleString()));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div class="modified"></div>
</body>
</html>
You use toLocaleString() on timestamp variable, which is an HTML element, instead of the updatedTime variable.
Try:
var modifiedField = document.querySelector(".modified");
var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";
modifiedField.innerHTML = modifiedFieldContent;
var updatedTime = new Date();
var timestamp = modifiedField.querySelector(".timestamp");
timestamp.appendChild(document.createTextNode(updatedTime.toLocaleString()));
<div class="modified"></div>
You're using the wrong variable.
You need
timestamp.appendChild(document.createTextNode(updatedTime.toLocaleString()));
How about this though:
document.querySelector(".modified").innerHTML = "Modified: " + new Date().toLocaleString();
First you forgot the span closing '>'var modifiedFieldContent = "Modified: <span class=\"timestamp\"></span";, then you have to call toLocaleString() on you updatedTime, not on your timestamp which is an Element.
I have create this custom angular js filter to format date and time but I have problem the format output is '03/25/2015 19:03 PM3/P3' from where this 3/p3 come from ?my format should be MM/DD/YYYY HH:MM AM/PM?
javascript
app.filter('formatDateAndTime', function () {
return function (input){
if (moment.utc(input).local().format('MM/DD/YYYY HH:MM AM/PM') === 'Invalid date')
return ' ';
else
return moment.utc(input).local().format('MM/DD/YYYY HH:MM AM/PM');
};
});
moment.utc(input).local().format('MM/DD/YYYY HH:MM A');
For AM/PM you must use A
angular.module("app",[])
.controller("MainCtrl", function($scope) {
$scope.query = moment();
})
.filter('formatDateAndTime', function () {
return function (input){
if (moment.utc(input).local().format('MM/DD/YYYY HH:MM AM/PM') === 'Invalid date')
return 'invalid ';
else
return moment.utc(input).local().format('MM/DD/YYYY HH:MM A');
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
{{query | formatDateAndTime}}
</body>
</html>
MM/DD/YYYY HH:MM AM/PM
should be
MM/DD/YYYY HH:MM A
AM/PM in moment's formatting in English means (AM/PM)(Month #)/P(Month #). See formatting docs here.