onchange event (from lit-element)

[matepaiva]

Hello! First, thank you for the amazing component. I am using lit-element and it looks like they work very well together. But I am quite new to web components and I have no idea about how to get the selected date. I am able to pass the date to the datetime-picker, but I don't know which event to listen to get the information back, when it has changed. Could you give me a hint?

[icolquemamani]

I have the same problem. Is there any solution?

[qweluke]

@matepaiva @icolquemamani @fooloomanzoo did you found any solutions? I am using Stencil.js and also don't know how to get current date

[matepaiva]

Nope! I just used another package, unfortunately.

[icolquemamani]

@qweluke @matepaiva I have a partial solution, use the component in a class of polymer 3 without a lit-element, reuse the same in the class with lit-element. Manage to capture the date through personalized events.

<calendar-element auto-confirm date="{{date}}" min="{{min}}" first-day-of-week="0"></calendar- 
  element>

static get properties() {
        return {
          date: {
            type: String,
            notify: true,
            observer: '_dateChanged'
          },

          min: {
            type: String
          }
        };
      }
 _dateChanged(newValue, oldValue) {
          let event = new CustomEvent('change', {
            detail: { date: newValue }
          });
          this.dispatchEvent(event);
 }

I'm not sure if this can help you with the library that you are currently using "stencil.js".

[qweluke]

@matepaiva which package?

[daniel-sullivan]

Give this a try:

firstUpdated() {
        super.firstUpdated();

        let dtPicker = this.shadowRoot.querySelector('datetime-picker');
        dtPicker.shadowRoot.querySelector('button#confirm').addEventListener('click', () => {
            this.dispatchEvent(new CustomEvent('change', {
                detail: dtPicker
            }));
        })
    }

We've just needed to do something similar. In this case we're wrapping it in a lit-element component so we're passing the change event up to the parent.

If you are directly using the component from the same context you'd probably want something like:

firstUpdated() {
        super.firstUpdated();

        let dtPicker = this.shadowRoot.querySelector('datetime-picker');
        dtPicker.shadowRoot.querySelector('button#confirm').addEventListener('click', () => {
            this._handleDateChanged(dtPicker);
        })
    }

_handleDateChanged(dtPicker) {
    console.dir(dtPicker);
}

All of the parameters which you can get out are visible in the Developer Console in Chrome etc.

[acarapetis]

After poking around in the source code of @fooloomanzoo/property-mixins/datetime-mixin and reading some Polymer documentation, I found that the property datetime has notify: true; so we can in fact listen for the datetime-changed custom event:

<datetime-picker
    datetime=${this.dateFrom}
    @datetime-changed=${e => this.dateFrom = e.target.datetime}
    ></datetime-picker>

It would be good to document all of the events available (or at least the more useful ones). As it stands it's quite hard to discover how to use this component outside of Polymer apps - it feels like a shame to throw away the versatility of being a portable webcomponent.

EDIT: This also isn't a perfect solution, since this event is fired not only on user input but also when the prop changes for any other reason, such as being programmatically updated, and on component initialization.