Как добавить виджет yii2 datepicker во внешний файл js

Question

Я хочу добавить datepicker, пока добавляю новую строку в gridview, используя js.

Здесь я добавил новую строку:

$('.add').on("click",function() 
     { 
     var new_row="<tr id='"+id+"'>"; 
     new_row += visit_label; 
     new_row += "<td style='width:20px;'></td>"; 
     new_row += "<td style='width:20px;'></td>"; 
     new_row += "<td style='width:20px;'></td>"; 
     new_row += "<td style='width:20px;'></td>"; 
     new_row += "<td style='width:20px;'></td>"; 

     new_row += "<td style='width:40px;padding-top:10px;'>"; 
     new_row += datepicker; 
     new_row += "<button id='calendar_button' class='btn' type='button'><i class='icon-calendar'></i></button>"; 
     new_row += " <button class='btn' id='clearDates'>X</button></br>"; 
     new_row += " </td>"; 

     new_row += "<td style='width:60px;'><textarea id='comm' rows='3' style='width:90%;'></textarea></td>"; 
     new_row += "</tr>"; 
     $(this).closest('tr').after(new_row); 
     }); 

Я хочу использовать datepicker widget там так же, как я использовал в gridview.

echo DatePicker::widget([ 
     'name' => 'datepicker', 
     'value' => date('Mon DD YYYY'), 
     'options' => ['placeholder' => ''], 
     'clientOptions' => [ 
      'dateFormat' => 'Mon DD YYYY', 
      'todayHighlight' => true, 
      'autoSize'=>true, 
      'showOn'=> "button", 
     ] 
     ]); 

Теперь, как я могу использовать datepicker в моем внешнем файле JS, как мой bootstrap datepicker не работает.

Answer 1

Set:

$('#calendar_button').datepicker({ 
    format: 'mm/dd/yyyy', 
    startDate: '-3d' 
}) 

В коде:

$('.add').on("click",function() 
      { 
      var new_row="<tr id='"+id+"'>"; 
      new_row += visit_label; 
      new_row += "<td style='width:20px;'></td>"; 
      new_row += "<td style='width:20px;'></td>"; 
      new_row += "<td style='width:20px;'></td>"; 
      new_row += "<td style='width:20px;'></td>"; 
      new_row += "<td style='width:20px;'></td>"; 

      new_row += "<td style='width:40px;padding-top:10px;'>"; 

      new_row += "<button id='calendar_button' class='btn' type='button'><i class='icon-calendar'></i></button>"; 
      new_row += " <button class='btn' id='clearDates'>X</button></br>"; 
      new_row += " </td>"; 

      new_row += "<td style='width:60px;'><textarea id='comm' rows='3' style='width:90%;'></textarea></td>"; 
      new_row += "</tr>"; 
      $(this).closest('tr').after(new_row); 
      $('#calendar_button').datepicker({ 
       format: 'mm/dd/yyyy', 
       startDate: '-3d' 
      }) 
      }); 

EDIT.

Для использования значение приобретают так:

$("#calendar_button").datepicker(
{ 
    onSelect: function() 
    { 
     var dateObject = $(this).datepicker('getDate'); 
    } 
});