CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
Maduro
Maduro

Reputation: 725

how to get values from bootstrap timepicker?

I'm trying to get the value of the bootstrap time-picker on my input tag. Once i get that value, the value goes to the database, after form is submitted. 

<div class="form-group">
  <label class="control-label" >Start Session Time:</label>
  <div class=" date show-timer input-width input-group" id="datetimepicker1" >
      <input placeholder="HH:MM PM" name="start_session_time"  id="timepicker1" type="text" style="height:30px; font-size:14px" class="form-control input-sm" value="">
        <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
   </div>       
</div>

$('.show-timer').click(function () {    
    var id = this.id;

    $('#' + id).datetimepicker({
        format: 'LT'
    });

    var time = $("#" + id).find("input").val();
});

NOTE: id="timepicker1" is not the only input id. In other words, I have up to 10 ids. Also, so far, I can alert(time) and it does alert the value, but it doesn't add the value to the input

Thanks,

Upvotes: 0

Views: 2388

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

I tried to figure out what you are looking for. So at document ready I create the datetimepicker for each element. On dp.change event I alert a message containing both the datetimepicker and the corresponding input field value. As you can see they are the same:

$(function () {
  $('[id^="datetimepicker"]').datetimepicker({
    format: 'LT'
  });
  $('.show-timer').on('dp.change', function (e) {
    var time = $("#" + this.id).data('date');
    if (time !== undefined) {
      var inputValue = $('#' + this.id).find('input').val();
      alert('datetimepicker value: ' + time + ' inputValue: ' + inputValue);
    }
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"
          rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
            integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>



<form role="form" method="post" action="index.php">
    <div class="form-group">
        <label class="control-label">Start Session Time:</label>

        <div class=" date show-timer input-width input-group" id="datetimepicker1">
            <input placeholder="HH:MM PM" name="start_session_time1" id="timepicker1" type="text"
                   style="height:30px; font-size:14px" class="form-control input-sm" value="">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">Start Session Time:</label>

        <div class=" date show-timer input-width input-group" id="datetimepicker2">
            <input placeholder="HH:MM PM" name="start_session_time2" id="timepicker2" type="text"
                   style="height:30px; font-size:14px" class="form-control input-sm" value="">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">Start Session Time:</label>

        <div class=" date show-timer input-width input-group" id="datetimepicker3">
            <input placeholder="HH:MM PM" name="start_session_time3" id="timepicker3" type="text"
                   style="height:30px; font-size:14px" class="form-control input-sm" value="">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Submit" class="btn btn-primary">
        </div>
    </div>
</form>

I hope this can help you.

Upvotes: 1

Related Questions