2

I am trying to implement datePicker in LWC and referencing https://developer.salesforce.com/blogs/2019/08/convert-a-javascript-datepicker-to-a-lightning-web-component.html

I have stored moment.js in static resource and I have copy pasted from https://momentjs.com/downloads/moment.min.js and version is Moment.js 2.29.1

When I add below datePickerApp in page, it shows below image and throws error from function loadActivities from js file

[moment is not a function]

enter image description here

datePickerApp.html

<template>
    <c-date-picker></c-date-picker>
</template>

datePicker.js

import { LightningElement, api, track } from 'lwc';
import moment from '@salesforce/resourceUrl/moment';
import { loadScript } from 'lightning/platformResourceLoader';

export default class DatePicker extends LightningElement {
    lastClass;
    @track dateContext 
    @track selectedDate 
    @track dates = [];
    today

    connectedCallback(){
        Promise.all([
            loadScript(this, moment + '/moment.js')
          ]).then(() => {
           this.loadActivities();
        });
    }

    loadActivities(){
        this.today = moment();
        this.dateContext = moment();
        this.selectedDate = moment();
    }
}

datePicker.html

<template>
    <div class="dates">
        <div class="buttonContainer">
            <button class="link" type="button" onclick={goToday}>
                Today
            </button>
            <p>{formattedSelectedDate}</p>
            <p class="bold">{year}</p>
        </div>
        <div class="buttonContainer">
            <button class="prev" type="button" onclick={previousMonth}>
                Prev
            </button>
            <span class="bold">{month}</span>
            <button class="next" type="button" onclick={nextMonth}>
                Next
            </button>
        </div>
        <ul class="header">
            <li>Sun</li>
            <li>Mon</li>
            <li>Tue</li>
            <li>Wed</li>
            <li>Thu</li>
            <li>Fri</li>
            <li>Sat</li>
        </ul>
        <ul class="datePickerHolder">
            <template for:each={dates} for:item="date">
                <li
                    key={date.formatted}
                    class={date.className}
                    data-date={date.formatted}
                    onclick={setSelected}
                >
                    {date.text}
                </li>
            </template>
        </ul>
    </div>
</template>
0
3

Try window.moment();.

From Exploring Salesforce Lightning Web Components: Part 4:

Similar to code within a Lighting Web Component, loaded scripts do not have access to the global window object; each has access to only a local component window object.

though I haven't found official documentation in the subject.

5
  • Good educated guess, but ultimately incorrect. – sfdcfox Feb 5 at 20:59
  • @sfdcfox Aren't these equivalents, with referencing window.moment directly having the advantage of no modification needed to the script file? – Keith C Feb 5 at 21:43
  • In a loadScript context, you'd be right, but native files need to include exports in order to access the contents. I included a link to a previous answer in my answer that goes into more demonstration. – sfdcfox Feb 5 at 22:23
  • This actually works for me. I am able to perform all the functions with window.moment(). – devforce Feb 6 at 10:00
  • Doh. Sorry, looks like I misread the question. Silly me. – sfdcfox Feb 6 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.