wrap Intl.DateTimeFormat's format - javascript

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

How to convert JS date time to Local MySQL datetime?

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>`

Convert from input type date to miliseconds using javascrip?

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.

Change UTC timezone to SGT timezone in Cesiumjs

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

Creating text node results in [object HTMLSpanElement], why?

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.

custom angularjs filter date time format extra characters?

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.

Categories