如何解决模态中日期选择器的问题
我在使用 modal (bootstrap3) 中的 datepicker 时遇到问题。在我的模态的“显示”事件中,我创建了一个日期选择器的实例并定义了一个初始值,但在此定义之后我无法更改此值。我相信有一些与此相关的内容:https://github.com/uxsolutions/bootstrap-datepicker/issues/978
作为一种解决方法,他们要求我使用显示而不是显示事件。
问题是我的“shown”事件不方便,因为我的字段在屏幕上已经加载字段后会明显加载数据(就像字段闪烁一样)。
$('#modal_activity').modal('show');
let modal_activity = $("#modal_activity");
$('#activity_start_date').datepicker({
format: "DD,dd - MM - yyyy",language: "pt-BR"
});
$('#activity_end_date').datepicker({
format: "DD,language: "pt-BR"
});
modal_activity.on('show.bs.modal',function () {
startStr = "2020-12-03"
endStr = "2020-12-04"
$('#activity_start_date').datepicker('setDate',moment(startStr,'YYYY-MM-DD').format('DD - MM - YYYY'));
$('#activity_end_date').datepicker('setDate',moment(endStr,'YYYY-MM-DD').subtract(1,"days").format('DD - MM - YYYY'));});
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Ícones -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--datapicker-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<!-- moment js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/pt-br.min.js" integrity="sha512-1IpxmBdyZx3okPiZ14mzw6+pOGa690uDmcdjqvT310Kwv3NRcjvL/aOtoSprEyvkDdAb7ZtM2um6KrLqLOY97w==" crossorigin="anonymous"></script>
<div id="modal_activity" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<input type="text" class="form-control" id="activity_start_date" placeholder="data inicial" required="">
<input type="text" class="form-control" id="activity_end_date" placeholder="data final" required="">
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。