Date time picker not working after setting autoUpdateInput to false

I have a requirement that when user has a date time exist in database only that time it shows date. But if database doesn't have date time then in text box it must be blank.

But when page load datetimepicker set default value in it. So for that I have set autoUpdateInput to false it's working it set textbox to blank. But after that the datetimepicker doesn't set value in textbox.

$('.datetimepicker').daterangepicker({ 
    autoUpdateInput: false,       
    singleDatePicker: true,
    showDropdowns: true,
    timePicker: true,
    locale: {
        format: 'DD-MM-YYYY hh:mm:ss'
    },
});

Js Fiddle Link: https://jsfiddle.net/Ly0jh5pz/2/

Note: I have to use daterangepicker so bootstrap datetimepicker is not an option.

try this:

$("#reportdatetime").daterangepicker({
                autoUpdateInput: false,
        timePicker: true,
        timePicker24Hour: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY H:mm'
        }
    });

  $('#reportdatetime').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY H:mm') + ' - ' + picker.endDate.format('MM/DD/YYYY H:mm'));
  });

  $('#reportdatetime').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });