Mario Boss Mario Boss - 1 year ago 121
Javascript Question

FullCalendar - how to add leading zero to getUTCMinutes function

Is there any simple way to add leading zero when I want use getUTCMinutes (FullCalendar library).
In default mode the function will display 0-9 minutes and then 10-59. How to display 00-09 and then 10-59.

for example I have:

$('#div').html(Time: '+ event.start._d.getUTCHours()+':'+event.start._d.getUTCMinutes());


Let's say that event.start._d keeps value: 2017-07-13T16:00:00.000Z and I want display only time as 16:00. Above code will display: 16:0

I know that I can do it like below code and it will work (the result will be: "16:00"):

minutes = (event.start._d.getUTCMinutes() < 10) ? '0'+event.start._d.getUTCMinutes() : event.start._d.getUTCMinutes();

$('#div').html(Time: '+ event.start._d.getUTCHours()+':'+minutes);


but maybe there is more elegant solution ?

many thanks for sugestions

Answer Source

Since fullCalendar requires momentJS, you already have this library available to you and it's a lot easier to use that the native JS Date object.

See the comparison below for a simpler version which will output the correct value using momentJS:

var m = moment("2017-07-13T16:00:00.000Z");
var event = {
  start: m
};

$('#native').append(event.start._d.getUTCHours() + ':' + event.start._d.getUTCMinutes());
event.start.utc();
$("#moment").append(event.start.format("HH:mm"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="native">
  Using native date:
</div>
<br/><br/>
<div id="moment">
  Using momentJS:
</div>

See http://momentjs.com/docs/#/manipulating/utc/ and http://momentjs.com/docs/#/displaying/format/ for more details of the momentJS functions involved.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download