0

So I've been trying to understand the use of dateTime.longDateFormat in the documentation located here: [https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_i18n][1]

I can get the format fine ('d, MMMM YYYY') and access it in the component. However, how to actually implement the formatting I am a bit lost.

In apex you can call date.format('d, MMMM YYYY') and it would output something like '4, January 2020'

Is there any function that you can call with the format above or is totally useless in the i18n context that LWC provides?

As far as I can tell the i18n dateformat object takes an object as it's options and not a string.

thanks in advance.

2 Answers 2

0

If you just want to format your date, you can use the JavaScript Date object.

import dateTime.longDateFormat ...;

...

const jsDate = new Date(dateTime.longDateFormat);
const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const dateString = jsDate.toLocaleDateString('en-GB', options); // formats date to "d MMM yyyy"
-1

As there were no 'native' options I decided to use a common library with a format option on it. I chose date-fns

To be able to use this in LWC you need to install using npm and convert the latest version using browserify and uglify.

The steps were:

  1. npm i date-fns
  2. npm i browserify -g
  3. npm i uglify-js -g
  4. browserify node_modules/date-fns/index.js --outfile date-fns.js -s date-Fns
  5. uglifyjs date-fns.js > date-fns_min.js
  6. upload date-fns_min.js as a static resource type application/javascript

To use it in your lightning web component you need to use the following code:

import {api, LightningElement, track, wire} from 'lwc';
import datefns from '@salesforce/resourceUrl/date_fns';
import longDateFormat from '@salesforce/i18n/dateTime.longDateFormat';

export default class exampleClass extends LightningElement{

    dateFns; //dateFns object in your class;

    datefnsLoaded = false;

    isInitDone = false;



    async connectedCallback()
    {
        await this.loadDateFns();
        if (!this.isInitDone)
        {
            try
            {
                this.doInit();
            } finally
            {
                this.isInitDone = true;
            }

        }
    }

    //method to format a supplied date using the SF supplied longDateFormat. 
    getDisplayDate(dateObj)
    {
         return this.dateFns.format(dateObj, longDateFormat);
    }

    doInit(){
       //do some init;
    }

    async loadDateFns()
    {
        if (this.datefnsLoaded)
        {
            return;
        }
        this.datefnsLoaded = true;

        await loadScript(this, datefns)
            .then(val =>
            {
                //assign dateFns to parent;
                this.dateFns = dateFns;
            })
            .catch(error =>
            {
                console.log(error);
            });
     }
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .