[ANGULAR] Streamlining Date Selection in TimeAxisHeaderMenu

[kneville]

Hi Team,
I'm currently utilizing the dateRange option in TimeAxisHeaderMenu. My requirement is to work with a single date, and by default, it displays the current date.

As I am working with only one date, I've observed that when I hover over the dateRange and subsequently click the calendar icon to choose a date from the datePicker, it suits my needs.

Now, my preference is to streamline this process further. I would like the datePicker to be displayed directly when I hover over the dateRange, allowing me to choose the date seamlessly without the additional step of clicking the calendar icon.

Could you please guide me on how to achieve this? I have attached code snippet and screenshots for reference.

timeAxisHeaderMenu: {
            items: {
                dateRange: {
                    text: "Date Range",
                    menu: {
                        items: {
                            dateRangeStart: true, // Show only start date
                            dateRangeEnd: false, // Hide end date
                            startDateField: {
                                label: "Filter Date",
                            },
                            endDateField: {
                                hidden: true,
                            },
                        },
                    },
                },
            },
        }

Thank you

[alex.l]

Hi,

To clarify a bit. Do your screenshots show expected result or actual result?
As I understood from description, you want to put date picker into tooltip? But images and code you posted are about context menu. It required in extra clicks to open context menu and date field picker. So I am confusing.

Please post the code you have, actual result and expected result described. It will help us to clearly understand the request.

Thanks!

[Animal]

OK, I think I understood. You have the widgets displaying as you need, you just want to add a mouseenter listener to show the date picker.

I have updated this Codepen: https://codepen.io/Animal-Nige/pen/poYGeGr?editors=0010

[kneville]

Thanks Animal.

Your provided code has been beneficial. My specific requirement is to have the datePicker appear when hovering over the dateRange, excluding the display of other elements such as navigation buttons (<, Today, >) and the selected date.

[kneville]

Hello Alex and Animal,

Regarding the previous conversation, I'm seeking guidance on how to close the menu after selecting a date from the datepicker. I've included the relevant code snippet for reference.

timeAxisHeaderMenu: {
            items: {
                dateRange: {
                    text: "Date Range",
                    menu: {
                        items: {
                            dateRangeStart: true, // Show only start date
                            dateRangeEnd: false, // Hide end date
                            startDateField: {
                                label: "Filter Date",
                                onPaint() {
                                        EventHelper.on({
                                            element: this.element,
                                            mouseenter: () => this.focus()
                                        });
                                },
                                autoExpand: true
                            },
                            endDateField: {
                                hidden: true,
                            },
                            todayBtn:false,
                            leftShiftBtn: false,
                            rightShiftBtn: false
                        },
                    },
                },
                currentTimeLine: false,
                eventsFilter: false,
            },
        },

Thanks!

[tasnim]

Hi,

Sure, you can achieve it by calling menu.close() on selection change

Please check code and see live demo here https://codepen.io/dv-auntik/pen/mdgbJwL?editors=0010

Docs
https://bryntum.com/products/scheduler/docs/api/Core/widget/Menu#function-close
https://bryntum.com/products/scheduler/docs/api/Core/widget/DatePicker#event-selectionChange

Best regards,
Tasnim