Razor Pages - DateOnly and TimeOnly Bind to Html Input Controls?

how can u bind dateonly and timeonly fields to html controls such ass date picker and time picker? i am using Mariadb as rdbms , I want to show to the end user date and time picker inputs, so far the date and time picker wont work properly.

<form method="post">
<input hidden asp-for="Period.Periodid" />
<div class="border p-3 mt-4">
    <div class="row mb-3">
        <h4 class=" pl-3">Επεξεργασία Επαφής</h4>
    </div>
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="mb-3">
        <label asp-for="Period.StartDate">Ημερομηνία Έναρξης</label>
        <input type="date" asp-for="Period.StartDate" class="form-control" />
        <span asp-validation-for="Period.StartDate" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label asp-for="Period.EndDate">Ημερομηνία Λήξης</label>
        <input type="date" asp-for="Period.EndDate" class="form-control" />
        <span asp-validation-for="Period.EndDate" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label asp-for="Period.StartTime">Ώρα Έναρξης</label>
        <input type="time" asp-for="Period.StartTime" class="form-control" />
        <span asp-validation-for="Period.StartTime" class="text-danger"></span>
    </div>
    <div class="mb-3">
        <label asp-for="Period.EndTime">Ώρα Λήξης</label>
        <input type="time" asp-for="Period.EndTime" class="form-control" />
        <span asp-validation-for="Period.EndTime" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary" style="width:150px;">Ενημέρωση</button>
    <a asp-page="Index" class="btn btn-secondary" style="width:150px;">Λίστα</a>
</div>

model

public class Period
{
    public int Periodid { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateOnly StartDate { get; set; }

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateOnly EndDate { get; set; }

    [Required]
    [DataType(DataType.Time)]
    public TimeOnly StartTime { get; set; }

    [Required]
    [DataType(DataType.Time)]
    public TimeOnly EndTime { get; set; }
}