【发布时间】：2021-01-04 23:59:06
【问题描述】：
我的表单中有一个准备好的日期选择器输入，我将其设置为隐藏。它将显示为单选按钮更改。我还默认设置了.input-datepicker 焦点，以便在单击输入按钮时仍然可以打开日期选择器。
这里的问题是，当我想在SET BY DAY 收音机处于活动状态时提交表单，并且所有datepicker 输入设置为隐藏时，我的表单会抛出如下错误：
name='start_date[]' 的无效表单控件不可聚焦。
如何仅在显示日期选择器输入时对其进行聚焦？
function toggleDutySetting(type){
if(type === 'day'){
$('#show_date').hide();
$('#working_hours_append').html('');
$('.add-working-days').parent().hide();
} else if(type === 'date'){
$('#show_date').show();
$('.add-working-days').parent().show();
}
}
function addWorkingHours(){
$('#working_hours_append').append(`
<div class="input-group date input-datepicker" style="margin-top: 15px;">
<input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>
`);
}
$(document).ready(function(){
$('body').on('focus',".input-datepicker ", function(){
$(this).datepicker({ format: 'dd-mm-yyyy' });
})
})<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha512-G9dfCJFG3y/Xq8mbbqb5i3FQNVaGl0Fkkw+VPVT3L00gA4k7hyjSGNpAxykwgDw1cfJFlj5tO3XePa+ezjDQyQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
</head>
<body>
<div class="form-group">
<label class="radio-inline">
<input type="radio" onchange="toggleDutySetting('day')" name="type" value="day" checked>SET BY DAY
</label>
<label class="radio-inline">
<input type="radio" onchange="toggleDutySetting('date')" name="type" value="rotation">SET BY ROTATION
</label>
</div>
<div class="form-group">
<div class="checkbox marginless-top">
<label><input name="weekday[]" type="checkbox" value="MONDAY">Monday</label>
</div>
<div class="checkbox marginless-top">
<label><input name="weekday[]" type="checkbox" value="TUESDAY">Tuesday</label>
</div>
</div>
<div class="form-group" id="show_date" style="display: none;">
<div class="input-group date input-datepicker">
<input type="text" name="start_date[]" class="form-control pull-left border-radius-0" placeholder="DD-MM-YYYY" required="">
<div class="input-group-addon"><i class="fa fa-calendar"></i></div>
</div>
</div>
<div class="form-group" id="working_hours_append"></div>
<div class="text-right margin-top" style="display: none;">
<a href="javascript:;" onclick="addWorkingHours()" class="bold add-working-days"><i class="fa fa-plus"></i> WORKING DAYS</a>
</div>
</body>
</html>【问题讨论】：
-
您想
focus在所有新添加的输入日期上还是仅在单选按钮设置为 Rotation 时？并且通过焦点意味着您想在选择旋转后打开日期选择器？ -
当收音机设置为旋转时所有日期选择器的焦点，
Yes用于您的第二个问题。 -
当收音机设置为旋转时所有日期选择器的焦点 =>这没有意义。当只有
ONE时，您如何专注于所有日期选择器 - 单击工作日后添加其他日期 - 请澄清 -
基本上我想在收音机设置为旋转时调用此
$('body').on('focus',".input-datepicker ", function(){ $(this).datepicker({ format: 'dd-mm-yyyy' }); })，并在设置为天时删除此焦点。 -
我可以在调用函数
toggleDutySetting()时这样做，并且必须先删除默认输入日期选择器。当旋转处于活动状态时将其附加到它的 div 中，但一旦调用（焦点）就无法移除焦点。
标签： javascript html jquery bootstrap-datepicker