How to add custom button in datepicker?

[Niha Shaikh]

Hi,

I have requirement where I need to add button and on its click event I want to write my custom code 
or Can I change "Today" and "Clear" button text and also override its click event?

Let me know any one of the possibilities.

[Berly Christopher]

Hi Niha, 

  

Greetings from Syncfusion support. 

  

We have checked the requested requirement and we can achieve this by using call the JS interop since we could not get the popup element in the server-side.  

  

Here, we have showcased that how will we add the custom button (clear button) in-front of the Today button in the popup element. 

  

Also, we could not bind the DatePicker’s events and affect the properties in the client side. So, we have performed the clear action in the server-side by calling the server-side method in the client-side with help of DotNet reference. So, we suggest you to perform the required action for the added button element in the server-side based on the application needs. Please refer the below code example.  

  

[index.razor] 

<SfDatePicker @ref="dateObj" ID="datepicker" TValue="DateTime?" @bind-Value="@dateval"> 

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

</SfDatePicker> 

@code{ 

    private static Action action; 

    SfDatePicker<DateTime?> dateObj; // to affect the date value 

    public DateTime? dateval { get; set; } = DateTime.Now; 

    [Inject] 

    protected IJSRuntime JsRuntime { get; set; }  

    protected override void OnInitialized() 

    { 

        action = UpdateValue; // call the method where we want to perform actions for the component 

    } 

    public async Task OnOpen(PopupObjectArgs args) 

    { 

        await JsRuntime.InvokeVoidAsync("OnOpen", "datepicker"); // call the interop JS to render the custom button element. 

    } 

 

    [JSInvokable] 

    public static void ReturnValue() 

    { 

        action.Invoke(); // For invoking the server side method from the client-side 

    } 

    private void UpdateValue() 

    { 

        this.dateval = null; // to make the component value as null 

        StateHasChanged(); 

    } 

} 

[wwwroot/daterange.js] 

window.OnOpen = (id) => { 

    setTimeout(() => { // For accessing the popup element in the DOM, we need some time. 

        var footerElement = document.querySelector(".e-popup-wrapper .e-footer-container"); 

        var clearBtn = document.createElement("button"); 

        clearBtn.className = "e-btn e-clear e-flat"; 

        clearBtn.textContent = "Clear"; 

        if (footerElement) { 

            footerElement.prepend(clearBtn); // append the custom button element in the popup. 

        } 

        clearBtn.addEventListener("click", function () { 

            DotNet.invokeMethodAsync('Blazor_Date_App', 'ReturnValue') // call the server-side method for perform the required action 

        }); 

    }, 100) 

}  

 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker_custombutton_300796-1743601613  

  

Regards, 

Berly B.C 

[Niha Shaikh]

Hi Berly,

Thanks for your input and solution, I was thinking to do it without JavaScript is this possible?

[Prince Oliver]

Hi Neha. 

Thanks for the update. 

Currently, we have no built-in option in Blazor to add custom buttons and bind events. Hence we can achieve your customization through the previously suggested JavaScript code. So, kindly use the shared solution to achieve your requirement in your end. 

Regards, 

Prince