弹出框中的引导日期选择器在触发事件显示时清除其他输入
Bootstrap datepicker in popover clear other inputs when event show fired
我在弹出窗口中有一个表单,在这个表单中,我有日期选择器引导程序的输入。我在输入之前使用日期选择器填充所有输入,但是当我打开日期选择器时,所有输入都会清除。谁能帮忙?
$('.datepicker').datepicker({
format: 'dd.mm.yyyy',
language: 'ru',
autoclose: true
});
<div class="modal fade" id="taskform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Создать задачу</h4>
</div>
@using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post, new { id = "task_form" }))
{
<div class="modal-body">
<div class="form-group">
@Html.HiddenFor(m => m.CampaignId)
@Html.HiddenFor(m => m.AuthorId)
@Html.LabelFor(x => x.Title)
@Html.TextBoxFor(x => x.Title, new { @class = "form-control form-input" })
</div>
<div class="form-group">
<br />
@Html.LabelFor(x => x.Description)
@Html.TextAreaFor(x => x.Description, new { @class = "ckeditor form-control form-input", rows = "3" })
<br />
</div>
<div class="form-group">
@Html.LabelFor(x => x.DeadLine)
@Html.TextBoxFor(x => x.DeadLine, new { @class = "form-control form-input datepicker", placeholder = "Дедлайн" })
<br />
</div>
</div>
<div class="modal-footer" style="text-align: left;">
<button type="button" id="task-submit" class="btn btn-primary" style="float: right;">Создать</button>
@Html.DropDownListFor(m => m.Performers, Model.AllPerformers.Select(item => new SelectListItem()
{
Text = item.FullName,
Value = Convert.ToString(item.Id)
}), new { @class = "form-control select2 ", style = "", multiple = "multiple", placeholder = "Добавьте исполнителей" })
</div>
}
</div>
</div>
</div>
如果有人仍然需要它:
使用显示和隐藏事件而不是显示和隐藏并不总是可行的。更好的解决方法是检查事件命名空间:
modal.on('show.bs.modal', function(e) {
if (e.namespace === 'bs.modal') {
//
}
});
从 https://github.com/uxsolutions/bootstrap-datepicker/issues/978
试试这段代码
$("#my-datepicker").datepicker().on('show.bs.modal', function(event) {
// prevent datepicker from firing bootstrap modal "show.bs.modal"
event.stopPropagation();
});
我尝试复制您的问题,但是单击日期选择器时,我的表单没有清除其他输入。
视图:
<button type="button" class="btn btn-primary" id="btnAdd" data-target="#modalTaskForm" aria-label="Left Align">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Task
</button>
<!-- Add Modal -->
<div id="modalTaskForm" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Task Form</h4>
</div>
<div class="modal-body">
@using (Html.BeginForm("PopOver","Home", FormMethod.Post, new { id = "task_form" }))
{
<div class="modal-body">
<div class="form-group">
@Html.HiddenFor(m => m.CampaignId)
@Html.HiddenFor(m => m.AuthorId)
@Html.LabelFor(x => x.Title)
@Html.TextBoxFor(x => x.Title, new { @class = "form-control form-input" })
</div>
<div class="form-group">
<br />
@Html.LabelFor(x => x.Description)
@Html.TextAreaFor(x => x.Description, new { @class = "ckeditor form-control form-input", rows = "3" })
<br />
</div>
<div class="form-group">
@Html.LabelFor(x => x.DeadLine)
@Html.TextBoxFor(x => x.DeadLine, new { @class = "form-control form-input datepicker", placeholder = "Дедлайн" })
<br />
</div>
</div>
<div class="modal-footer" style="text-align: left;">
<button type="button" id="task-submit" class="btn btn-primary" style="float: right;">Создать</button>
</div>
}
</div>
</div>
</div>
</div>
<!-- /.modal -->
脚本:
<script>
$(document).ready(function () {
$('.datepicker').datepicker({
format: 'dd.mm.yyyy',
language: 'ru',
autoclose: true
});
});
$(document).on('click', '#btnAdd', function () {
$("#modalTaskForm").modal();
});
</script>
相关文章:
- php代码在textbox更改事件上显示null
- gmap3如何做到这一点-它显示圆圈的任何事件
- 错误事件显示图片 - JavaScript
- 通过单击事件显示部分
- 如何将 Cookie 与点击事件显示的内容一起使用?(HTML/CSS/jQuery)
- onchange事件显示目标元素的所有文本值,原因
- 点击使用WebDriver的链接上的事件显示“;javascript:void(0)"状态栏上
- 如何获得类似id的"invokedOn”;使用Bootstrap ContextMenu通过右键单击事件显示文
- jQuery点击事件显示JSON数组中工作不正常的特定数据
- 奇怪的鼠标事件显示:flex和svg
- 鼠标悬停事件显示:none(隐藏)元素(chrome&opera)
- 使用滚动事件显示基于窗口高度的元素
- 是否可以用ajax事件显示php内容?
- ReceiveMessage事件显示数据未定义
- HTML5服务器端事件-显示
- FireFox不会为window beforeunload事件显示任何警告对话框
- asp.net Ajax提交事件显示从控制器返回的json结果,而不是警报
- 如何根据事件显示此选项卡内容
- 使用单击事件显示菜单,但不使用Knockout和Jquery处理新代码
- 弹出框中的引导日期选择器在触发事件显示时清除其他输入