09-05-2017 17:58 - edited 09-05-2017 18:44
09-05-2017 17:58 - edited 09-05-2017 18:44
How do we detect whether the Ionic has been set to 12 or 24 hour display mode?
Will need this for digital clock faces.
Answered! Go to the Best Answer.
09-05-2017 22:56 - edited 11-09-2017 09:15
09-05-2017 22:56 - edited 11-09-2017 09:15
import { preferences } from "user-settings"; console.log(preferences.clockDisplay);
(edited)
09-05-2017 22:34
09-05-2017 22:34
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") .....
09-05-2017 22:56 - edited 11-09-2017 09:15
09-05-2017 22:56 - edited 11-09-2017 09:15
import { preferences } from "user-settings"; console.log(preferences.clockDisplay);
(edited)
11-09-2017 09:01
11-09-2017 09:01
@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.
11-09-2017 09:15
11-09-2017 09:15
Thanks, I've fixed my reply
11-28-2017 21:28
11-28-2017 21:28
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();
11-29-2017 10:07
11-29-2017 10:07
@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();
11-29-2017 10:14 - edited 11-29-2017 11:11
11-29-2017 10:14 - edited 11-29-2017 11:11
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.
11-29-2017 11:34
11-29-2017 11:34
@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
01-04-2018 17:22
01-04-2018 17:22
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?
01-04-2018 17:56
01-04-2018 17:56
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}`;
01-04-2018 18:14
01-04-2018 18:14
Worked perfectly! Thanks so much.
09-06-2018 02:01
09-06-2018 02:01
08-08-2020 13:30
08-08-2020 13:30
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();
08-08-2020 13:39
08-08-2020 13:39
The question has already been answered above (clockDisplay). Your getTimeString() function needs to take this into account.
10-06-2020 15:07 - edited 08-04-2021 20:17
10-06-2020 15:07 - edited 08-04-2021 20:17
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