Question

我正在使用模板，我在左侧菜单中重新定位daterangepicker，我想在页面加载时显示它，但是有很多默认函数，其中一个显示它直到我点击输入它的元素。有什么想法吗？

这是HTML：

<div>
  <div class="daterangepicker xdisplay picker_2 single opensright show-calendar">
    <div class="calendar first single right" style="display: block;">                            
    </div>                        
  </div>
  <fieldset>
    <div class="control-group">
      <div class="controls">
        <div class="col-md-12 xdisplay_inputx form-group has-feedback">
          <input type="text" class="form-control has-feedback-left active" id="single_cal2" placeholder="First Name" aria-describedby="inputSuccess2Status2">
          <span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
          <span id="inputSuccess2Status2" class="sr-only">(success)</span>
        </div>
      </div>
    </div>
  </fieldset>
</div>

以下是HTML中的脚本：

<script>
  $(document).ready(function() { 

    $('#single_cal2').daterangepicker({         
      singleDatePicker: true,
      calender_style: "picker_2"
    }, function(start, end, label) {
      console.log(start.toISOString(), end.toISOString(), label);
    });        
  });
</script>

这是js文件中的click命令：

this.element.is("input")?this.element.on({
            "click.daterangepicker":i.proxy(this.show,this),
            "focus.daterangepicker":i.proxy(this.show,this),
            "keyup.daterangepicker":i.proxy(this.updateFromControl,this)
        })

Answer 1

文档加载后，您可以使用标准的 HTML DOM click（）方法。它模拟鼠标单击元素。

来自w3school.com: HTML DOM click() Method

的简单示例

function myFunction() {
    document.getElementById("myCheck").click();
}

<p>Hover over the checkbox to simulate a mouse-click.</p>

<form>
  <input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('click event occured')">
</form>

Answer 2

没有选项可以在页面加载时显示它，您需要模拟点击输入

<script>
  $(document).ready(function() { 
    $('#single_cal2').daterangepicker({         
      singleDatePicker: true,
      calender_style: "picker_2"
    }, function(start, end, label) {
      console.log(start.toISOString(), end.toISOString(), label);
    });    

    $('#single_cal2').click();

  });
</script>

在加载Html页面时，需要在单击输入元素之前显示daterangepicker（日历）

2 个答案: