@using Syncfusion.Blazor.Inputs

<div class="@CssClass">    
        <SfMaskedTextBox Placeholder="@Placeholder"
                         @bind-Value="StringValue"
                         Mask="@Mask"
                         CssClass="@(ValidState=="invalid"?"e-error":"e-success")"
                         Blur="@StringValue_Changed"
                         FloatLabelType="@FloatLabelType.Never">
        </SfMaskedTextBox>
        <SfDatePicker ID="MaskedDateInput" CssClass="hidden-picker" TValue="DateTime?" Value='@DateValue'>
            <DatePickerEvents TValue="DateTime?" ValueChange="@DateValue_Changed"></DatePickerEvents>
        </SfDatePicker>    
</div>

@code {

    [Parameter] public string Placeholder { get; set; }
    [Parameter] public string Mask { get; set; } = "[0-1][0-9]/[0-3][0-9]/[1-9][0-9][0-9][0-9]";
    [Parameter] public string CssClass { get; set; } = "form-group-align";
    [Parameter] public string ValidState { get; set; }
    [Parameter] public DateTime? DateValue { get; set; }
    [Parameter] public EventCallback<DateTime?> DateValueChanged { get; set; }    
    [Parameter] public EventCallback<Microsoft.AspNetCore.Components.Web.FocusEventArgs> Blur { get; set; }
    [Parameter] public bool AllowNull { get; set; }
    [Parameter] public EventCallback<ValidationEventArgs> OnValidate { get; set; }
    private string StringValue { get; set; }

    static class Converter
    {
        
        public static String DateTimeToString(DateTime dateTime)
        {
            return dateTime.ToString("MM/dd/yyyy");                    
        }
        public static DateTime? StringToDateTime(string strDate)
        {
            if (!string.IsNullOrEmpty(strDate))
            {
                if (strDate.Contains("/"))
                {
                    //Removes any / characters from date string
                    strDate = strDate.Replace("/", "");
                }
                try
                {
                    var result = DateTime.ParseExact(strDate, "MMddyyyy", System.Globalization.CultureInfo.CurrentCulture);
                    if (strDate.Length < 5)
                    {
                        //Invalid date, may assume current year.  Lets force it to a bad year.
                        result = new DateTime(1, result.Month, result.Day);
                    }
                    return result;
                }
                catch (Exception ex)
                {
#if DEBUG
                    Console.WriteLine($"Unable to convert string ({strDate}) to datetime format.\r\n{ex.Message}");
#endif
                }

            }
            return null;
        }
    }

    public class ValidationEventArgs : System.EventArgs
    {
        public ValidationEventArgs() : base() { }

        public bool IsValid { get; set; }
        public string Message { get; set; }
        public DateTime? DateValue { get; set; }
    }


    private async Task DateValue_Changed(ChangedEventArgs<DateTime?> args)
    {
        DateValue = args.Value;
        UpdateStringValue(DateValue);
        ValidationEventArgs result = new ValidationEventArgs { DateValue = this.DateValue };
        if (OnValidate.HasDelegate)
        {
            await OnValidate.InvokeAsync(result);
        }
        await DateValueChanged.InvokeAsync(DateValue);
        if (Blur.HasDelegate) await Blur.InvokeAsync(new Microsoft.AspNetCore.Components.Web.FocusEventArgs { Type = args.GetType().Name });
    }

    private async Task StringValue_Changed(MaskBlurEventArgs args)
    {
        DateValue = Converter.StringToDateTime(args.Value);
        await DateValueChanged.InvokeAsync(DateValue);
        if (Blur.HasDelegate) await Blur.InvokeAsync(new Microsoft.AspNetCore.Components.Web.FocusEventArgs { Type = args.GetType().Name });
    }

    private void UpdateStringValue(DateTime? dateValue)
    {
        var nullable = dateValue as Nullable<DateTime>;
        if (nullable.HasValue)
            StringValue = Converter.DateTimeToString(nullable.Value);
        else
            StringValue = string.Empty;
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        UpdateStringValue(DateValue);
    }
}

<style>
    .hidden-picker {
        visibility: hidden !important;
        width: 0px !important;
        left: -36px;
    }
        .hidden-picker input {
            visibility: hidden !important;
            position: relative !important;            
            width: 0px !important;
        }

        .hidden-picker span.e-input-group-icon.e-date-icon.e-icons {
            visibility: visible !important;            
            position: relative !important;
            background-color: transparent !important;
            color: blue !important;
        }

    #MaskedDateInput_popup {
        visibility: visible !important;
        width: auto !important;
        height: auto !important;        
    }
</style>

Usage Example:

@page="/MyPage"

...
<EditForm ...>
<MaskedDateInput @ref="@mdiServiceDate" 
                 CssClass="form-group-align" 
                 Placeholder="Enter Date of Service" 
                 @bind-DateValue="_datasource.ServiceDate" 
                 Mask="[0-1][0-9]/[0-3][0-9]/[1-9][0-9][0-9][0-9]" 
                 OnValidate="@OnValidate_ServiceDate">
</MaskedDateInput>
<ValidationMessage For="@(() => _datasource.ServiceDate)" /><!-- Attribute based validation -->

</EditForm ...>
@Code{
    private MaskedDateInput mdiServiceDate { get; set; }
  
    private async Task OnValidate_ServiceDate(MaskedDateInput.ValidationEventArgs args)
    {
        //Custom validation logic here
        args.IsValid = true;
    }
}