Extend/Customize a vaadin component vaadin-date-picker

Flow
1

Whats is the best way to override a vaadin component to add some client side control/features ?

Here is my guess.
I want to override the vaadin-date-picker to automatically complete the input with “/”
For example im typing “02” and after that the input will automatically insert “/” after and the input will be “02/”

I want to do that in client side.

I tried to achieve this in javascript . But i wasn’t able to access to the input.

What can be the good approach ?

2

The first I thought about was to extend the src/vaadin-text-field.html [Extending elements]
(https://www.polymer-project.org/2.0/docs/devguide/custom-elements#extending-elements) and observe the change event and then parse and update the value.

Though then you would need your own server side class and should probably have a import for the themed version in the extending element.

3

Thank you.
I followed your link and explore more the poylmer doc

Here is the solution i used

<dom-module id="custom-date-picker"> 
	<template></template> 
	<script>
	(function() {
    	let memorizedTemplate;

      	class CustomDatePicker extends Vaadin.DatePickerElement  {

	        static get is() { return 'custom-date-picker'}
	        static get template() {
	        	if (!memorizedTemplate) {
	            	// Retrieve this element's dom-module template
	            	memorizedTemplate = Polymer.DomModule.import(this.is, 'template');
		
		            // Clone the contents of the superclass template
		            let superTemplateContents = document.importNode(Vaadin.DatePickerElement.template.content, true);
		
		            // Insert the superclass contents
		            memorizedTemplate.content.append(superTemplateContents);	            
	          	}
	        	
	          	return memorizedTemplate;
			}
			
	        static get observers() {
	        	return [
	              'textUpdateEvent(_userInputValue)'
	            ];
	     	}
	        
	        textUpdateEvent(_userInputValue){
	        	console.log(_userInputValue);
	        	
				//TODO implement all case
				//Just for testing :			
	        	if(_userInputValue.length == 2 || _userInputValue.length == 5){
	        		super._userInputValue = _userInputValue + '/';
	        	}
	        }
		}
      	customElements.define(CustomDatePicker.is, CustomDatePicker);
    })();
	</script>
</dom-module>
4

You can simplify your code by returning the original date-picker template

<dom-module id="custom-date-picker">
  <script>
  (function() {
    class CustomDatePicker extends Vaadin.DatePickerElement  {

      static get is() { return 'custom-date-picker'}

      static get template() {
        return Vaadin.DatePickerElement.template;
      }

      static get observers() {
        return [
          'textUpdateEvent(_userInputValue)'
        ];
      }

      textUpdateEvent(_userInputValue){
        console.log(_userInputValue);

        //TODO implement all case
        //Just for testing :
        if(_userInputValue.length == 2 || _userInputValue.length == 5){
          super._userInputValue = _userInputValue + '/';
        }
      }
    }
    customElements.define(CustomDatePicker.is, CustomDatePicker);
  })();
  </script>
</dom-module>
5

yes you are right. the original code i used was intended to copy the super class template into a section of the child template.

And if i just want to use only strictly the same template i can just do

return Vaadin.DatePickerElement.template;