onchange event (from lit-element) about datetime-picker HOT 7 OPEN

I have the same problem. Is there any solution?

from datetime-picker.

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

from datetime-picker.

Nope! I just used another package, unfortunately.

from datetime-picker.

@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".

from datetime-picker.

@matepaiva which package?

from datetime-picker.

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.

from datetime-picker.

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.

from datetime-picker.