1. Home
  2. Forum
  3. Blazor
  4. Hiding the input of the datepicker, but open the select date from a button ?

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

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 ?



28 Replies
BC Berly Christopher Syncfusion Team June 5, 2020 05:07 AM UTC

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. 
  
To know more about Calendar component, please refer the below documentation and demo link. 
  
Regards, 
Berly B.C 


YO Yordan June 5, 2020 10:18 AM UTC

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 ?

BC Berly Christopher Syncfusion Team June 8, 2020 11:11 AM UTC

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.  
  
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> 
 
  
  
Regards, 
Berly B.C 


YO Yordan June 8, 2020 05:42 PM UTC

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..


,

BC Berly Christopher Syncfusion Team June 9, 2020 01:46 PM UTC

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. 
  
  
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 


YO Yordan June 10, 2020 01:58 PM UTC

Love it !
Thank You very much dear support !

BC Berly Christopher Syncfusion Team June 11, 2020 03:57 AM UTC

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 


YO Yordan June 27, 2020 11:08 PM UTC

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.


BC Berly Christopher Syncfusion Team June 29, 2020 06:56 AM UTC

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.  
  
  
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 


YO Yordan June 29, 2020 07:03 AM UTC

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

YO Yordan June 29, 2020 08:24 AM UTC

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 );
}




BC Berly Christopher Syncfusion Team June 30, 2020 10:14 AM UTC

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. 
  
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  


YO Yordan June 30, 2020 10:21 AM UTC

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.

YO Yordan June 30, 2020 05:34 PM UTC

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

BC Berly Christopher Syncfusion Team July 1, 2020 01:36 PM UTC

Hi Yordan, 
  
As per the requested requirement, we have prepared the sample in the client-side blazor application and attached it below.  
  
  
Regards, 
Berly B.C 


YO Yordan July 1, 2020 03:01 PM UTC

O ! It works ?! with just switching to OnOpen ?! Good lords. 
Never would even pass my mind such a thing.
Thank You!

BC Berly Christopher Syncfusion Team July 2, 2020 04:23 AM UTC

Hi Yordan, 
  
Most welcome. Please let us know If you need further assistance on this. 
  
Regards, 
Berly B.C 


YO Yordan September 3, 2020 10:34 PM UTC

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

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 6, 2020 06:32 AM UTC

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. 


YO Yordan September 6, 2020 09:02 AM UTC

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

YO Yordan September 10, 2020 05:26 AM UTC

Shall I create a separate topic for DatePicker ?

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 15, 2020 07:52 AM UTC

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. 


YO Yordan September 15, 2020 04:04 PM UTC

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:



JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 16, 2020 12:21 PM UTC

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. 


Regards, 
Jeyanth. 


YO Yordan September 17, 2020 09:10 AM UTC

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

JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 18, 2020 07:38 AM UTC

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.
 


MA Mateo December 2, 2020 09:41 PM UTC

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.

BC Berly Christopher Syncfusion Team December 3, 2020 01:50 PM UTC

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) 
} 
 

Regards, 
Berly B.C

Loader.
Up arrow icon