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
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
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;
}
How did you get the date underneath the time? I used this updated code and my date goes to the right of the time.
On mine it is just based on the width of the card. If the card too narrow for the date to fit on the right, it moves it down. I am not sure how to do line breaks in JS
haha thanks. I figured it out too it was the width of the card! Thank you
@VMCosco I used your code for one of my tablet dashboards at the request of the wife. Very nice. Thank you for posting.
Hi! Is it possible to change font family in your clock card?
/Dir
Do you happen to have the steps you took to import this js/card? Thanks!