jdtcn / BlazorDateRangePicker

A Blazor component for choosing date ranges and dates
MIT License
186 stars 34 forks source link

Event when the input text is deleted from keyboard #23

Closed lucianparvu closed 4 years ago

lucianparvu commented 4 years ago

Hi ,

I want to use it in a Filtering List . (2 Date Range Pickers From Date, To Date) to accomplish the situation when the user wants the data only using first Date Picker and I am using : OnRangeSelect="OnChangedToDate".

Is there an event when the user delete the input text from the keyboard ? Because sometimes maybe will delete the input text ? The result expected is to make FromDate = null for example when will delete the input text.

Thank's

My configuration

<DateRangePicker OnRangeSelect="OnChangedFromDate" SingleDatePicker="true" LinkedCalendars="true" @bind-StartDate="FromDate" Culture="@(System.Globalization.CultureInfo.GetCultureInfo(PageState?.CultureInfo ?? "en-GB"))" ApplyLabel="@_SharedLocalizer["Apply"]" CancelLabel="@_SharedLocalizer["Cancel"]">

<DateRangePicker OnRangeSelect="OnChangedToDate" SingleDatePicker="true" LinkedCalendars="true" @bind-StartDate="ToDate" Culture="@(System.Globalization.CultureInfo.GetCultureInfo(PageState?.CultureInfo ?? "en-GB"))" ApplyLabel="@_SharedLocalizer["Apply"]" CancelLabel="@_SharedLocalizer["Cancel"]"></DateRangePicker>
jdtcn commented 4 years ago

You can override @oninput event handler behavior:

<DateRangePicker SingleDatePicker="true" @bind-StartDate="StartDate" EndDate="StartDate">
    <PickerTemplate>
        <input id="@context.ParentId" type="text" value="@context.FormattedRange" 
        @oninput="@(e => OnDpInput(context, e))" @onfocusin="context.Open"
        @onfocusout="context.LostFocus" />
    </PickerTemplate>
</DateRangePicker>

And code:

DateTimeOffset? StartDate { get; set; }
public Task OnDpInput(DateRangePicker context, ChangeEventArgs e)
{
    if (string.IsNullOrEmpty(e.Value?.ToString()))
    {
        // Handle user delete text event here
        StartDate = null;
    }
    else
    {
        return context.OnTextInput(e);
    }
    return Task.CompletedTask;
}