vaadin-date-picker example not working

Flow
1

The vaadin components doc has an example for vaadin-date-picker which links two date pickers.
I’ve tried to add the sample code to my dom-module, however the query selectors in the whenDefined method are returning null for #start and #end.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/vaadin-date-picker/src/vaadin-date-picker.html">

<dom-module id="leave-settings">
    <template>
<style include="shared-styles">
            :host {
                display: block;
                height: 100%;
            }

        </style>
<div>
 <vaadin-date-picker id="start" label="First Day" placeholder="Pick a date"></vaadin-date-picker>
 <vaadin-date-picker id="end" label="Last Day" placeholder="Pick a date"></vaadin-date-picker>
</div>
</template>

    <script>
        class LeaveSettings extends Polymer.Element
        {
            static get is()
            {
                return 'leave-settings';
            }

            static get properties()
            {
                return {
                    // Declare your properties here.
                };
            }
        }
        customElements.define(LeaveSettings.is, LeaveSettings);


        customElements.whenDefined('vaadin-date-picker').then(function()
        {
        debugger;
		    // these two calls return null.
            var start = document.querySelector('#start');
            var end = document.querySelector('#end');

            start.addEventListener('change', function()
            {
                  end.min = start.value;

                  // Open the second date picker when the user has selected a value
                  if (start.value)
                  {
                    end.open();
                  }
            });

            end.addEventListener('change', function()
            {
                start.max = end.value;
            });
        });



    </script>
</dom-module>
2

The example you’re talking about is made to show how you can use it in the main document (without needing to create your own component or dom-module that contains the code).

Because you put the code in a Polymer component (which puts the template contents into Shadow DOM) document.querySelector() can’t find them, because it only looks in the Light DOM of the document.

To query the component’s shadow root instead, you can do:

var start = this.shadowRoot.querySelector('#start');
var end = this.shadowRoot.querySelector('#end');

But this only works if you put the code in your LeaveSettings class and not outside of that like you now have in the customElements.whenDefined block.

And when you move the related code inside your custom component LeaveSettings you have a simpler way to reference the elements that have an ID in your template by using the this.$ map that Polymer provides automatically (see Polymer 2 docs [Static node map]
(https://polymer-library.polymer-project.org/2.0/docs/devguide/dom-template#node-finding))

So then you could just do this instead:

var start = this.$.start;
var end = this.$.end;

Also in this case when you are making your own dom-module, you don’t really need customElements.whenDefined at all since the imports at the top of the file (e.g. vaadin-date-picker.html) are already loaded when the script in the file is executed.

And the event listeners can be bound in a simpler way too taking advantage of Polymer template features.

Here’s an updated version of your code that should do the same thing (but get the start and end date picker references right):

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/vaadin-date-picker/src/vaadin-date-picker.html">

<dom-module id="leave-settings">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        height: 100%;
      }
    </style>
    <div>
      <vaadin-date-picker id="start" label="First Day" placeholder="Pick a date" on-change="startChanged"></vaadin-date-picker>
      <vaadin-date-picker id="end" label="Last Day" placeholder="Pick a date" on-change="endChanged"></vaadin-date-picker>
    </div>
  </template>
  
  <script>
    class LeaveSettings extends Polymer.Element
    {
      static get is()
      {
        return 'leave-settings';
      }
      
      static get properties()
      {
        return {
          // Declare your properties here.
        };
      }

      startChanged() {
        this.$.end.min = this.$.start.value;
        
        // Open the second date picker when the user has selected a value
        if (this.$.start.value)
        {
          this.$.end.open();
        }
      }

      endChanged() {
        this.$.start.max = this.$.end.value;
      }
    }
    customElements.define(LeaveSettings.is, LeaveSettings);
  </script>
</dom-module>

Though I didn’t actually try running this.

As it looks like you’re making a component (which internally uses two date pickers) you probably want to define own properties like startDate and endDate for your component (using the static get properties() getter, see [declaring properties]
(https://polymer-library.polymer-project.org/2.0/docs/devguide/properties) in Polymer 2) then you can use databinding to bind those properties to the date pickers in the template so that the values update in your component automatically when you select dates in the date pickers.

3

Thanks, great response !

I will have a play with the data bindings.