Detecting 12/24 hour clock setting

[nevraw]

How do we detect whether the Ionic has been set to 12 or 24 hour display mode?  

   
Will need this for digital clock faces.

[nevraw]

I have found the User-settings API in the reference documentation.  

So, would I access it with something like this:

  import (UserSettings) from "User-settings";

  var settings = new UserSettings();

  if (settings.clockDisplay === "12h") .....

[JonFitbit · Accepted solution]

import { preferences } from "user-settings";
console.log(preferences.clockDisplay);

(edited) 

[Cmspooner]

---

@JonFitbit wrote:

import { Preferences } from "user-settings";
console.log(Preferences.clockDisplay);

---

preferences needs to be lowercase. 

import { preferences } from "user-settings";
console.log(preferences.clockDisplay)

I hate to be "that guy"; but copying your sample caused a bit of frustration as it would fail to load clockdisplay from undefined.

[JonFitbit]

Thanks, I've fixed my reply

[Jennthemom]

I'm sorry; I'm not familiar with writing code.  I just used the help instructions fitbit provided in order to make my own clock face.  This (below) is the index code.  Where do I put the code you provided in order to change my time from 24-hour to 12-hour?  I'm sorry; I imagine this is a dumb question but I just can't figure it out. 

import clock from "clock";
import document from "document";

import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
let myLabel = document.getElementById("myLabel");

// Update the <text> element with the current time
function updateClock() {
let today = new Date();
let hours = today.getHours();
let mins = util.zeroPad(today.getMinutes());

myLabel.text = `${hours}:${mins}`;
}

// Update the clock every tick event
clock.ontick = () => updateClock();

[JonFitbit]

---

@Jennthemom wrote:

I'm sorry; I'm not familiar with writing code.  I just used the help instructions fitbit provided in order to make my own clock face.  This (below) is the index code.  Where do I put the code you provided in order to change my time from 24-hour to 12-hour?  I'm sorry; I imagine this is a dumb question but I just can't figure it out. 

import clock from "clock";
import document from "document";

import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
let myLabel = document.getElementById("myLabel");

// Update the <text> element with the current time
function updateClock() {
let today = new Date();
let hours = today.getHours();
let mins = util.zeroPad(today.getMinutes());

myLabel.text = `${hours}:${mins}`;
}

// Update the clock every tick event
clock.ontick = () => updateClock();

---

Try this:

import clock from "clock";
import document from "document";
import * as util from "../common/utils";
import { preferences } from "user-settings";

// Update the clock every minute
clock.granularity = "minutes";
// Get a handle on the <text> element
let myLabel = document.getElementById("myLabel");
// Update the <text> element with the current time
function updateClock() {
    let today = new Date();
    let hours = today.getHours();
    if (preferences.clockDisplay === "12h") {
        hours = (hours + 24) % 12 || 12;
    }
    let mins = util.zeroPad(today.getMinutes());
    myLabel.text = `${hours}:${mins}`;
}
// Update the clock every tick event
clock.ontick = () => updateClock();

[Jennthemom]

Ah!  Thank you so much!  That did it!  You are awesome!  There is absolutely no way I would ever have figured out how to customize my watch face without you.  I really appreciate your help.

[JonFitbit]

---

@Jennthemom wrote:

Ah!  Thank you so much!  That did it!  You are awesome!  There is absolutely no way I would ever have figured out how to customize my watch face without you.  I really appreciate your help.

---

Thanks! If you're on Twitter, you should share your creation with the world. #made4fitbit

[CentrevilleDad]

Thanks! I also prefer the 12 hour time and the solution worked for me. However, the clock face doesn't show am or pm after the time. Is there a way to add that?

[Cmspooner]

Here is how I do it:

let ampm = " am"
if (preferences.clockDisplay == "12h"){
  if (hours > 12){
    ampm = " pm";
    hours -= 12;
  } else if (hours == 12){
    ampm = " pm"
  } else if (hours == 0 && ampm == " am"){
    hours += 12;
  }
} else {
  ampm = ""
}
clockLabel.text = `${hours}:${mins}${ampm}`;

[CentrevilleDad]

Worked perfectly! Thanks so much.

[MichaelGaming02]

How can I add 12h clock?

import clock from "clock";

clock.granularity = "seconds"; // seconds, minutes, hours

clock.ontick = function(evt) {
  // Output the date object
  console.log(evt.date.toString());
};

import document from "document";
import * as simpleActivity from "./simple/activity";
import * as simpleClock from "./simple/clock";
import * as simpleHRM from "./simple/hrm";
import { preferences } from "user-settings";
import * as util from "../common/utils";

let txtDate = document.getElementById("txtDate");
let txtHRM = document.getElementById("txtHRM");
let iconHRM = document.getElementById("iconHRM");
let imgHRM = iconHRM.getElementById("icon");
let statsCycle = document.getElementById("stats-cycle");
let statsCycleItems = statsCycle.getElementsByClassName("cycle-item");

function clockCallback(data) {
  txtDate.text = data.date;
}
simpleClock.initialize("minutes", "longDate", clockCallback);

function activityCallback(data) {
  statsCycleItems.forEach((item, index) => {
    let img = item.firstChild;
    let txt = img.nextSibling;
    txt.text = data[Object.keys(data)[index]].pretty;
    // Reposition the activity icon to the left of the variable length text
    img.x = txt.getBBox().x - txt.parent.getBBox().x - img.width - 7;
  });
}
simpleActivity.initialize("seconds", activityCallback);

function hrmCallback(data) {
  txtHRM.text = `${data.bpm}`;
  if (data.zone === "out-of-range") {
    imgHRM.href = "images/heart_open.png";
  } else {
    imgHRM.href = "images/heart_solid.png";
  }
  if (data.bpm !== "--") {
    iconHRM.animate("highlight");
  }
}
simpleHRM.initialize(hrmCallback);

// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  let mins = util.zeroPad(today.getMinutes());
  myLabel.text = `${hours}:${mins}`;
}
import document from "document";
import clock from "clock";

let myClock = document.getElementById("myClock");

clock.granularity = 'seconds'; // seconds, minutes, hours

clock.ontick = function(evt) {
  myClock.text = ("0" + evt.date.getHours()).slice(-2) + ":" +
                      ("0" + evt.date.getMinutes()).slice(-2) + ":" +
                      ("0" + evt.date.getSeconds()).slice(-2);
};

[FreddieNotFit]

i dont really know where to ask this so i ll just relpy here. im having a hard time figuring out how to make a versa detect 12 hour clock vs 24 hour clock, it seem to be stuck on 24. I just dont know what im doing to be honest. this is what i have in the index page.

import clock from "clock";
import { preferences } from "user-settings";
import document from "document";
import { HeartRateSensor } from "heart-rate";
import * as util from "../common/utils";
import { today } from "user-activity";

console.log(preferences.clockDisplay);

// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
let date = document.getElementById("date");
let time = document.getElementById("time");
let hBpm = document.getElementById("heartRate");

var hrm = new HeartRateSensor();

hrm.onreading = function(){
//hBpm.text = hrm.heartRate + " BPM";
//console.log("Current heart rate: " + hrm.heartRate);
}

hrm.start();

// Update the <text> element with the current time
function updateClock() {
let today = new Date();

date.text = util.getDateString(today);
time.text = util.getTimeString(today);
hBpm.text = hrm.heartRate + " BPM";
}

// Update the clock every tick event
clock.ontick = () => updateClock();

[Gondwana]

The question has already been answered above (clockDisplay). Your getTimeString() function needs to take this into account.

[Krish_2009]

This is the way I find it efficient. Put this into your index.js: 

AMPM.text = today.getHours() < 12 ? "AM" : "PM";}

If this answer works please mark this post as a Best Answer.  ~ K.K Designs