<TelerikButton OnClick="@( () => DateValue = null )">Clear Value</TelerikButton>
<TelerikButton OnClick="@( () => DateValue = DateTime.Now )">Set Value</TelerikButton>

DateValue.HasValue: @DateValue.HasValue

<p>Default behavior:</p>

<TelerikDatePicker @bind-Value="@DateValue"
                   Width="200px" />

<p>Red border will disappear after blur (CSS):</p>

<TelerikDatePicker @bind-Value="@DateValue"
                   Width="200px"
                   Class="@( !DateValue.HasValue ? "valid-null" : "" )" />

<p>Red border will never appear (CSS):</p>

<TelerikDatePicker @bind-Value="@DateValue"
                   Width="200px"
                   Class="valid-null" />

<p>Red border will disappear after blur (OnChange):</p>

<TelerikDatePicker @bind-Value="@DateValue"
                   Width="200px"
                   OnChange="@OnPickerChange" />


<style>
    .k-input.k-invalid.valid-null {
        border-color: rgba(0, 0, 0, 0.08);
    }
</style>

@code {
    private DateTime? DateValue { get; set; } = DateTime.Now;

    private async Task OnPickerChange(object newValue)
    {
        DateTime? newDate = (DateTime?)newValue;

        if (!newDate.HasValue)
        {
            DateValue = DateTime.Now;
            await Task.Delay(1);
            DateValue = null;
        }
    }
}