DateTimePicker wont update the value field onChange or onSelect

I am trying to update the value of an input when i change the selected date. This is my html code for the input.

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="<?php echo date("d/m/Y",strtotime("now"))?>" readonly />

This is my jquery onSelect function

 $(document).ready(function() {
  $('.completed_date').datetimepicker({
   timepicker: false,
   format: 'd/m/Y',
    onSelect: function() {
     var date = $(this).val();
     $('#completed_date').val(date);
    }
  });
 });

This code has no effect on my input field but if i change the last line to

$('#completed_date').text(date);

then it adds the new selected date to the end of the html line.

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="<?php echo date("d/m/Y",strtotime("now"))?>" readonly /> Adds the date here

The code in the value field currently shows today's date by default but should be updated onSelect.

I have read the documentation but cant seem to find what im missing. Any help will be greatly appreciated.

It updates visually in the field but the actual value in the input doesn't change so when i click save it always sends today's date instead of the selected date

Solution

bootstrap-datepicker use .datepicker method to load the picker.

$('.completed_date').datepicker({
    timepicker:false,
    format:'d/m/yy'      
  })
.on("changeDate", function(e) {
 
  $('#completed_date').attr('value', e.format());
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>

<input type="text" name="completed_date" id="completed_date" size="12" class="completed_date fielddate" value="12/12/2016" />