bootstrap-datetimepicker实现只显示到日期的方法

Bootstrap-datetimepicker实现只显示日期的方法

Bootstrap-datetimepicker是一款基于Bootstrap框架、JQuery组件和moment.js时间处理库的日期和时间选择器插件。该插件可以非常方便的在网页中实现日期和时间的选择。默认情况下，Bootstrap-datetimepicker会显示日期和时间，但是有些时候我们只需要日期，不需要时间。本文将详细讲解如何实现Bootstrap-datetimepicker只显示日期的方法。

1. 引入依赖

首先，我们需要在html文件中引入必要的依赖，包括Bootstrap、JQuery、moment.js和Bootstrap-datetimepicker。可以使用CDN或者本地文件，具体代码如下：

<!-- 样式依赖 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<!-- js依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

2. 初始化设置

接着，在html文件中创建一个日期选择器input框，并且对其进行初始化设置。将其input框的value属性设为空，设置format属性为YYYY-MM-DD，将autoclose属性设置为true（用户选择日期后，自动关闭日期选择器），其他参数根据需求进行配置。具体代码如下：

<div class="container">
  <div class="form-group">
    <label>选择日期：</label>
    <input type="text" class="form-control datetimepicker" value="" data-date-format="YYYY-MM-DD" data-date-autoclose="true">
  </div>
</div>

<script type="text/javascript">
$(function () {
    $('.datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD',
        autoclose: true,
        //其他参数按需添加
    });
});
</script>

此时，我们已经可以看到一个日期选择器，并且默认显示了日期和时间。

3. 隐藏时间选择器

接下来，我们需要通过CSS样式将Bootstrap-datetimepicker的时间选择器隐藏。可以使用display:none，或者将其父级元素的高度设置为0。具体代码如下：

<style type="text/css">
.datetimepicker table > tbody > tr > td.hour,
.datetimepicker table > tbody > tr > td.minute,
.datetimepicker table > tbody > tr > td.second {
    visibility: hidden !important;
    height: 0px !important;
    width: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    display:none !important;
}
</style>

现在，Bootstrap-datetimepicker已经只显示日期了。

示例1：禁用时间选择器

有些场景下，为了更加清晰直观，我们需要将时间选择器完全禁用，这时可以在初始化设置中将timepicker属性设置为false。

<input type="text" class="form-control datetimepicker" value="" data-date-format="YYYY-MM-DD" data-date-autoclose="true" data-date-timepicker="false">

示例2：仅显示AM/PM时间格式

还有一些场景下，我们不需要显示具体时间，只需要显示AM/PM时间格式即可。可以在初始化设置中将format属性设置为hh:mm A，同时将minView属性设置为0（表示只显示小时和分钟）。

<input type="text" class="form-control datetimepicker" value="" data-date-format="YYYY-MM-DD hh:mm A" data-date-autoclose="true" data-date-min-view="0">

结论

本文详细讲解了如何利用Bootstrap-datetimepicker实现只显示日期的方法。同时，还提供了常见需求的两个示例，读者可以根据自己的需求进行配置。