CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
alexia
alexia

Reputation: 57

What is a simple way to pass DateTimePicker to value and read from value?

I've read the documents for the Bootstrap DateTimePicker but I can't seem to work out how to read a value or pass a value to the html attribute tag "value".

For example I want the value to display in the TimeDatePicker but it does not show up. And if I was to add a TimeDate in the TimeDatePicker I want to also make that appear in a value tag.

The values are being read from the backend in Python.

<div class="container">
    <div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" value="2017-03-08 08:00:00">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>


$(function () {
  $('#datetimepicker1').datetimepicker();
});

https://jsfiddle.net/8g2g8n3o/5/

Upvotes: 0

Views: 35

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

You have to set the format of date time. Here's a demo. 

$('#datetimepicker1').datetimepicker({
  // set date time format
  format: 'YYYY-MM-DD hh:mm:ss'
});

$('#datetimepicker1').on('dp.change', function() {
  // date time change event
  console.log($('#datetimepicker1').find('input').val()) // get selected date time
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" value="2017-03-08 08:00:00">
          <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>

Upvotes: 1

Related Questions