Change UTC timezone to SGT timezone in Cesiumjs - javascript

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

Related

wrap Intl.DateTimeFormat's format

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.

Is there any option to change locale in sap.m.Datepicker?

sap.ui.commons.DatePicker has a property "locale" to set language of datepicker.But I dont find any property as such in "sap.m.DatePicker" to change the locale.Is there any possible way this can be done?
There is no direct property for locale in DatePicker. However, there is a somewhat clumsy trick to overcome this, and unfortunately it uses private attribute "_oDisplayFormat", which stores an instance of sap.ui.core.format.DateFormat. The snippet demonstrating this is below:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="UI5 DatePicker with non-default locale"/>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>UI5 DatePicker Example with different Locales</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.core'>
</script>
<script>
var oVBox = new sap.m.VBox({ width: "50%"});
var oFrenchFormat;
var oEnglishFormat;
var oDatePicker = new sap.m.DatePicker({ dateFormat: "long" });
oDatePicker.setValue(new Date());
oVBox.addItem(oDatePicker);
oVBox.addItem(new sap.m.Button({
text: "Set French locale",
press: function(oEvent) {
if (!oFrenchFormat) {
oFrenchFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("fr_FR"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oFrenchFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.addItem(new sap.m.Button({
text: "Set US locale",
press: function(oEvent) {
if (!oEnglishFormat) {
oEnglishFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("en_US"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oEnglishFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

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.

JQuery Datepicker

Could someone help me to change code, I want to let my members choose a sunday between March – October (of every year ).
But only the 2nd or 4th Sunday of the month.
Thanks for help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$("#datepic").datepicker(
{ beforeShowDay: function(day) {
var day = day.getDay();
if (day == 2 || day == 5| day == 4| day == 6| day == 1| day == 3)
{
return [false, "somecssclass"]
} else {
return [true, "someothercssclass"]
}
}
});
});
</script>
</head>
<body>
<p>Uw voorkeursdatum: <input id="datepic"/>
</body>
</body>
</html>
beforeShowDay option is the right place to allow 2nd and 4th sundays only to be picked.
In order to do this, I used two "flags" (variable used to determine a certain state within a loop).
One flag which toggles each time a sunday is encountered in the loop.
And one to be sure to consider only the current month sundays.
DatePicker is looping through each table cells in the function provided in the beforeShowDay option.
And even if it isn't "rendered", days from the previous or next months ARE going through this loop.
I also used a 100ms timeout to reset these flags once a month has been drawn.
It is needed when navigating from a month to another.
Here is the function working in this CodePen.
I left a couple useful console.log.
;)
$(function() {
var even=false;
var inCurrentMonth=false;
$("#DatePicker").datepicker({
beforeShowDay: function(fulldate) {
//console.log(fulldate);
var day = fulldate.getDay();
var date = fulldate.getDate();
// In current month when the date 1 is found.
if(date==1){
inCurrentMonth=!inCurrentMonth;
// To reset values right after month draw.
setTimeout(function(){
even=false;
inCurrentMonth=false;
},100);
}
// This condition prevents conting syndays frome the previous month.
if(inCurrentMonth){
// If NOT a sunday.
if ( day != 0 ){
return [false,"Otherdays"]
} else {
// If this sunday is even (2nd or 4th)
if(even){
even=!even;
return [true,"Selectable-Sunday","You can select me!"]
}else{
even=!even;
return [false,"Unselectable-Sunday"]
}
}
}
}
}).focus();
});

Check Date greater than 30 days from today's date

I am using jQuery datepicker and tried to find out difference between todays date and selected date , but getting issues... rather than issues... I was not able to find it perfectly...
I tried to do this on 'onSelect event of datepicker '
Question:
How to check whether selected Date using jQuery Datepicjer is greater than 30 days from todays date ?
Any help will be appreciated....!!
note: dont want to use any libraries, I need to solve this by using only jQuery.
Get the timestamp for 30 days from now:
var timestamp = new Date().getTime() + (30 * 24 * 60 * 60 * 1000)
// day hour min sec msec
Compare that timestamp with the timestamp for the selected date.
if (timestamp > selectedTimestamp) {
// The selected time is less than 30 days from now
}
else if (timestamp < selectedTimestamp) {
// The selected time is more than 30 days from now
}
else {
// -Exact- same timestamps.
}
I have created one sample for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <input type="text" id="thedate"/>
<div id="checkDate">Check Date</div>
</body>
</html>
and Js
$('#thedate').datepicker();
$('#checkDate').bind('click', function() {
var selectedDate = $('#thedate').datepicker('getDate');
var today = new Date();
var targetDate= new Date();
targetDate.setDate(today.getDate()+ 30);
targetDate.setHours(0);
targetDate.setMinutes(0);
targetDate.setSeconds(0);
if (Date.parse(targetDate ) >Date.parse(selectedDate)) {
alert('Within Date limits');
} else {
alert('not Within Date limits');
}
});
You can check this code online Here
Try this:
$('input').datepicker({
onSelect: function()
{
var date = $(this).datepicker('getDate');
var today = new Date();
if((new Date(today.getFullYear(), today.getMonth(), today.getDate()+30))>date)
{
//Do somthing here..
}
},
});
demo: http://jsfiddle.net/jeY7S/

Categories