We Keep Coding

Javascript adding Timezone in my current script

i have this code on my script to show ticking clock
<script type="text/javascript">
function showTime() {
var date = new Date(),
time = new Date(Date.UTC(
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds()
));
document.getElementById('time').innerHTML = time.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
Anyone know how to change the timezone to a specific timezone like "Asia/Jakarta"
Thanks before!

for info : list of TZ (Time Zone)
you can change undefined to 'en-US' => get a country-specific presentation
(en-US is AM/PM, fr-FR -> 24h format, undefined -> local browser format)
see also : Javascript HTML Multiple Timezone Clock
const
timeLocal = document.querySelector('#time-Local span')
, timeLA = document.querySelector('#time-US-LA span')
, timeJakarta = document.querySelector('#time-Jakarta span')
;
let currentDate = new Date();
timeLocal.textContent = currentDate.toLocaleTimeString()
timeLA.textContent = currentDate.toLocaleTimeString(undefined, {timeZone:'America/Los_Angeles'} )
timeJakarta.textContent = currentDate.toLocaleTimeString(undefined, {timeZone:'Asia/Jakarta'} )
p { width: 16em; }
p span { float: right;}
<p id="time-Local"> local time: <span></span> </p>
<p id="time-US-LA"> Los_Angeles time: <span></span> </p>
<p id="time-Jakarta"> Jakarta time: <span></span> </p>

try something like this.
usaTime = date.toLocaleString("en-US", {timeZone: "America/New_York"});

How to Show HTML Text into Javascript

I tried to show some text into javascript but unable to do
First of all, here is the code
$('.example').each(function() {
var $t = $(this),
$w = $t.find('.widget.Text');
if ($w != undefined) {
months = $(this).text().replace($w, 'months');
days = $(this).text().replace($w, 'days');
months != false && $t.find('#example-done').text(months);
days != false ? days = Number(days) : days = 7;
}
});
// up to so...............on
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
<div class="widget Text">
months=(Accept) days=(20)
</div>
</div>
Here in the above code months and days data shows I tried to implement this data in javascript
months=(Accept) its value should be Accept in Js
days=(20) its value should be 20 Accept in Js
I tried the above method but not working
is there any method available to insert the above HTML format data in my Javascript
I think .split() function will resolve this problem please provide any guide (like we have to split both data with help of js and Text Trim)
Any help is highly appreciated
I just want to show months and days values into my javascript code, Please provide any code to fix this issue. I tried hard but I am unable to fix it. Like months=(Accept) and days=(20), Now how to show that value (20 and accept) into javascript? Please leave other code which I provide above Just guide me on how to show this HTML format data into js

Use .text() to get the contents of the DIV. Then you can use a regular expression to match the contents and extract the values.
$('.example').each(function() {
var $t = $(this),
$w = $t.find('.widget.Text').text();
if ($w) {
var match = $w.match(/months=\(([^)]*)\)\s+days=\((\d+)\)/);
if (match) {
var months = match[1];
var days = Number(match[2]);
console.log(`Months = ${months}, Days = ${days}`);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="example">
<div class="widget Text">
months=(Accept) days=(20)
</div>
</div>
See Reference - What does this regex mean? for explanations of the regular expression details.

Change
months = $(this).text().replace($w, 'months');
days = $(this).text().replace($w, 'days');
months != false && $t.find('#example-done').text(months);
days != false ? days = Number(days) : days = 7;
to
let a = $t.text().match(/months=\(([^(]*)\)\s+days=\(([^(]*)\)/);
months = a[1]; days = a[2];
days = days === '' ? 7 : +days;

Replace ISO-Date with normal Date in HTML Document via Widget

my problem is the following . Im using Duda widget Builder to build my own Widgets. In one application there is a Date and by default its depicted as ISO .
Now converting that isnt too hard, I tried the following :
if (document.getElementById("date") !== null) {
let date = document.getElementById("date").toString();
let dater = date.substring(0, 10);
document.getElementById("date").innerHTML.replace(date, dater);
console.log('Test');
}
<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>
Now it doesnt throw any errors and it console.logs the "Test". But the date stays in ISO.
The widget works with jQuery I believe it has something to do with that.
The widget interface where you write down the javascript is encapsulated by this: function(element,data,api){ 'my js code from above'}
Please help.

The issue is because you never update the content of the element after working with the content. Also note that you don't need to use replace(). Try this:
let el = document.getElementById("date");
if (el) {
el.textContent = el.textContent.substring(0, 10);
}
<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>
That being said, you're just getting the first 10 characters of the date string, which is not infallible. If the locale changes your code will break. To fix this you can create a Date object from the string and output the format you require explicitly:
let el = document.getElementById("date");
if (el) {
let date = new Date(el.textContent);
let year = date.getFullYear();
let month = ("00" + (date.getMonth() + 1)).slice(-2);
let day = ("00" + date.getDate()).slice(-2);
el.textContent = `${year}-${month}-${day}`;
}
<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>

You can also use Moment.js for format the date you need.
const el = document.querySelector('#date');
const myDateFormat = 'YYYY-MM-DD';
const date = el.textContent;
const newDate = moment(date, myDateFormat).format(myDateFormat);
el.textContent = newDate;
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<div class="Wrapper shadow">
<h3 class="date" id="date">2020-02-20T14:39:40Z</h3>
</div>
Hope to help you and others ^^.

Get date from bootstrap-datepicker and print separately

I am using Bootstrap Date picker. I want to get date value(20-Sep-19) and print it in three different div's(so as i can style them differently).
<div class="input-group date">
<input type="hidden" id="date-input" value="20-Sep-19" class="form-control">
<div id="div1">20 </div>
<div id="div2">Sep'19</div>
<div id="div3">Wednesday</div>
</div>
$(function(){
$('.input-group.date').datepicker({
format: 'dd-M-yy',
todayHighlight: true,
autoclose: true});
});
I have tried some jquery but doesn't work.
$(document).on("change", "#date-input", function () {
var date = new Date($('#date-input').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
alert([day, month, year].join('/'));
});
Anyone know how this can be achieved. Thanks in Advance.

Check out this fiddle for a quick implementation.
Your Javascript will need to parse the data sent back from the dateChange event of the datepicker element
picker.on("changeDate", function(e) {
div1.text(e.date.getDate());
var month = getMonthName(e.date.getMonth());
var year = ("" + e.date.getYear()).substr(1, 3);
div2.text(month + " '" + year);
div3.text(getDayOfWeek(e.date.getDay()));
});
The getMonthName and getDayOfWeek functions simply take in an integer and return the corresponding month/day.
From the sounds of things, you're relatively new to Javascript. I would highly recommend that you fully understand how to utilize Javascript and jQuery.
Please see the following resources for more information:
* JS Date and utilities
* jQuery .text()
* Bootstrap-datepicker changeDate documentation

Warp.js date starting from previous date

This script using warp.js works great starting from the current date. I can't seem to figure out how to get it to work starting from a previous date like Jan 2nd, 1986?
warp.js
https://github.com/mattbradley/warpjs/blob/master/README.md
Thanks!
<body>
<script src="warp.js"></script>
<div id="container"></div>
<span id="info"></span><br>
<span id="time"></span>
<span id="time2"></span>
<script>
setInterval(function() {
//specify a start date here like Jan 2 1986
Date.warp.speed(3);
var now = new Date;
//new date put out the warped start date above?
var dateD = [now.getMonth() + 1, now.getDate(), now.getFullYear()];
var dateE = [now.getHours(), now.getMinutes(), now.getSeconds()];
var MDY = dateD.join("/");
var HMS = dateE.join(":");
time.innerHTML = (MDY);
time2.innerHTML = (HMS);
}, 1000);
</script>
</body>
</html>

I figured this out. You have to use the clock() function so set your custom date, and it will then warp from that custom date.
Date.warp.clock(customDate);