title: 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
body: <p>Add hours, minutes, and seconds  to an input field, display
  <code>hh:mm:ss.fffffff am/pm</code>, save this to the database in the <code>timespan hh:mm:ss.fffffff</code> in Blazor. Here, I used <code>input type=&quot;number&quot;</code> for
  inserting hours, minutes, and seconds. And a dropdown for am/pm.</p>
  <p>I want to get this as <code>timespan</code> 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.</p>
  <p>How do I get the <code>Fromtime</code> and <code>ToTime</code> and convert to <code>Timespan</code> format and send to the database?</p>
  <p>My model class contains:</p>
  <pre class="lang-cs prettyprint-override"><code>    public class Model
          {
              public TimeSpan FromTime { get; set; }
              public TimeSpan ToTime { get; set; }
          }
  </code></pre>
  <p>times.razor:</p>
  <pre class="lang-cs prettyprint-override"><code>    &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot; id=&quot;time&quot;&gt;
              &lt;label for=&quot;quantity&quot;&gt;From Time:&lt;/label&gt;
              &lt;span&gt;Hour:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;hoursid&quot; 
                         name=&quot;quHour&quot; 
                         min=&quot;1&quot; 
                         max=&quot;24&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;Minutes:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;minutesid&quot; 
                         name=&quot;quMin&quot; 
                         min=&quot;0&quot; 
                         max=&quot;60&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;Seconds:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;secondid&quot; 
                         name=&quot;quSec&quot; 
                         min=&quot;0&quot; 
                         max=&quot;60&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;
                  &lt;select class=&quot;form-control&quot; id=&quot;selectampm&quot;&gt;
                      &lt;option value=&quot;0&quot; selected=&quot;selected&quot;&gt;AM&lt;/option&gt;
                      &lt;option value=&quot;1&quot;&gt;PM&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col&quot; id=&quot;time&quot;&gt;
              &lt;label for=&quot;quantity&quot;&gt;To Time:&lt;/label&gt;
              &lt;span&gt;Hour:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;hoursid&quot; 
                         name=&quot;quHour&quot; 
                         min=&quot;1&quot; 
                         max=&quot;24&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;Minutes:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;minutesid&quot; 
                         name=&quot;quMin&quot; 
                         min=&quot;0&quot; 
                         max=&quot;60&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;Seconds:
                  &lt;input class=&quot;e-input e-field&quot; 
                         type=&quot;number&quot; 
                         id=&quot;secondid&quot; 
                         name=&quot;quSec&quot; 
                         min=&quot;0&quot; 
                         max=&quot;60&quot;&gt;
              &lt;/span&gt;
              &lt;span&gt;
                  &lt;select class=&quot;form-control&quot; id=&quot;selectampm&quot;&gt;
                      &lt;option value=&quot;0&quot; selected=&quot;selected&quot;&gt;AM&lt;/option&gt;
                      &lt;option value=&quot;1&quot;&gt;PM&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      @code {
          public async void action()
          {  
              string timevalue=await JSRuntime.InvokeAsync&lt;string&gt;(&quot;myFunction&quot;);
          }
      }
  </code></pre>
  <p>Times.js:</p>
  <pre><code>function myyFunction() {
      var hours = document.getElementById(&quot;#hoursid&quot;);
      var minutes = document.getElementById(&quot;#minutesid&quot;);
      var seconds = document.getElementById(&quot;#secondid&quot;);
      var ampm = document.getElementById(&quot;#selectampm&quot;); 
      var timefromtextbox = hours + &quot;:&quot; + minutes + &quot;:&quot; + seconds + &quot; &quot; + ampm;
  }
  </code></pre>
  <p>Can anyone please help me?</p>