app-datepicker with paper-dropdown-menu

[olegvakulenko]

Hi!

Is it possible to use app-datepicker inside paper-dropdown-menu, update value in dropdown on date change and close menu? I explain what I try to do. I use datepicker in dialog and want to avoid nested date dialog.

I try:

<paper-dropdown-menu>
<app-datepicker slot="dropdown-content" ...>
</app-datepicker>
</paper-dropdown-menu>

But i can't find what event fire after datepicker change, how use current value from datepicker and how use it as selected value in menu (now it show datepicker content). Or is it another way to use datepicker without confirm/discard buttons.

Thanks!

[motss]

@olegvakulenko This is one strange idea I've ever seen. Not sure about this use case. But to answer your questions, I think you can look into these 3 things that might help you:

1. inputDate - You pass in a date string to change the date of the datepicker.
2. date - You can retrieve selected date via this property.
3. enforceDateChange - A method to update selected date. This will trigger updating the value of the property date. This allows date to be selected on the datepicker without any buttons.

Hope that helps.

[olegvakulenko]

I agree with you, that idea little strange, but I can't find solution in Material Design style for my app.

When user open order dialog, then next step is to select date from datepicker, whick also placed in dialog. But guidelines says: "Dialogs should avoid: Opening dialogs from within a dialog". So I have overcomplex behavior. In my question I try to find solution for this user case. In other hand I want to find component for date selection like on below image from Google guidelines:

If I'm right, when user click on date field open dropdown with datepicker (with or without buttons). Similar solution I find in vaadin-date-picker . Do you have any plan for develop such functionality?

And one more question. It is a good idea to have property that add "Today" button? This button revert selection and jump to corresponding page in datepicker.

[motss]

I don't think dropdown menu is the way to go. In Material Design, AFAIK, datepicker opens up with a model behind. Opening up a datepicker just below the input is mostly found on application for desktops. For your use case, you can create your own dialog as you want with the element app-datepicker. In this way, you can customize your own action buttons.

Hope this helps.

[motss]

Closing this issue. Feel free to open new issue or shout at me to reopen this little one instead. 💇‍♂️