点击时无法显示日历 - 没有JS错误

Question

当我单击文本框或图标时，我无法显示弹出日历。我没有得到任何JavaScript错误，似乎无法解决问题所在。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
  $('#datetimepicker input').click(function(event) {
     $('#datetimepicker').data("DateTimePicker").show(); 
  });
</script>

<!-- in the body -->
<div class="input-group">
  <input type="text" id="datetimepicker" class="form-control" name="date">
  <label class="input-group-addon btn" for="date">
    <span class="fa fa-calendar open-datetimepicker"></span>
  </label>
</div>

任何人都可以看到我做错了什么，因为我现在真的很困惑，似乎无法解决这个问题。

谢谢

Answer 1

在document.ready你必须初始化datepicker只是使用它

$("#datetimepicker ").datepicker({
  dateFormat: 'd-M-yy'
});   

当您单击输入类型时，它将自动显示日历

Answer 2

确保您已正确导入jQuery，jQuery DateTimePicker JS和CSS。然后使用datetimepicker简单如下，不需要点击事件 -

$('#datetimepicker').datetimepicker();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" />

<div class="input-group">
    <input type="text" id="datetimepicker" class="form-control" name="date">
    <label class="input-group-addon btn" for="date">
       <span class="fa fa-calendar open-datetimepicker"></span>
    </label>
</div>