SingleDate Clear not firing

[jsandv]

Im using SingleDatePicker and are having issues with clearing the component. If user decides to not provide a date after all he might clear the text, the placeholder is the visible again, but nothing has changed in the Model state.

Clearing the date using text input or using the provided clear button in text input does not fire event OnRangeSelect, also the bound properties is not set to null. Its not possible to reset date selected using when SingleDatePicker="true".

According to readme I can override the templated buttons, but these butons are not available in the SinglePicker.

<ButtonsTemplate> <button class="cancelBtn btn btn-sm btn-default" @onclick="@context.ClickCancel" type="button">Cancel</button> <button class="cancelBtn btn btn-sm btn-default" @onclick="@(e => ResetClick(e, context))" type="button">Reset</button> <button class="applyBtn btn btn-sm btn-primary" @onclick="@context.ClickApply" disabled="@(context.StartDate == null || context.EndDate == null)" type="button">Apply</button> </ButtonsTemplate>

[jdtcn]

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

[jsandv]

This works for clearing the text using keyboard. :)

oninput event does not fire on Edge when clicking the clear button on the input. Seems to be a Edge issue.

I can hide it using css: .datePickerInput::-ms-clear { display: none; }

[jdtcn]

Cross-browser way to add a clear button to the textbox: https://github.com/jdtcn/BlazorDateRangePicker/issues/18

[jsandv]

Will do!