Is it possible to use 12 hour AM/PM instead of 24 hour?
how would you suggest modifying how the time and dates display? like for-mating wise.
I was hoping to look like
2:30
Instead of 14:30
Even leaving the pm off would be nice…
If possible.
Thank you
Yes, that should be possible. You can change the code by yourself on your local machine.
This is the code you should be looking at:
if (hours <= 9) {
hours = "0" + hours;
}
And here for how the time is shown:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds;
If you can’t manage I will have a look at it over the weekend 
Awesome, thank you for pointing me in the right direction. I found that line, wasnt sure what to change it too but after some googling this is what I came up with. Ill have to wait to see if it works. Ill report back, thanks again.
if (hours == 0) {
hours = "12" + hours;
You want USA-style time, correct?
Then you should do something like this:
if (hours > 12) {
hours = hours - 12;
}
Make sure to empty your browser-cache after every update otherwise you will not see the result of the changes you made to the code.
After putting in some more thought, this should give you what you want.
Untested though!
_updateTime() {
var days = ['Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.'];
var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
var day = Digital.getDate();
var year = Digital.getFullYear();
var month = Digital.getMonth() + 1;
var pm = 0;
if (hours > 12) {
hours = hours - 12;
pm = 1;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
if (day <= 9) {
day = "0" + day;
}
if (month <= 9) {
month = "0" + month;
}
if pm == 1:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "pm;"
else:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "am;"
this.date.innerHTML = days[Digital.getDay()] + " " + day + "." + month + "." + year;
The formatting might not be entirely correct, you can fix that yourself
Awesome thank you man!!!
Looks like its working, one last question. Is it possible to remove the leading ‘0’ ? So instead of:
01:35
remove the front zero
1:35
Sorry, there are some mistakes in my code. This is the corrected code:
_updateTime() {
var days = ['Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.'];
var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
var day = Digital.getDate();
var year = Digital.getFullYear();
var month = Digital.getMonth() + 1;
var pm = 0;
if (hours > 12) {
hours = hours - 12;
pm = 1;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
if (day <= 9) {
day = "0" + day;
}
if (month <= 9) {
month = "0" + month;
}
if pm == 1:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "pm";
else:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "am";
this.date.innerHTML = days[Digital.getDay()] + " " + day + "." + month + "." + year;
Also, I think there should not be a leading zero to the hour number as I am not adding this like in the original code. I need to be at home to be able to look into this.
In case some aren’t sure why the code for the date disappears for the afternoon times, you’ll need to include the date code in the if statement like the else statement.
if (pm == 1) {
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + " PM";
this.date.innerHTML = days[Digital.getDay()] + " " + month + "-" + day + "-" + year;
}
else {
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + " AM";
this.date.innerHTML = days[Digital.getDay()] + " " + month + "-" + day + "-" + year;
}
Hmm it’s still showing as a 24 hour clock
EDIT: clock-card…
da@ha:/home/homeassistant/.homeassistant$ cat www/clock-card.js
class ClockCard extends Polymer.Element {
static get template() {
return Polymer.html`
<style>
:host {
cursor: pointer;
}
.content {
padding: 24px 16px 16px;
}
.name {
margin-left: 16px;
font-size: 16px;
color: var(--secondary-text-color);
}
.now {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.main {
display: flex;
align-items: center;
margin-right: 32px;
}
.main .clock {
font-size: 52px;
line-height: 1em;
position: relative;
}
.date {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
opacity: var(--dark-primary-opacity);
}
</style>
<ha-card>
<div class="content">
<div class="now">
<div class="main">
<div class="clock" id="time"></div>
</div>
<div class="date">
<div id="date"></div>
</div>
</div>
</div>
</ha-card>
`
}
static get properties() {
return {
_hass: Object
}
}
ready() {
super.ready();
this.time = this.$.time;
this.date = this.$.date;
this._updateTime();
setInterval(() => this._updateTime(), 500);
}
setConfig(config) {
this.config = config;
}
_updateTime() {
var days = ['Sun.','Mon.','Tue.','Wed.','Thu.','Fri.','Sat.'];
var Digital = new Date();
var hours = Digital.getHours();
var minutes = Digital.getMinutes();
var seconds = Digital.getSeconds();
var day = Digital.getDate();
var year = Digital.getFullYear();
var month = Digital.getMonth() + 1;
var pm = 0;
if (hours > 12) {
hours = hours - 12;
pm = 1;
}
if (minutes <= 9) {
minutes = "0" + minutes;
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
if (day <= 9) {
day = "0" + day;
}
if (month <= 9) {
month = "0" + month;
}
if pm == 1:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "pm";
else:
this.time.innerHTML = hours + ":" + minutes + ":" + seconds + "am";
this.date.innerHTML = days[Digital.getDay()] + " " + day + "." + month + "." + year;
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return 3;
}
}
customElements.define('clock-card', ClockCard);
I got this working perfectly and changed some of the code to match with my desired format. Here is what I have:
Updated code:
My JS Code
2 Likes
I was clearing cache, messed with it awhile and couldnt get it.
I just borrowed @VMCosco code and thats perfect! thank you both very much!
I realized last night that 12:00 AM was still showing as 0:00 PM. The “PM” was because of the wrong sign in the code. I had to add an additional couple of lines for when hours = 0. I replaced the code above with what I came up with. I could still end up with midnight incorrectly showing 12:00 PM. It depends on the order expressions are evaluated. I am not a JS wizard so I am not exactly sure.
Updated Code:
JS Code
Thanks man, I appreciate you letting me know and sharing!!!
Keep finding more things. The clock was just reading 2:53 AM and it should be PM. Had to change the order of things. This one seems to work, until I find another issue. I also updated the links above.
Updated Code:
JS Code
1 Like
Tried your updated code, but added seconds back in on mine, unfortunately any seconds from 0 up 9 just show the single digit instead of the leading zero with it, so the first 10 seconds of any minute always make me do a double take, lol
I removed that code because I don’t use seconds. If you insert the following code at Line 109, you should be good:
}
if (seconds <= 9) {
seconds = "0" + seconds;
}
1 Like
How did you get the date underneath the time? I used this updated code and my date goes to the right of the time.