CODEWITHSUNDEEP
javascriptvue.jstimetimezone
Shakil Ahmed
Shakil Ahmed

Reputation: 24

Creating a clock with Vue.js

Recently I found a script and I started to develop it. But I am stuck with a problem.

My plan was to make a clock with Vue.js. But in this script the time is showing in 24 hours format. I need to make it 12 hours format.

Beside that I want to add different time zone on it like "Asia/Dhaka", "Asia/India", etc.

Here is the JavaScript code:

var clock = new Vue({
el: '#clock',
data: {
    time: '',
    date: ''
}
  });

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
 var timerID = setInterval(updateTime, 1000);updateTime();
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
  };

function zeroPadding(num, digit) {
var zero = '';
for(var i = 0; i < digit; i++) {
    zero += '0';
}
return (zero + num).slice(-digit);
}

For help I am also giving the HTML file below:

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
 <meta charset="UTF-8">
 <title>Xenon Clock</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Share+Tech+Mono'>
  <link rel="stylesheet" href="css/style.css">
 </head>
<body>
     <div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">Xenon Production</p>
  </div>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
    <script  src="js/index.js"></script>
  </body>
</html>

Upvotes: 1

Views: 1547

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7103

With some modifications from here:

function updateTime() {
  var cd = new Date();
  var hours = cd.getHours();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // The hour '0' should be '12'
  clock.time = zeroPadding(hours, 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2) + ' ' + ampm;
  clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
}

The HTML part doesn't change.

Upvotes: 1

Related Questions