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

【问题标题】：Need to show daterangepicker (calendar) before clicking the input element, when the Html page loads需要在点击输入元素之前显示 daterangepicker（日历），当 Html 页面加载时
【发布时间】：2017-07-17 23:19:36
【问题描述】：

我正在使用模板，我在左侧菜单中重新定位 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文件中的点击命令：

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)
        })

【问题讨论】：

标签： javascript html css templates scripting

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

有一个标准的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>

【讨论】：