は、私は以下の2 datetimepickersのデフォルトの時間を設定したいのですが、ブートストラップ日時

Question

$(function() { 
 
    $('.date').datetimepicker({ 
 
    format: 'YYYY-MM-DD HH:mm:ss' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class="container panel"> 
 
<div class="container panel-heading"><h1> 
 
</h1>Choose time</div> 
 
</div> 
 
    <div class="container panel-body"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
     <div class="form-group"> 
 
      <label>Start time</label> 
 
      <div class='input-group date' id='datetimepicker1'> 
 

 
      <input type='text' class="form-control" /> 
 
      <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label>End time</label> 
 
      <div class='input-group date' id='datetimepicker2'> 
 

 
      <input type='text' class="form-control" /> 
 
      <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

にフィールドのデフォルトの時間を設定します。最初の（開始時刻）は、特に明記しない限り（ユーザーによって）00:00:01でなければなりません。第2の（終了時刻）は、別途指定されない限り（ユーザーによって）23:59:59でなければなりません。

datetimepickerはデフォルトの日付オプションを提供しているようだが、ないデフォルトの時間オプション。

Answer 1

DateオブジェクトをdefaultDateパラメータに渡すことができます。

var now = new Date(); 
 
var def1 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 1); 
 
var def2 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59); 
 

 
$(function() { 
 
    $('.date:eq(0)').datetimepicker({ 
 
    defaultDate: def1, 
 
    format: 'YYYY-MM-DD HH:mm:ss' 
 
    }); 
 
    $('.date:eq(1)').datetimepicker({ 
 
    defaultDate: def2, 
 
    format: 'YYYY-MM-DD HH:mm:ss' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 

 
<div class="container panel"> 
 
    <div class="container panel-heading"> 
 
    <h1> 
 
</h1>Choose time</div> 
 
</div> 
 
<div class="container panel-body"> 
 
    <div class="row"> 
 
    <div class='col-sm-6'> 
 
     <div class="form-group"> 
 
     <label>Start time</label> 
 
     <div class='input-group date' id='datetimepicker1'> 
 

 
      <input type='text' class="form-control" /> 
 
      <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label>End time</label> 
 
     <div class='input-group date' id='datetimepicker2'> 
 

 
      <input type='text' class="form-control" /> 
 
      <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
      </span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>