如何在外部js文件中添加yii2 datepicker小部件

时间:2015-02-25 06:06:27

标签: jquery twitter-bootstrap gridview datepicker yii2

我想使用datepickergridview中添加新行时添加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",
        ]
      ]);

现在我如何在我的外部JS文件中使用datepicker,因为bootstrap datepicker无效。

1 个答案:

答案 0 :(得分:1)

设置:

$('#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'); 
    }
});