without popup i want show the daterangepicker in div

Question

Hi              I need show the daterangepicker with out popup.its neeed to bind the div

Muthukrishnan Kandasamy · Accepted Answer

Hi Ganesh, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in EJ DateRangePicker control. Currently, we have not provided support to render the popup on specific target. For achieving your requirement, we have overridden the default behavior. Please refer to the below code block. 
 




var target = $("#popupTarget"); 
        $(function () { 
            // declaration 
            $("#daterangepick").ejDateRangePicker({ 
                width:"100%" 
            }); 
        }); 
        ej.DateRangePicker.prototype.renderpopup = function (e) { 
            if (!this.popup) { 
                this.popup = ej.buildTag("div.e-daterangepicker-popup e-popup e-widget e-box" + this.model.cssClass + "#" + this.element[0].id + "_popup").css("display", "none"); 
                target.append(this.popup); 
                if (this.model.isResponsive) { 
                    if (this.model.ranges) { 
                        if (this.model.ranges) this._renderRanges(); 
                        if (this._customRangePicker) this._customRangePicker.addClass("e-responsive"); 
                        this._showRangesOnly = true; 
                    } 
                    else if (!this.model.ranges) { 
                        this._renderPopup(); 
                        this._onMainFocusOut(); 
                        this._showRangesOnly = false; 
                    } 
                } 
                else { 
                    this._renderPopup(); 
                    this._onMainFocusOut(); 
                    this._showRangesOnly = false; 
                } 
            } 
            else if (this.model.isResponsive && this._customRangePicker && this.datePopup) { 
                this.datePopup.hide(); 
                this._buttonDiv.hide(); 
                this._customRangePicker.show().addClass("e-responsive"); 
                this._showRangesOnly = true; 
            } 
            if (typeof (this.model.value) === "string" && !ej.isNullOrUndefined(this.model.value) && !this._notapplied) this._updateValues(); 
            else if (typeof (this.model.value) === "object" && this.model.value == null && !this._notapplied) this._updateValues(); 
        } 
 
 
We have prepared sample for your convenience, please refer to the below link for the sample. 
 
http://jsplayground.syncfusion.com/hcm52xqc  
 
Please check out the below screenshot of the shared sample, were the popup was rendered inside the provided target. 
 




  
 
 
Documentation: https://help.syncfusion.com/js/daterangepicker/getting-started 
 
Behavior: https://help.syncfusion.com/js/daterangepicker/behavior-settings#behavior-settings 
 
API: https://help.syncfusion.com/api/js/ejdaterangepicker 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K