如何禁用datetime range picker所有日期或隐藏日历并移除操作按钮前标签

你需要的两个需求都可以通过CSS配置+初始化参数调整实现，无需修改组件源码：

1. 隐藏日历组件/禁用所有日期选择 #

纯CSS隐藏日历（最简便） #

直接隐藏日历渲染区域，仅保留时间选择和按钮栏：

/* 隐藏日历主体 */
.daterangepicker .drp-calendar {
  display: none !important;
}
/* 可选：优化隐藏日历后的布局 */
.daterangepicker .drp-buttons {
  margin-top: 8px;
  border-top: none;
}

禁用所有日期可选（可选补充） #

如果需要从逻辑层面彻底禁止日期选择，初始化时添加isInvalidDate配置：

$('#your-date-input').daterangepicker({
  // 保留你原有的时间选择相关配置
  timePicker: true,
  timePicker24Hour: true,
  // 所有日期均标记为不可选
  isInvalidDate: function() {
    return true;
  }
})

2. 移除按钮前的选中范围标签 #

添加以下CSS隐藏对应标签元素即可：

.daterangepicker .drp-selected {
  display: none !important;
}

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