Add hours,minutes,seconds to the input fields &display as hh:mm:ss am/pm using js & convert to Timespan before saving to db in Blazor

Question

Add hours, minutes, and seconds to an input field, display hh:mm:ss.fffffff am/pm, save this to the database in the timespan hh:mm:ss.fffffff in Blazor. Here, I used input type="number" for inserting hours, minutes, and seconds. And a dropdown for am/pm.

I want to get this as timespan format and save that to the database in Blazor server app. If I use this, I am trying to concatenate the hours ,minutes, and seconds through javascript and using the function.

How do I get the Fromtime and ToTime and convert to Timespan format and send to the database?

My model class contains:

    public class Model
        {
            public TimeSpan FromTime { get; set; }
            public TimeSpan ToTime { get; set; }
        }

times.razor:

    <div class="row">
        <div class="col" id="time">
            <label for="quantity">From Time:</label>
            <span>Hour:
                <input class="e-input e-field" 
                       type="number" 
                       id="hoursid" 
                       name="quHour" 
                       min="1" 
                       max="24">
            </span>
            <span>Minutes:
                <input class="e-input e-field" 
                       type="number" 
                       id="minutesid" 
                       name="quMin" 
                       min="0" 
                       max="60">
            </span>
            <span>Seconds:
                <input class="e-input e-field" 
                       type="number" 
                       id="secondid" 
                       name="quSec" 
                       min="0" 
                       max="60">
            </span>
            <span>
                <select class="form-control" id="selectampm">
                    <option value="0" selected="selected">AM</option>
                    <option value="1">PM</option>
                </select>
            </span>
        </div>
    </div>
    <div class="row">
        <div class="col" id="time">
            <label for="quantity">To Time:</label>
            <span>Hour:
                <input class="e-input e-field" 
                       type="number" 
                       id="hoursid" 
                       name="quHour" 
                       min="1" 
                       max="24">
            </span>
            <span>Minutes:
                <input class="e-input e-field" 
                       type="number" 
                       id="minutesid" 
                       name="quMin" 
                       min="0" 
                       max="60">
            </span>
            <span>Seconds:
                <input class="e-input e-field" 
                       type="number" 
                       id="secondid" 
                       name="quSec" 
                       min="0" 
                       max="60">
            </span>
            <span>
                <select class="form-control" id="selectampm">
                    <option value="0" selected="selected">AM</option>
                    <option value="1">PM</option>
                </select>
            </span>
        </div>
    </div>

    @code {
        public async void action()
        {  
            string timevalue=await JSRuntime.InvokeAsync<string>("myFunction");
        }
    }

Times.js:

function myyFunction() {
    var hours = document.getElementById("#hoursid");
    var minutes = document.getElementById("#minutesid");
    var seconds = document.getElementById("#secondid");
    var ampm = document.getElementById("#selectampm"); 
    var timefromtextbox = hours + ":" + minutes + ":" + seconds + " " + ampm;
}

Can anyone please help me?

Answer 1

You don't need JavaScript to do this. Here is a simple example of one way you could do this in Blazor. This is for demonstration purposes only - obviously you would want to label your HTML inputs and include validation of some type. This is simply to show you that there is absolutely no need to use JavaScript for this at all.

<div>
    <input type="number" @bind="hours">
    <input type="number" @bind="minutes">
    <input type="number" @bind="seconds">
</div>

@code{
    private int hours;
    private int minutes;
    private int seconds;

    private TimeSpan CreateTimeSpan() => new TimeSpan(hours, minutes, seconds);
}