从引导材料日期选择器返回日期

时间:2017-09-13 10:49:05

标签: jquery html twitter-bootstrap bootstrap-datepicker sweetalert2

道歉,如果这可能是一个愚蠢的问题,但如何从Bootstrap材料日期选择器返回用户选择的日期?

我将它与sweetalert2结合使用,一旦有人选择了它,我需要返回日期。

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/sweetalert2@6.7.0/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" />

目前它返回步骤1和2的正确输入信息,但日期步骤只返回true,如下所示

 ["title", "notes", true]

我需要它来返回用户选择的日期

1 个答案:

答案 0 :(得分:1)

尝试更改您的解析线:

return Promise.resolve($('#date-format').bootstrapMaterialDatePicker().val());
相关问题