如何在外部 js 文件中添加 yii2 datepicker 小部件
How to add yii2 datepicker widget in external js file
我想添加一个 datepicker
,同时我使用 js
在 gridview
中添加一个新行。
我在这里添加了一个新行:
$('.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
不工作。
设置:
$('#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'
})
});
编辑。
像这样获取价值:
$("#calendar_button").datepicker(
{
onSelect: function()
{
var dateObject = $(this).datepicker('getDate');
}
});
我想添加一个 datepicker
,同时我使用 js
在 gridview
中添加一个新行。
我在这里添加了一个新行:
$('.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
不工作。
设置:
$('#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'
})
});
编辑。
像这样获取价值:
$("#calendar_button").datepicker(
{
onSelect: function()
{
var dateObject = $(this).datepicker('getDate');
}
});