Htmlページがロードされるときに入力要素をクリックする前にdaterangepicker（カレンダー）を表示する必要があります

Question

テンプレートを使用していて、左側のメニューでdaterangepickerを再配置しています。しかし、多くのデフォルト関数があり、そのうちの1つは入力要素をクリックするまで表示されます。何か案は？ここで

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

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

Answer 2

標準であるHTML DOM click（）メソッドドキュメントにローダがあると使用できますd。これは、要素のマウスクリックをシミュレートします。ページの読み込み時にそれを表示するオプションはありません

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>