React Live Clock AM PM in caps is not visible

I am using React Live clock and trying to use AM/PM mode of but the output is small and shows like this enter image description here

timeFormat = 'h:mm:ss A';

asked Nov 21 '18 at 7:57

Adeel

You want the text to be bigger?
– Shawn Andrews
Nov 21 '18 at 8:00

Yes, the output is basically A not properly AM/PM
– Adeel
Nov 21 '18 at 8:17

the bigger text is already visible with this string 'h:mm:ss A'
– Adeel
Nov 21 '18 at 8:17

add a comment |

I am using React Live clock and trying to use AM/PM mode of but the output is small and shows like this enter image description here

timeFormat = 'h:mm:ss A';

asked Nov 21 '18 at 7:57

Adeel

You want the text to be bigger?
– Shawn Andrews
Nov 21 '18 at 8:00

Yes, the output is basically A not properly AM/PM
– Adeel
Nov 21 '18 at 8:17

the bigger text is already visible with this string 'h:mm:ss A'
– Adeel
Nov 21 '18 at 8:17

add a comment |

I am using React Live clock and trying to use AM/PM mode of but the output is small and shows like this enter image description here

timeFormat = 'h:mm:ss A';

asked Nov 21 '18 at 7:57

Adeel

I am using React Live clock and trying to use AM/PM mode of but the output is small and shows like this enter image description here

timeFormat = 'h:mm:ss A';

reactjs clock live

asked Nov 21 '18 at 7:57

Adeel

asked Nov 21 '18 at 7:57

Adeel

asked Nov 21 '18 at 7:57

Adeel

asked Nov 21 '18 at 7:57

Adeel

asked Nov 21 '18 at 7:57

Adeel

You want the text to be bigger?
– Shawn Andrews
Nov 21 '18 at 8:00

Yes, the output is basically A not properly AM/PM
– Adeel
Nov 21 '18 at 8:17

the bigger text is already visible with this string 'h:mm:ss A'
– Adeel
Nov 21 '18 at 8:17

add a comment |

You want the text to be bigger?
– Shawn Andrews
Nov 21 '18 at 8:00

Yes, the output is basically A not properly AM/PM
– Adeel
Nov 21 '18 at 8:17

the bigger text is already visible with this string 'h:mm:ss A'
– Adeel
Nov 21 '18 at 8:17

You want the text to be bigger?
– Shawn Andrews
Nov 21 '18 at 8:00

Yes, the output is basically A not properly AM/PM
– Adeel
Nov 21 '18 at 8:17

the bigger text is already visible with this string 'h:mm:ss A'
– Adeel
Nov 21 '18 at 8:17

add a comment |

2 Answers
2

active

oldest

votes

If you're using react-live-clock, you can set the style attribute as described here.

e.g. The following settings:

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

generated this view: enter image description here

Note:

I uploaded the sample project to my github repository here;

Follow the README.MD file for details on how to clone and start the application locally.

Goodluck!

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

1

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

|
show 1 more comment

You can add a function to format the date to change and A and P to AM and PM, respectively.

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53407497%2freact-live-clock-am-pm-in-caps-is-not-visible%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

If you're using react-live-clock, you can set the style attribute as described here.

e.g. The following settings:

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

generated this view: enter image description here

Note:

I uploaded the sample project to my github repository here;

Follow the README.MD file for details on how to clone and start the application locally.

Goodluck!

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

1

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

|
show 1 more comment

If you're using react-live-clock, you can set the style attribute as described here.

e.g. The following settings:

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

generated this view: enter image description here

Note:

I uploaded the sample project to my github repository here;

Follow the README.MD file for details on how to clone and start the application locally.

Goodluck!

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

1

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

|
show 1 more comment

If you're using react-live-clock, you can set the style attribute as described here.

e.g. The following settings:

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

generated this view: enter image description here

Note:

I uploaded the sample project to my github repository here;

Follow the README.MD file for details on how to clone and start the application locally.

Goodluck!

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

If you're using react-live-clock, you can set the style attribute as described here.

e.g. The following settings:

<Clock style={{fontSize: '10.5em'}}  format={'h:mm:ss A'} ticking={true} timezone={'US/Pacific'} />

generated this view: enter image description here

Note:

I uploaded the sample project to my github repository here;

Follow the README.MD file for details on how to clone and start the application locally.

Goodluck!

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

edited Nov 21 '18 at 9:35

answered Nov 21 '18 at 8:18

Naor Bar

59456

answered Nov 21 '18 at 8:18

Naor Bar

59456

answered Nov 21 '18 at 8:18

Naor Bar

59456

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

1

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

|
show 1 more comment

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

1

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

i.stack.imgur.com/FzFI8.png
– Adeel
Nov 21 '18 at 8:31

With exactly this code i am getting this 12:23:29 A
– Adeel
Nov 21 '18 at 8:32

I uploaded this example to github: github.com/naorbar/react-live-clock-example; follow the README.MD for more details on how to start the application or work on it locally
– Naor Bar
Nov 21 '18 at 9:33

Thank you so much for the answer and the project i can see in your project its working properly fine. And when i have implemented in my project its not working anymore. I guess maybe some other pages are somehow interrupting i have checked the CSS too. Might be something else
– Adeel
Nov 21 '18 at 12:20

@Adeel, I can suggest you to delete your project's "node_modules" folder and "npm install" again, or remove your CSS files (they might overlap). If it doesn't help, start from scratch or use the cloned project... Goodluck!
– Naor Bar
Nov 21 '18 at 13:06

|
show 1 more comment

You can add a function to format the date to change and A and P to AM and PM, respectively.

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

add a comment |

You can add a function to format the date to change and A and P to AM and PM, respectively.

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

add a comment |

You can add a function to format the date to change and A and P to AM and PM, respectively.

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

You can add a function to format the date to change and A and P to AM and PM, respectively.

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

var WithoutFormattingA = "8:11:35 A";

var WithoutFormattingP = "8:11:35 P";



function formatDate(unformattedDate) {

    var timeOfDay = unformattedDate.substr(unformattedDate.length - 1)



    if(timeOfDay === 'A' || timeOfDay === 'P') {

        return unformattedDate + "M";

    } else {

        return "Invalid date format.";

    }

}



ReactDOM.render(

  <div>

    <div>Formatted {WithoutFormattingA} to {formatDate(WithoutFormattingA)}</div>

    <div>Formatted {WithoutFormattingP} to {formatDate(WithoutFormattingP)}</div>

  </div>,

  document.getElementById("react")

);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

answered Nov 21 '18 at 8:31

Shawn Andrews

945617

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

add a comment |

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

Thanks Shawn but i am using the alternate clock
– Adeel
Nov 21 '18 at 14:31

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk