Return date from bootstrap material date picker

Question

Apologies if this may be a silly question, but how do I return the users selected date from Bootstrap material date picker?

I am combining it with sweetalert2, and I need to return the date once someone has selected it.

swal.setDefaults({
  confirmButtonText: 'Next →',
  showCancelButton: true,
  animation: false,
  progressSteps: ['1', '2', '3']
})

var steps = [{
    title: 'Title',
    input: 'text',
    text: 'Please specify reminder title'
  },
  {
    title: 'Notes',
    input: 'textarea',
    text: 'Please leave yourself some notes for this reminder'
  },
  {
    title: 'Time',
    html: '<input type="text" id="date-format" class="form-control" placeholder="Saturday 24 June 2017 - 21:44">',
    text: 'Please leave yourself some notes for this reminder',
    onOpen: function() {
      $('#date-format').bootstrapMaterialDatePicker({
        format: 'dddd DD MMMM YYYY - HH:mm'
      });
    },
    preConfirm: function() {
      return Promise.resolve($('.input-daterange-timepicker').val());
    }
  }
]
swal.queue(steps).then(function(result) {
  swal.resetDefaults()
  console.log(result);
  swal({
    title: 'All done!',
    confirmButtonText: 'Lovely!'
  })
}, function() {
  interval = setInterval(reminderTimes, 10000)
  swal.resetDefaults();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.7.0/sweetalert2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/js/bootstrap-material-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-datetimepicker/2.7.1/css/bootstrap-material-datetimepicker.min.css" />

At the moment it is returning the correct input information for step 1 and 2, but the date step simply returns true, as shown below

 ["title", "notes", true]

i need it to return the date the user has selected

Answer 1

try changing your resolve line like so:

return Promise.resolve($('#date-format').bootstrapMaterialDatePicker().val());