如何自定义Bootstrap 3 Datepicker仅显示日期（隐藏时间戳）

Got it, let's get this sorted! To hide the time-related sections you mentioned and make the picker only display dates (matching your backend's needs), you just need to adjust two key configuration options in the datetimepicker initialization.

Step-by-Step Fix #

Here's the modified version of your code with the necessary changes:

<div class="container">
  <div class="col-sm-6" style="height:130px;">
    <div class="form-group">
      <div class='input-group date' id='datetimepicker9'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-calendar"> </span>
        </span>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker9').datetimepicker({
        timePicker: false, // Disables all time-related UI elements
        format: 'YYYY-MM-DD' // Sets the date format to match your backend needs
      });
    });
  </script>
</div>

What Each Option Does #

• timePicker: false: This is the key setting that hides all time picker components (the hours/minutes/seconds sections you want to remove). It completely disables time selection functionality.
• format: 'YYYY-MM-DD': This defines the date format that appears in the input field. You can adjust this to match whatever format your backend expects—common examples include:
  • 'MM/DD/YYYY' (US-style)
  • 'DD/MM/YYYY' (EU-style)
  • 'L' (uses the locale's default long date format)

Additional Notes #

• Make sure you've properly included the plugin's CSS and JavaScript files (including Moment.js, since this datepicker relies on it) in your project—missing dependencies can cause configuration options to not work as expected.
• If you need to localize the datepicker (e.g., show month/day names in your language), you can add the locale option with the appropriate language code (e.g., locale: 'fr' for French).

内容的提问来源于stack exchange，提问作者Mr world wide