Unplanned
Last Updated: 08 Jul 2021 09:08 by ADMIN
Grant
Created on: 08 Jul 2021 09:07
Category: DateTimePicker
Type: Feature Request
1
Add event that will fire when the Set button is clicked

 I want to to be able to catch the click of the Set button regardless of whether or not the value was changed.

 

==========

ADMIN EDIT

==========

For the time being, a possible workaround could be to use some JS Interop to catch the click of the Set button. You can create a custom OnOpen event for the DateTimePicker dropdown as per the admin edit example in this post. You can use the OnOpenHandler to invoke the JS responsible for catching the click event of the Set button. The example below demonstrates the described approach.

@inject IJSRuntime JSInterop

Selected time: @selectedTime
<br />
<span class="datetimepicker-span" @onclick="@OnOpenHandler">
    <TelerikDateTimePicker Min="@Min" Max="@Max" @bind-Value="@selectedTime"
                           Format="dd MMM yyyy HH:mm:ss" Width="250px">       
    </TelerikDateTimePicker>
</span>

@code {

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

    public async Task OnOpenHandler()
    {
        isOpened = !isOpened;

        if (isOpened)
        {            
            await JSInterop.InvokeVoidAsync("SetBtnClicked", ".k-time-accept");

            isOpened = false;
        }        
    }    

    private DateTime? selectedTime = DateTime.Now;
    public DateTime Min = new DateTime(1990, 1, 1, 8, 15, 0);
    public DateTime Max = new DateTime(2025, 1, 1, 19, 30, 45);

}

 

    <script>
        function SetBtnClicked(selector) {
            var element = document.querySelector(selector);
            element.addEventListener('click', function () {
                alert("Set button clicked");
            });
        }
    </script>

0 comments