My UI requires to have the DataPicker in full view all the time, not as a form textfield with a popup. Is it possible to use/render DatePicker in that way?
There is web-component for this already, i.e. vaadin-date-picker-light, but the framework does not include Java API for it.
So if you want to use it, you need to follow instructions of the documentation here https://vaadin.com/docs/v14/flow/polymer-templates/tutorial-template-intro.html
Ok, so basically I would need to write a wrapper for that.
Yes, but need some changes may be
So. Hm. Ok. I created a component module from the Vaadin website, as per this guide:
https://vaadin.com/docs/v14/flow/web-components/integrating-a-web-component.html
The PaperSlider example in it works, so I’ve added this class to the same project / jar:
@Tag("vaadin-date-picker-light")
@JsModule("@vaadin/vaadin-date-picker/vaadin-date-picker-light.js")
@NpmPackage(value = "@vaadin/vaadin-date-picker", version = "^3.0.1")
public class DatePickerLight extends Component {
As I understand it, the web component is already installed with the standard date-picker component (the vaadin-date-picker-light.js file is there, in node_modules, next to the vaadin-date-picker.js).
This is my view:
add(new DatePicker());
add(new DatePickerLight());
add(new PaperSlider());
The DatePicker and PaperSlider is shown, but the DatePickerLight does not show anything.
If I only import the DatePickerLight class in the view, not actually instantiating it, I see the following error (but the paper slider still works):
*NotSupportedError: CustomElementRegistry.define: ‘vaadin-lumo-styles’ has already been defined as a custom element version.js:7
Googling it does not reveal much. And actually creating an instance also just shows that error.
Hi,
I think you’ve got this error because there are 2 different versions of the same component ( date picker 3.0.1 and the version imported by vaadin-datepicker).
I didn’t try it but I think you can replace @Npmpackage… by @Uses(DatePicker.class).
This will import the same package and avoid the conflict.
didn’t try it but I think you can replace @Npmpackage… by @Uses(DatePicker.class). This will import the same package and avoid the conflict.
Yes, @NpmPackage is redundant here, since the package has been already imported. @Uses(DatePicker.class) is needed if you do not use regular DatePicker elsewhere in your app, otherwise production mode build will not detect that this frontend resource is needed.
I figured it was a conflict between DatePicker and DatePickerLight, so I’ve played around with both replacing @NpmPackage and also removing @JsModule (the registering of the vaadin-lumo-styles has to be done somewhere). Combined with having both DatePicker and DatePickerLight in the view, or just either, but it does not really make a difference. The error stays.
If it is really as simple as just having a class definition, then it would not be overly complex to just add it to the original DatePicker’s jar… :-/
Looking in node_modules of the project, I see that vaadin-date-picker version 4.0.8 is used. Setting that version explicitly does not work either.
@NpmPackage(value = "@vaadin/vaadin-date-picker", version = "4.0.8")
I’m going to try and use another picker available through npm, see if that pans out.
Am I doing something fundamentally wrong? Nothing I try is working, except the PaperSlider which came with the component project. So I went back to the basics and picked this component:
https://www.npmjs.com/package/@polymer/paper-spinner
Then I added another class to my component project.
@Tag("paper-spinner")
@JsModule("@polymer/paper-spinner/paper-spinner.js")
@NpmPackage(value = "@polymer/paper-spinner", version = "^3.0.2")
public class PaperSpinner extends Component {
public PaperSpinner() {
}
}
Reverted all changes to my Vaadin project, removed node_modules, added the dependency to the project and add the component to the view:
@Route
@PWA(name = "My Application", shortName = "My Application")
public class MainView extends VerticalLayout {
public MainView() {
Button button = new Button("Click me",
event -> Notification.show("Clicked!"));
add(button);
add(new PaperSpinner());
}
}
No dice. Only the button is visible.
About the paper-spinner, by default <paper-spinner></paper-spinner> should be in your page, but if it’s not active you don’t see anything.
You can, for example, add active:
@Tag("paper-spinner")
@JsModule("@polymer/paper-spinner/paper-spinner.js")
@NpmPackage(value = "@polymer/paper-spinner", version = "^3.0.2")
public class PaperSpinner extends Component {
public PaperSpinner() {
getElement().setAttribute("active", true);
}
}
I’m not sure that date-picker-light will help you. Because it’s still a calendar with a popup (but you can set the input).
And it probably requires some client side code to make it work.
Ah. Yes, that helped and makes sense considering what control it is; it was a different spinner from what I had in mind (there is no example image in npm), I was more thinking along the lines of a swing spinner (text box with up and down arrows). But it’s rotating happily now.
Okay, so the light picker won’t work. But I was trying https://www.npmjs.com/package/@elifent/paper-datepicker as an alternative. And there are more. Which brings me to the remark “the … should be in your page remark”. Of course! Duh. I was so focused on the Java side I did not bother to check the HTML. Tunnel vision. The paper-datepicker tag is also present, but its display is set to none! Removing that makes it visible. Now, I still think it is weird for a component to set itself to not visible per default, so I kinda defend myself with that. DatePickerLight has no such easy solution, unfortunately.
Next would be programming against that component; getElement and setArgument you say, huh? 
Perhaps this may help: https://vaadin.com/components/vaadin-number-field/java-examples/number-field (number with - and +).
Sometimes when you have an error (like an error of compatibility) you focus of something else. This happens 
<paper-datepicker with-backdrop opened date="{{demoDate}}"></paper-datepicker>
I didn’t try the paper-datepicker but I think you need to opened it. Unfortunately there is no demo of the component.
Oh, I don’t need a textfield spinner, I need the inline date picker. I was just testing with it because it seemed to closely align with paper-slider, and that one worked.
The whole web components / polymer is somewhat hard to grasp, I find. If you have libraries like angular material, PrimeNG, PrimeFaces, or Vaadin components, their usage is clearly documented. With these components there does not seem to be much info. But I understand that I’m going from zero to straight of the deep end, because I want a custom component. Let’s see where it leads. It’s a research project, with possible real world use if I like what I find. But my knowledge is lacking.
Thanks for the help!