javascript - HTML,CSS,JS 日历添加

Question

我的网页上有这个搜索栏，但是当我点击日历时没有任何反应，你知道我应该在那里添加什么，这样日历就会以某种方式弹出吗？

search bar

这里还有一个搜索栏的脚本:

    <!-- Search -->
        <script>
        $(window).ready(function(){
              var nowTemp = new Date();
              var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
              var checkin = $('#checkin').datepicker({
                onRender: function(date) {
                  return date.valueOf() < now.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                if (ev.date.valueOf() > checkout.date.valueOf()) {
                  var newDate = new Date(ev.date)
                  newDate.setDate(newDate.getDate() + 1);
                  checkout.setValue(newDate);
                }
                checkin.hide();
                $('#checkout')[0].focus();
              }).data('datepicker');
              var checkout = $('#checkout').datepicker({
                onRender: function(date) {
                  return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                }
              }).on('changeDate', function(ev) {
                checkout.hide();
              }).data('datepicker');
            });
        </script>

例如，这是一个用于签到的 div，还有这个日历，但它只是一个字形:

<div class="input-group">
   <input type="text" class="form-control" id="checkin" placeholder="Check in">
   <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>

我不确定这是否足以帮助我，如果不够，我将添加更多代码。

提前致谢!

Answer 1

Jquery ui 可以帮助你。这是解决方案:https://jqueryui.com/datepicker/#icon-trigger