javascript - 获取日期时间输入字段的值

Question

我想提醒输入字段的日期时间值，但我收到错误“datetimepicker 不是函数”，我使用的 jQuery 链接

var time_start = $('#datetimepicker1').val();
$('#datetimepicker1').datetimepicker();

$(document).on('change', '#datetimepicker1', function() {
  time_start = $(this).val();
})

$(document).on('click', '#btn_ok', function() {
  alert(time_start);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div class="form-inline">
  <label style="padding-right: 10px">Từ</label>
  <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
  <br>
  <label style="padding-right: 10px; padding-left: 10px">đến</label>
  <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" />
    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

我该如何解决？

Answer 1

jquery ui datepicker 的函数是datepicker，而不是datetimepicker。此外，您还将日期时间选择器功能附加到 div 而不是输入字段。我添加了一个 onSelect 事件，每次在日历中选择日期时都会调用该事件。

$('#datetimepicker1').datepicker({
  onSelect: function(dateText) {
    alert(dateText);
  }
});

$(document).on('click', '#btn_ok', function () {
   alert($('#datetimepicker1').val());
})

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="form-inline">
    <label style="padding-right: 10px">Từ</label>
    <div class="input-group date" data-target-input="nearest">
         <input type="text" id="datetimepicker1" class="form-control datetimepicker-input">
    </div>
    <button id="btn_ok">Submit</button>
</div>