如何让ngx-material-timepicker直接显示在输入框正下方而非弹窗？

实现方法 #

你可以通过开启ngx-material-timepicker的内联渲染模式，配合定位样式实现输入框下方常驻显示的效果，无需弹窗也不会占满全屏。

基础常显版本代码

<div style="position: relative; display: inline-block;">
  <input [ngxTimepicker]="picker" >
  <ngx-material-timepicker #picker 
    [mode]="'inline'"
    [disableClick]="true"
    [isOpen]="true">
  </ngx-material-timepicker>
</div>

配置说明

• [mode]="'inline'"：指定组件为内联渲染模式，不会生成全屏弹窗容器
• [disableClick]="true"：禁用输入框默认的弹窗开关逻辑
• [isOpen]="true"：默认保持选择器展开状态

样式调整（可选）

你可以添加自定义样式调整选择器的位置和尺寸：

ngx-material-timepicker {
  position: absolute;
  /* 距离输入框底部8px */
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  /* 自定义宽度，避免占满全屏 */
  width: 320px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

点击输入框切换显隐版本（可选）

如果不需要选择器默认常显，想要点击输入框才展开，可通过变量控制显隐状态：

1. TS逻辑：

// 组件类中添加变量和方法
timepickerVisible = false;

toggleTimepicker() {
  this.timepickerVisible = !this.timepickerVisible;
}

2. 模板代码：

<div style="position: relative; display: inline-block;">
  <input [ngxTimepicker]="picker" (click)="toggleTimepicker()">
  <ngx-material-timepicker #picker 
    [mode]="'inline'"
    [disableClick]="true"
    [isOpen]="timepickerVisible">
  </ngx-material-timepicker>
</div>

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