BootStrap DatePicker 日历输入更改不更新日历
Posted
技术标签:
【中文标题】BootStrap DatePicker 日历输入更改不更新日历【英文标题】：BootStrap DatePicker Calendar Input Change Not Updating Calendar 【发布时间】：2020-09-16 15:58:43 【问题描述】：我有一个带有使用 bootstrap-datepicker 创建的附加日期选择器的输入元素。 当用户通过直接在输入元素中输入更改日期，然后单击日历图标时，更改的日期不会反映在日历中
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="input-append date" id="calendar_toDate" data-date="12/31/2999" data-date-format="mm/dd/yyyy"><input type="Text" id="toDate" name="toDate" enabled="" onblur="javascript:checkDate(this, '', 'R');" value="12/31/2999" size="10" maxlength="10" class="input input-small" data-req="Y" aria-required="true" data-type="d">
<span class="add-on" title="Date Picker"><i class="icon icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(function()
window.prettyPrint && prettyPrint();
$('#calendar_toDate').datepicker();
);
function calenderDataChange()
javascript:dataChangeCheckRoleDate();
$('#calendar_toDate').datepicker(
format : 'mm/dd/yyyy',
startDate:'01/01/1900',
endDate:'12/31/2999',
autoClose:true ,
orientation:'auto right'
).on('changeDate',function(ev)
$(this).datepicker('hide');
);
</script>
<span class="required"></span>
</div>
【问题讨论】：
【参考方案1】：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function()
$("#datepicker").datepicker();
);
</script>
<title>Document</title>
</head>
<body>
<div class="col-lg-6 col-md-6 col-sm-6">
<p>Date: <input type="text" id="datepicker"></p>
</div>
</body>
</html>【讨论】：
我有一个框架限制，我发布的代码sn-p是由框架本身创建的，我无法改变很多，也许我可以在其中添加一些JS函数。有没有办法，我可以用当前的设置让它工作？以上是关于BootStrap DatePicker 日历输入更改不更新日历的主要内容，如果未能解决你的问题，请参考以下文章
如何将 jQuery UI DatePicker 图标触发器与 Bootstrap 3 的输入组结合使用
Bootstrap DatePicker setDate 方法不更新日历
Bootstrap datepicker 2.0 在月视图中显示日历