Bootstrap Datetimepicker not displaying date in the text field

Question

Developing on ASP.net mvc 5, Bootstrap v3.3.7

In a Form I've a 'Date Of Calibration' field. I'm able to load bootstrap datetimepicker on this field on my Developing & Test machine. It's working fine there, but on the Live server the TextBoxFor date field doesn't show date inside it when the page loads. Once I click the textbox, datetimepicker appear and then the date gets rendered inside it.

I've also confirmed ViewModel does contain the date value when page is being loaded. It's just not getting rendered while page loads, and it only doing it on the production environment.

Any idea what could possibly be the reason

I'm loading Form inside a partial view in BootstrapModal.

 @Html.TextBoxFor(model => model.date_of_calibration, new { id = "date_of_calibration", @class = "form-control" })

Loading datetimepicker as.

$(document).ready(function () {
   $("#date_of_calibration").datepicker({ format: 'DD-MM-YYYY'});}

Also loaded the following scripts inside the my partial view

<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" />

Update

So before I was loading the field in the model as model.date_of_calibration = DateTime.Now; changed it to = DateTime.Now.Date; which uses only the date component of DateTime Instance.

Now the date does show up in the field when the page loads. but its doing it wrong. Interchanging "Date & Month". i.e If the database record has 2017-12-05 00:00:00.000 (i.e. 5th Dec), it show 12-05-2017 (i.e. 12th of May) instead of 05-12-2017.

Now again it's only happening on the live environment.

No, I added jquery.js in the RegisterBundles() function in BundleConfig.cs — AlphaTry
What errors are you getting in the browser console? (and as a side note, you do not need new { id = "date_of_calibration" } - the TextBoxFor() has already added that attribute) — user3559349
Does your server has the same regional settings of your local environment? What's your default date? Today? Do you have console errors? Any exception log? — JCM
@StephenMuecke I'm not getting any error at all. The datetimepicker does load the calendar once clicked, It's just not showing the date inside the field that been passed by the ViewModel. — AlphaTry

MD.ALIMUL Alrazy MD.ALIMUL Alrazy · Accepted Answer · 2017-12-04T16:59:01

please try this code on your own html file

<!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>

Bootstrap Datetimepicker not displaying date in the text field

1 Answers