is it possible to have a Date control in Context menu options

[Mahesh Machina]

User should be able to select  a date range from context menu options. is it possible?

[YuvanShankar Arunagiri]

Hi Mahesh,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet and attached sample.

@using Syncfusion.EJ2

 

<div class="control-section">

    <div class="contextmenu-control">

        <div id="contextmenutarget"></div>

        <ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems" beforeItemRender="beforeItemRender" beforeClose="onClose">

        </ejs-contextmenu>

    </div>

</div>

 

<script>

    var dateValue = null;

    function beforeItemRender(args) {

        var Span = document.createElement('span');

        Span.style.display = 'inline-block';

        let daterangepicker = new ej.calendars.DateRangePicker({

            placeholder: "Select a range",

            change: (e) => {

                this.dateValue = e.value;

                var contextMenuObj = ej.base.getInstance(document.getElementById('contextmenu'), ejs.navigations.ContextMenu);

                contextMenuObj.close();

            }

        });

        const inputElem = document.createElement('input', { className: 'e-input', attrs: { type: 'text' } });

        Span.appendChild(inputElem);

        daterangepicker.appendTo(inputElem);

        args.element.appendChild(Span);

    }

 

    function onClose(args) {

        if (this.dateValue == null) {

            args.cancel = true;

        }

    }

</script>

Could you please check the above code and sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: contextmenudatesample_611426cd.zip