如何基于jQuery 3.3.1和Bootstrap 3.3.7配置仅日期选择器并设输入框只读？

没问题，这两个需求都能通过调整bootstrap-datetimepicker的配置和HTML属性快速实现，我给你整理了修改后的完整代码和细节说明：

核心修改点说明 #

• 设置输入框为只读：直接在<input>标签中添加readonly属性，彻底禁止用户手动输入内容，只能通过日历选择器操作。
• 仅启用日期选择（隐藏时间）：通过bootstrap-datetimepicker的配置项指定日期格式、限制视图层级，同时绑定日历图标的点击事件触发选择器弹出。

修改后的完整代码 #

HTML部分 #

<!---*** Start: JQuery 3.3.1 version. ***--->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---*** End: JQuery 3.3.1 version. ***--->
<!---*** Start: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!---*** End: Bootstrap 3.3.7 version files. ***--->
<script language="javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<div class="form-group required">
  <div class="input-group">
    <!-- 添加readonly属性，禁止手动输入 -->
    <input type="text" class="form-control datepick" name="frmSaveOffice_startdt" id="frmSaveOffice_startdt" required readonly>
    <div class="input-group-addon datepicker-trigger">
      <span class="glyphicon glyphicon-calendar"></span>
    </div>
  </div>
</div>

JavaScript部分 #

$(document).ready(function() {
  $('.datepick').datetimepicker({
    // 指定日期格式，仅显示年月日
    format: 'YYYY-MM-DD',
    // 限制视图层级为日期（不显示时间选择面板）
    minView: 2,
    // 可选：设置默认打开的视图为日期
    startView: 2
  });

  // 绑定日历图标点击事件，触发日期选择器弹出
  $('.datepicker-trigger').on('click', function() {
    $(this).closest('.input-group').find('.datepick').datetimepicker('show');
  });
});

关键配置解释 #

1. readonly属性：添加到input标签后，输入框会变成只读状态，用户无法直接输入任何内容，只能通过选择器选择日期。
2. format: 'YYYY-MM-DD'：定义日期选择器的输出格式，这里是年-月-日，你可以根据需求改成MM/DD/YYYY等其他格式。
3. minView: 2：bootstrap-datetimepicker的视图层级中，0代表分钟、1代表小时、2代表日期，设置为2后，选择器只会显示日期选择面板，不会出现时间选择的部分。
4. 图标点击触发：通过监听日历图标的点击事件，调用datetimepicker('show')方法弹出选择器，确保用户点击图标就能打开日历。

这样修改后，你的日期选择器就完全符合需求了：输入框无法手动编辑，只能通过点击日历图标选择纯日期~

内容的提问来源于stack exchange，提问作者espresso_coffee