Bootstrap Datetimepicker 不在文本字段中显示日期
Posted
技术标签:
【中文标题】Bootstrap Datetimepicker 不在文本字段中显示日期【英文标题】：Bootstrap Datetimepicker not displaying date in the text field 【发布时间】：2018-05-18 02:42:54 【问题描述】：在 ASP.net mvc 5、Bootstrap v3.3.7 上开发
在表格中，我有一个“校准日期”字段。我可以在我的开发和测试机器上的这个字段上加载引导程序datetimepicker。它在那里工作正常，但在 Live 服务器上，当页面加载时，TextBoxFor 日期字段不会在其中显示日期。单击文本框后，会出现 datetimepicker，然后在其中呈现日期。
我还确认 ViewModel 确实包含页面加载时的日期值。它只是在页面加载时没有被渲染，它只在生产环境中执行。
不知道是什么原因
我在 BootstrapModal 的局部视图中加载表单。
@html.TextBoxFor(model => model.date_of_calibration, new id = "date_of_calibration", @class = "form-control" )
将datetimepicker 加载为。
$(document).ready(function ()
$("#date_of_calibration").datepicker( format: 'DD-MM-YYYY');
还在我的局部视图中加载了以下脚本
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
更新
因此，在我将模型中的字段加载为 model.date_of_calibration = DateTime.Now; 之前，将其更改为 = DateTime.Now.Date;，它仅使用 DateTime 实例的日期组件。
现在页面加载时日期会显示在字段中。但它做错了。交换“日期和月份”。即如果数据库记录有2017-12-05 00:00:00.000 (i.e. 5th Dec)，则显示12-05-2017 (i.e. 12th of May) 而不是05-12-2017。
现在它又只发生在现场环境中。
【问题讨论】：
你还没有包含jquery.min.js一个
不是，我在BundleConfig.cs的RegisterBundles()函数中添加了jquery.js
您在浏览器控制台中遇到什么错误？ （附带说明，您不需要 new id = "date_of_calibration" - TextBoxFor() 已经添加了该属性）
您的服务器是否具有与本地环境相同的区域设置？你的默认日期是什么时候？今天？你有控制台错误吗？有异常日志吗？
@StephenMuecke 我没有收到任何错误。 datetimepicker 确实会在单击后加载日历，它只是不显示 ViewModel 传递的字段内的日期。
【参考方案1】：
请在您自己的 html 文件中尝试此代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Minified JS library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Minified Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://lisenme.com/demo/date_time_pick/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="http://lisenme.com/demo/date_time_pick/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<h1>Inline Datetime Picker</h1>
<div id="datetime4"></div>
<script type="text/javascript">
$("#datetime4").datetimepicker();
</script>
<h1>Datetime Picker</h1>
<input size="16" type="text" class="form-control" id="datetime" readonly>
<script type="text/javascript">
$("#datetime").datetimepicker(
format: 'yyyy-mm-dd hh:ii'
);
</script>
<h1>Datetime Picker Auto Close</h1>
<input size="16" type="text" class="form-control" id="datetime2" readonly>
<script type="text/javascript">
$("#datetime2").datetimepicker(
format: 'yyyy-mm-dd hh:ii',
autoclose: true
);
</script>
</div>
</body>
</html>【讨论】：
这与这个问题有什么关系（完全没有关系——它甚至没有使用 mvc！）以上是关于Bootstrap Datetimepicker 不在文本字段中显示日期的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 3 datetimepicker - MinTime 和 MaxTime
大神，bootstrap-datetimepicker控件怎么精确到秒
bootstrap 4 datetimepicker如何本地化