Hiding the input of the datepicker, but open the select date from a button ?

[Yordan]

Dear support is there a way the input of the datepicker to be hidden, but open the select date from a button ?

Like in this collage ?

[Berly Christopher]

Hi Yordan, 

  

Greetings from Syncfusion support.  

  

We can achieve the requested requirement by using the Calendar component which does not have the input and its popup component. For your reference, we have prepared the sample and attached it below. 

  

In the below sample, we have rendered the Calendar component in the external button click based on the Boolean variable.  

  

@using Syncfusion.Blazor.Calendars 

<button id="button" @onclick="OnClick">Click to Open the DatePicker</button> 

@if (this.isOpen) 

{ 

    <SfCalendar TValue="DateTime?"></SfCalendar> 

} 

@code{ 

    SfCalendar<DateTime?> dateObj; 

    public bool isOpen { get; set; } = false; 

    public void OnClick() 

    { 

      

        this.isOpen = !this.isOpen; 

    } 

} 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/Calendar_154929-1254729503  

  

To know more about Calendar component, please refer the below documentation and demo link. 

Demo Link: https://blazor.syncfusion.com/demos/calendar/default-functionalities/ 

UG Link: https://blazor.syncfusion.com/documentation/calendar/getting-started/?no-cache=1 

  

Regards, 

Berly B.C 

[Yordan]

Thank You Berly Christopher [Syncfusion] !

But now the panel does not close itself when selected date or clicked outside. This is why I were using the datepicker initially

and how to show only months like month view ?

[Berly Christopher]

Hi Yordan,

  

We have prepared the sample with using DatePicker component. While closing the popup by clicking the document, we could not identify in the Blazor platform. So, attached sample will be worked based on the external button click and value change from the component.  

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/DatePicker_154929_button66884473  

  

Also, you can change the view of the DatePicker by using the property “Start” and “Depth” property as mentioned below. 

  

@using Syncfusion.Blazor.Calendars 

<button id="button" @onclick="OnClick">Click to Open the DatePicker</button> 

<SfDatePicker @ref="dateObj" TValue="DateTime?" Start="CalendarView.Year" Depth="CalendarView.Year"> 

    <DatePickerEvents TValue="DateTime?" ValueChange="OnChange"></DatePickerEvents> 

</SfDatePicker> 

@code{ 

    SfDatePicker<DateTime?> dateObj; 

    public bool ShowPopupCalendar { get; set; } = false; 

 

    public void OnClick() 

    { 

        if (!this.ShowPopupCalendar) 

        { 

            this.dateObj.Show(); 

            this.ShowPopupCalendar = true; 

        } 

        else 

        { 

            this.dateObj.Hide(); 

            this.ShowPopupCalendar = false; 

        } 

    } 

 

    public void OnChange() 

    { 

        this.ShowPopupCalendar = false; 

    } 

} 

<style> 

    .e-input-group.e-control-wrapper { // To hide the date picker’s input 

        visibility: hidden; 

    } 

</style> 

 

  

UG Link: https://blazor.syncfusion.com/documentation/datepicker/view/?no-cache=1  

  

Regards, 

Berly B.C 

[Yordan]

Thank You dear Syncfusion support! 
I've tried the solution you proposed, but seems like it doesnt go in the place where I am expecting it to be.

The button which should trigger it is inside a grid which is placed in a sidebar, and when I press the button it drops aside from the button.

Aside of this my other edit syncfusion controls have dissapeared..

,

[Berly Christopher]

Hi Yordan, 

  

We have checked the provided screenshot and the reported issue may be cause due to collision that occurs when the DatePicker popup is opened. But this issue is not reproduced at our end. For your reference we have prepared the same sample within the sidebar component and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/Blazor_DatePicker_Popup1013948620  

  

So, we suggest you to change the popup offset width as number value based on the application needs in the open event of the DatePicker component as mentioned below. We could not access the DOM elements in the Blazor platform. So, we have performed this action with help of JS interop in the application.  

  

[index.razor] 

@using Syncfusion.Blazor.Navigations 

@using Syncfusion.Blazor.Lists 

@using Syncfusion.Blazor.Buttons 

 

<SfSidebar ID="NavMenu" @ref="sidebarObj" Width="300px" ShowBackdrop="true" Position=SidebarPosition.Right EnableGestures="false"> 

    <div style="text-align: center;" class="text-content"> 

        <span>Sidebar</span> 

        <div class="datepicker"></div> 

        <SfButton @onclick="Close" CssClass="e-btn">Toggle Sidebar</SfButton> 

        <span> 

            <SfButton @onclick="OnClick" CssClass="e-btn">Click to Open the DatePicker</SfButton> 

            <SfDatePicker ID="datepicker" @ref="dateObj" TValue="DateTime?" Start="CalendarView.Year" Depth="CalendarView.Year"> 

                <DatePickerEvents TValue="DateTime?" ValueChange="OnChange" OnOpen="OnOpen" ></DatePickerEvents> 

            </SfDatePicker> 

        </span> 

    </div> 

</SfSidebar> 

<div style="text-align:center"> 

    <SfButton @onclick="Close" CssClass="e-btn">Toggle Sidebar</SfButton> 

</div> 

 

@code { 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; } 

 

    SfSidebar sidebarObj; 

    public void Close() 

    { 

        this.sidebarObj.Toggle(); 

    } 

    SfDatePicker<DateTime?> dateObj; 

    public bool ShowPopupCalendar { get; set; } = false; 

 

    public void OnClick() 

    { 

        if (!this.ShowPopupCalendar) 

        { 

            this.dateObj.Show(); 

            this.ShowPopupCalendar = true; 

        } 

        else 

        { 

            this.dateObj.Hide(); 

            this.ShowPopupCalendar = false; 

        } 

    } 

 

    public void OnChange() 

    { 

        this.ShowPopupCalendar = false; 

    } 

    public void OnOpen (PopupObjectArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("onOpen", "datepicker"); 

    }     

} 

<style> 

    .e-input-group.e-control-wrapper { 

        visibility: hidden; 

    } 

</style> 

[wwwroot/onOpen.js] 

window.onOpen = (id) => {  

    var instance = document.getElementById(id).ej2_instances[0]; 

    instance.popupObj.offsetX = 0; // provide the value as number based on application needs 

    instance.popupObj.offsetY =0; // provide the value as number based on application needs 

};  

[_Host.cshtml] 

<script src="~/onOpen.js"></script> 

     

Else, you can display the DatePicker popup in the required position by overriding the CSS styles of the DatePicker popup wrapper based on the application requirement.  

  

Regards, 

Berly B.C 

[Yordan]

Love it !

Thank You very much dear support !

[Berly Christopher]

Hi Yordan, 

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Yordan]

Unfortunately this bug is repeatable with normal datetime picker as well, which is completely visible with none changes. Just placed on  Sidebar, and it buged.

[Berly Christopher]

Hi Yordan, 

  

We have already faced “popup misalignment issue in the DateTimePicker components” in the version of 18.1.57. So, we suggest you to upgrade the Syncfusion NuGet version to the latest or 18.1.58 to get rid of the reported issue.  

  

NuGet Link: https://www.nuget.org/packages/Syncfusion.Blazor/18.1.0.58  

  

Still the issue persists, please share any issue reproducing sample / code example / Syncfusion NuGet version that will help us to check and resolve the issue earliest.  

  

Regards, 

Berly B.C 

[Yordan]

Dear Syncfusion support, thank You for your kind reply. 
I am currently with 18.1.59 version, and the problem still exists.

[Yordan]

Dear Syncfusion support. Took me about 100 compilations and stripping the code, but I found the bug causer.
here the code :

@page "/sidebar-features"

@inherits LayoutComponentBase

@using Syncfusion.Blazor.Navigations

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Calendars

<div id="masterMapDiv" style="height: 100vh; width: 100vw;">

    <SfSidebar  Width="290px" Type="SidebarType.Over"  Position="SidebarPosition.Right"  Animate="false" IsOpen="true">

        <ChildContent>

            <div class="sTreeViewHolder">

      

            </div>            

                <SfButton CssClass="periodButtons">3</SfButton>

                <SfDateTimePicker AllowEdit="true" Value="@aaaa" Width="200" CssClass="dtPicker" ShowClearButton="false" ShowTodayButton="true"></SfDateTimePicker>

               

                    <table align="center" border="0" cellspacing="5" width="100%">

                        <tr>

                            <td width="30px" align="right">

                                bug

                            </td>

                            <td>

                                <SfDateTimePicker AllowEdit="true" Value="@aaaa" Width="200" CssClass="dtPicker" ShowClearButton="false" ShowTodayButton="true"></SfDateTimePicker>

                            </td>

                        </tr>

                        

                    </table>

        </ChildContent>

    </SfSidebar>

</div>

<style>

    .sTreeViewHolder {

        width: 100%;

        height: 600px;

        overflow-y: visible;

        overflow-x: hidden;

    }

</style>

@code{

    SfSidebar sidebarObj;

    public DateTime? aaaa { get; set; } = new DateTime( DateTime.Now.Year, 1, 23 );

    public DateTime? bbbb { get; set; } = new DateTime( DateTime.Now.Year, 1, 23 );

}

[Berly Christopher]

Hi Yordan, 

  

We have checked the provided sample and you have render the DateTimePicker component inside the table element and placed the component in the bottom of the SideBar component by applying the style for the class “sTreeViewHolder”. So, when you open the popup, there is no space to open the popup front and behind of the DateTimePicker input. So, popup will be opened away of the input element based on the collision occurred. Due to this, the reported issue has been occurred in the application. 

  

So, we suggest you to align the popup based on the application needs by change the popup offset width as number value in the open event of the DateTimePicker component as mentioned earlier. 

  

For your reference, we have prepared the sample based on the provided code snippet. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/Blazor_DateTimePicker_popup_154929984411677  

  

Also, you have defined the div height and width in the vh and vw. If you are providing the height and width in these units, then scroller will be created inside the SideBar component. The scrollbar will not create when the content of the sidebar exceeds the height of you screen dimension. So, we will not able to scroll down the sidebar element to check the content added below.  

  

Still issue persists, please share the use case of the component rendering inside table element inside the sidebar content that will help us to check and proceed further at our end. 

  

Regards, 

Berly B.C  

[Yordan]

Since I need the whole space of the page to draw 3D OpenGL objects - I am using div height and width in the vh and vw. I am not sure if I can use 100% i this case.

Is the table issue here, since I am using a lot of tables. If tables made of DIV elements is better - I will rework my code.

[Yordan]

Additionally - your sample seems like server side. I am not interested in Blazor Server sive, but the issue is in Blazor WebASM mainly.

[Berly Christopher]

Hi Yordan, 

  

As per the requested requirement, we have prepared the sample in the client-side blazor application and attached it below.  

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/DateTime_popup_Client_154929-762236188  

  

Regards, 

Berly B.C 

[Yordan]

O ! It works ?! with just switching to OnOpen ?! Good lords. 

Never would even pass my mind such a thing.

Thank You!

[Berly Christopher]

Hi Yordan, 

  

Most welcome. Please let us know If you need further assistance on this. 

  

Regards, 

Berly B.C 

[Yordan]

Dear support - does this code works on Blazor Server Side ? 
Since at least with the recent version - it does nothing.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Yordan, 

Thanks for your update.

 

We have checked the reported query and we tried in the latest version in server side application. It is working good at our end. We suspect that the cause of the issue may be due to interop JS file not loaded in server end application. We have made sample for you and kindly check the same.

Sample Link       : https://www.syncfusion.com/downloads/support/forum/154929/ze/DateTimepicker_Popup_Alignment_Serve_Side645021450 

Please let us know if you need any further assistance on this. 

Regards, 

Jeyanth. 

[Yordan]

Probably there should be different thing for DatePicker ( not DateTimePicker ) ?

Seems like all this time I were trying to apply the same to DatePicker instead of DateTimePicker believing that it is the same logic, but probably it isn't, and that's why the results were varing.

Attachment: BlazorApp1_76882b59.rar

[Yordan]

Shall I create a separate topic for DatePicker ?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Yordan, 

Thanks for your patience. 

We have checked the reported query. We would like to know you that the popup has no space to open up after the bottom and right collisions and hence the reported issue occurs. Hence we suggest you to set the Width for the component to resolve the reported issue, so that the popup opens relative to the input element. Please refer the code below.


 

<SfDatePicker @ref="datetime" ID="datetime" AllowEdit="true" Value="@aaaa" Width="250px" CssClass="dtPicker" ShowClearButton="false" ShowTodayButton="true"> 

    <DatePickerEvents TValue="DateTime?" OnOpen="OnOpen"></DatePickerEvents> 

</SfDatePicker> 

We also edited the provided sample. Please find the sample in the attachment.

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/DatePicker504411642 

Screenshot:


 

 

Please let us know if you need any further assistance on this. 

Regards, 

Jeyanth. 

[Yordan]

Hello dear support, and than you for keep working on this issue.
Now - when I open the picker and close it with the button - a scroll bar appears which scrolls the entire content to nowhere:

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Yordan, 

Thanks for the update.

We can remove the horizontal scroll bar by setting the overflow-x as none. Please refer the below style.


 

.e-sidebar.e-right{ 

   overflow-x: hidden; 

} 

Screenshot


 

 

Please find the sample below. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/154929/ze/Datepicker_sidebar_overflow-1859246444 

Regards, 

Jeyanth. 

[Yordan]

Worked. Pheew.. really hard to understand for person which is coming from desktop development. 
Thanks dear support.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Yordan, 

We are glad to know that issue has been resolved. Please let us know if you need any further assistance on this. 

Regards, 

Jeyanth.
 

[Mateo]

Can you please confirm that popupObject still exists as property at ej2_instances[0]?

I am trying to use your solution but instance.popupObj seems to be undefined.

[Berly Christopher]

Hi Mateo, 

We would like to inform you that, based on the component structure we could not access the popup object directly from the component instance in the interop file. We can get the popup object from the DOM element with some time interval since, the popup element append in the DOM in the open event after some time span.  

So, we suggest you to get the popup object in the time interval as mentioned in the below code example. 

function onOpen( id ) 

{ 

    setTimeout(() => { 

        var instance = document.getElementById(id).blazor__instance; 

        instance.popupContainer.ej2_instances[0].offsetX = -25; 

        instance.popupContainer.ej2_instances[0].offsetY = 0; 

    },200) 

} 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1_76882b591277481823  

Regards, 

Berly B.C