Search code examples
jqueryasp.net-mvcbootstrap-datetimepicker

How to get time from time picker using jQuery and convert into ms-sql time(7) format?

I want to get time from time picker using java-script and convert into ms-sql time(7) format.

This Is my time picker code :

            <div class="form-group">
            <label class="col-md-4 control-label">
                In Time
            </label>
            <div class="col-md-5">
                <div class="input-group">
                    <input type="text" id="tpInTime" class="form-control timepicker timepicker-no-seconds">
                    <span class="input-group-btn">
                        <button class="btn default" type="button"><i class="fa fa-clock-o"></i></button>
                    </span>
                </div>
            </div>
        </div>
Solution

  • I just realized that you only need to get the exact time format of time 7 (i found the format documentation here). So i decided to make this tricky trick.

    Assumption

    • Second and Millisecond is 0
    • Getting the time using a timepicker ( not using Date() )

    Logic

    • Get the value of your time picker (look at the query)
    • The value should be hh:mm
    • According to Time 7 format, it should be hh:mm:ss.ms
    • So i just merge hh:mm with :ss.ms (look at the query)
    • Then i store it into a variable time7, and show it

    Reminder

    Timezone is set to default (GMT+0)

    Have a try!

    <!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

</body>
</html>
<div class="form-group">
  <label class="col-md-4 control-label">
    In Time
  </label>
  <div class="col-md-5">
    <div class="input-group">
      <input type="time" id="tpInTime" value="00:00">
      <span class="input-group-btn">
        <button class="btn default" type="button" id="btn"><i class="fa fa-clock-o">TEST</i></button>
        <p id="output"></p>
      </span>
    </div>
  </div>
</div>
<script>

  $("#btn").click(function(){
    var x = $("#tpInTime").val();
    var time7 = x+':00.0000000'
    $("#output").text(time7);
  });

</script>