Running multiple components locally

I feel like this is maybe obvious to someone who is a more experienced web developer than I am, but hopefully I won’t be laughed out of the room. Also for reference I’m using Anaconda on Windows 10 to handle NPM and Bower executions, in case that makes a difference.

I’m trying to install both -date-picker and -time-picker locally for in-browser tests of some custom scripts. I’ve been following the directions for these two components as on the Github - https://github.com/vaadin/vaadin-date-picker - which works if I want to use one component at a time, but not for the second - they either collide on port 3000 or they are on different ports and therefore not communicating…

How can I do a local install and in-browser test which incorporates both of these components at once?

Hi. The answer depends on what do you want to achieve. Is that browsing component demos or something else?

The components can be used together, but each component is developed in its own repository and those are not meant to be executed together at the same time. You would need a custom setup like small app including both.

BTW feel free to checkout our new vaadin-date-time-picker (still in progress) which imports both:
https://github.com/vaadin/vaadin-date-time-picker

And if you want you can browse the components demos here
https://web-padawan.github.io/elements-viewer/?vaadin-date-picker#demo

Hi Serhii,

I’m developing a web form for my job (We’re… sort of a non profit? It’s complicated), and I hope to use the Vaadin time and date components for one part of that form. So right now I have some local HTML documents full of form components and some Javascript.

My goal yesterday - until I got to this point - was to make an HTML document containing a vaadin-custom-field containing both 2x -date-picker and 2x -time-picker to create a date/time range selector, as in the -date-picker range demo, but adding extra Javascript checks so that when the -date-picker are on the same day, the -time-pickers talk to each other and ensure the start time is the minimum for the end time, and vice versa. I wanted to check that the script actually worked as I had intended.

I had edited the demos.json file in my local copy of the -date-picker repo to include my new HTML document and changed the structure of my document to match that from one of the other demo pages. I did get my custom page to appear, but I wasn’t able to get both the -pickers showing up at once - since each repo is independent locally. And then I came here.

It sounds like the small app setup would be heading towards the correct solution. Any tips on that?

PS: Your link for vaadin-date-time-picker is wrong, but I found it via https://github.com/vaadin/vaadin-date-time-picker. Thanks for having such consistent names!

This is the last ‘component’ of the form I am working on now, so any advice would be greatly appreciated to move me past this roadblock.

If you want to add time-picker and try it in the vaadin-date-picker repository, do the following:

  1. Add vaadin-time-picker as a dependency in bower.json

  2. Add HTML import for it in demo/index.html

 <link rel="import" href="../../vaadin-time-picker/vaadin-time-picker.html">

This way the component will be imported from bower_components (note that relative imports starting from ../../ are resolved by Polymer CLI and don’t require you to have specific folder structure).

Hi Serhii,
Those instructions worked perfectly, thank you! (I initially made the mistake that I was looking for a relative path to my actual local -time-picker file, but that doesn’t seem to be the case).