How to get value of date time picker bootstrap in Javascript

Question

I have tried to print out the date-time picker value in the console but nothing works.

HTML

<div class="form-group">
  <label for="sm" class="control-label col-lg-2 col-sm-4">{{ __('messages.assetmgt.warrantyeffectivedate') }}</label>
  <div id="myDate" class="col-sm-6 input-group bootstrap-timepicker">
     <input class="input-sm form-control"  type="text" name="awEffectiveDateWeb" id="awEffectiveDateWeb" readonly/>
     <span class="input-group-addon try dateTimePickerButton" id="awEffectiveDate"><span class="fa fa-calendar"></span></span>
  </div
</div>

JS

var value = $("#myDate").datetimepicker("getDate");
console.log(value);

DateTime picker

$(document).ready(function() {
    $('.bootstrap-timepicker').datetimepicker({
        format: 'DD/MM/YYYY HH:mm:ss'
    });
});

My expected result is when the DateTime value was changed, the value of the date-time picker will be printed on the console.

Answer 1

Better to initialize datepicker on input element rather than div

$('#awEffectiveDateWeb').datetimepicker({
     format: 'DD/MM/YYYY HH:mm:ss'
});

And you can use datepicker on change function

$('#awEffectiveDateWeb').on('dp.change', function() {
   console.log($(this).val());
}