Bootstrap Datetimepicker 不在文本字段中显示日期答案

【问题标题】：Bootstrap Datetimepicker not displaying date in the text fieldBootstrap Datetimepicker 不在文本字段中显示日期
【发布时间】：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 传递的字段内的日期。

标签： javascript jquery asp.net asp.net-mvc twitter-bootstrap

【解决方案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！）