3

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

1 Answer 1

5

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
    Commented Feb 5, 2021 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
    Commented Feb 5, 2021 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
    Commented Feb 5, 2021 at 22:23
  • 1
    This actually works for me. I am able to perform all the functions with window.moment().
    – devforce
    Commented Feb 6, 2021 at 10:00
  • Doh. Sorry, looks like I misread the question. Silly me.
    – sfdcfox
    Commented Feb 6, 2021 at 11:56

You must log in to answer this question.

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