Tips for styling my date using MomentJS

Question

Tips for styling my date using MomentJS

I am currently using moment.js for displaying dates in my application.

The date format is determined based on the locale stored in the variable clientLanguage.

I have tried various approaches, including the following:

moment(myISODate).locale(clientLanguage).format('ll');

However, I require a different format and have been unable to achieve the desired output with formats like:

WED 18 NOV 20:05 and WED 18 NOV

Is there a way to customize the format using moment.js?

[UPDATE] An important detail that I overlooked: the localized format should be adhered to. For instance, if the English date format is WED OCT 19, then the Italian format should be MER 19 OTT (with "19" in a different position).

[UPDATE] It seems that the person who downvoted did not provide a solution.

javascript momentjs

Answer 1

Answer №1

Give this a shot

Create a new moment object with myISODate and set the locale to clientLanguage, then format it as 'ddd' for the day of the week followed by 'DD MMM HH:mm' for the date and time.

Answer 2

Give this a shot

Create a new moment object with myISODate and set the locale to clientLanguage, then format it as 'ddd' for the day of the week followed by 'DD MMM HH:mm' for the date and time.

Answer 3

Answer №2

Give this a try:

WED 18 NOV 20:05 -

moment(date).locale(language).format('ddd D MMM hh:mm');

WED 18 NOV -

moment(date).locale(language).format('ddd D MMM');

Answer 4

Give this a try:

WED 18 NOV 20:05 -

moment(date).locale(language).format('ddd D MMM hh:mm');

WED 18 NOV -

moment(date).locale(language).format('ddd D MMM');

Answer 5

Answer №3

Below are the steps you can take:

var locale = window.navigator.userLanguage || window.navigator.language;
moment.locale(locale);
console.log(locale); //en-US
var now = moment().format("ddd D MMM H:mm");
console.log(now); //Wed 7 Oct 15:06

moment.locale('it');
console.log('it'); //it
var now = moment().format("ddd D MMM H:mm");
console.log(now); //Mer 7 ott 15:06

Jsfiddle

If you need more information on displaying different formats, check out their documentation.

UPDATE: Revised my answer and updated the jsfiddle.

To determine the user's browser locale, you can use this code snippet:

var locale = window.navigator.userLanguage || window.navigator.language;

Then, set moment.js to utilize that locale in this manner:

moment.locale(locale);

The caveat is that you must include all moment js locales files. (moment-with-locales.min.js)

UPDATE 2: It may appear impossible to customize it, but you can easily do it yourself. Simply search the source code of moment.js with locales (not the minified version) for 'LLLL' for instance, and you will find something like this: LLLL : 'dddd D MMMM YYYY HH:mm'. Modify it for each language with your desired output ("ddd D MMM H:mm") and you should be good to go.

Answer 6

Below are the steps you can take:

var locale = window.navigator.userLanguage || window.navigator.language;
moment.locale(locale);
console.log(locale); //en-US
var now = moment().format("ddd D MMM H:mm");
console.log(now); //Wed 7 Oct 15:06

moment.locale('it');
console.log('it'); //it
var now = moment().format("ddd D MMM H:mm");
console.log(now); //Mer 7 ott 15:06

Jsfiddle

If you need more information on displaying different formats, check out their documentation.

UPDATE: Revised my answer and updated the jsfiddle.

To determine the user's browser locale, you can use this code snippet:

var locale = window.navigator.userLanguage || window.navigator.language;

Then, set moment.js to utilize that locale in this manner:

moment.locale(locale);

The caveat is that you must include all moment js locales files. (moment-with-locales.min.js)

UPDATE 2: It may appear impossible to customize it, but you can easily do it yourself. Simply search the source code of moment.js with locales (not the minified version) for 'LLLL' for instance, and you will find something like this: LLLL : 'dddd D MMMM YYYY HH:mm'. Modify it for each language with your desired output ("ddd D MMM H:mm") and you should be good to go.

Tips for styling my date using MomentJS

Answer №1

Answer №2

Answer №3

Similar questions

Stopping free jqgrid disabled toolbar buttons from reacting to mouse clicks can be achieved by implementing specific coding techniques that

Is it possible for ng-change to invoke another controller?

Retrieve the $http data from a function that is external to it

Switching from using a computed property in Vue 2 to implementing the Vue 3 Composition API

Exploring the world of asynchronous operations with React Hooks

Unable to retrieve the value from the selected radio button

Is there a constraint on JSON data?

view multiple HTML documents simultaneously in a single browser tab

Reacting with Angulatory: Response heads are not being transferred in applications

Exploring the capabilities of Google Drive API using Requests library

Experiencing Challenges with JavaScript Implementation Within an HTML Document

The concept of CSS Parent Elements refers to the relationship

The jQuery AJAX response consistently comes back empty

Scripting in jQuery to create dropdown menus

Is there a way to transform a six-digit input into a date format using vue/JavaScript?

Commitments and incorporating items from an array into objects nested within a separate array

The attempted JavaScript socket emissions from the server to the client for listening are currently experiencing difficulties and

Guide on launching a mobile application upon clicking a button in a mobile browser (with the assistance of JavaScript/React) [Utilizing Deep Linking]

Creating objects based on interfaces

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML