Clear button in the textbox

[jdtcn]

+1 for this.

One thing I thought would be to use the type="search" rather than type="text". You then get the nice little clear button in the textbox by default. However this does cause the popup for the date picker and does not reset any bound values.

Originally posted by @leninator in https://github.com/jdtcn/BlazorDateRangePicker/issues/17#issuecomment-620632413

[jdtcn]

Hello, @leninator!

I did some research on type="search" input, and it seems there is no way to know when the user clicks on "x". The feature is non-standard, and not supported in firefox.

Thus I recommend you to use custom picker template with whatever you want functionality.

Example for "x" reset button using bootstrap 4:

<DateRangePicker @bind-StartDate="StartDate" @bind-EndDate="EndDate">
    <PickerTemplate>
        <div class="input-group">
            <input id="@context.ParentId" type="text" class="form-control" value="@context.FormattedRange"
                   @oninput="context.OnTextInput"
                   @onfocusin="context.Open"
                   @onfocusout="@context.LostFocus" />
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" @onclick="@(e => ResetClick(e, context))">x</button>
            </div>
        </div>
    </PickerTemplate>
</DateRangePicker>

It'll give you:

@bind-StartDate and @bind-EndDate is mandatory for reset function to work. See ResetClick implementation in README.md