nz-time-picker中的input设置为只读

要将 `nz-time-picker` 中的 `input` 设置为只读，可以使用 `readonly` 属性。可以在 `nz-time-picker` 的 `input` 标签中添加 `readonly` 属性，如下所示：

<nz-time-picker [nzFormat]="'HH:mm'" [nzHourStep]="1" [nzMinuteStep]="1">
  <input nzTimePicker nzReadOnly [ngModel]="selectedTime">
</nz-time-picker>

其中，`nzReadOnly` 是一个自定义指令，用于设置 `input` 元素为只读状态。在组件中可以这样定义：

import { Directive, HostBinding } from '@angular/core';

@Directive({
  selector: '[nzReadOnly]'
})
export class NzReadOnlyDirective {
  @HostBinding('readonly') readonly = true;
}

这样就可以将 `nz-time-picker` 中的 `input` 设置为只读了。

相关问题

如何使用nz-time-picker

首先，您需要确保您的 Angular 项目中已经安装了 Ant Design of Angular。如果还没有安装，请按照官方文档中提供的步骤进行安装。

要使用 nz-time-picker，您需要在组件中导入 NzTimePickerModule，然后在 HTML 模板中使用 nz-time-picker 标签。例如：

在组件中导入 NzTimePickerModule：

import { NgModule } from '@angular/core';
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';

@NgModule({
  imports: [NzTimePickerModule],
  exports: [NzTimePickerModule]
})
export class MyModule { }

在 HTML 模板中使用 nz-time-picker：

<nz-time-picker [(ngModel)]="selectedTime"></nz-time-picker>

在上面的示例中，我们使用 [(ngModel)] 双向绑定指令将 nz-time-picker 组件的值绑定到组件类中的 selectedTime 属性。

当用户选择时间后，selectedTime 属性将自动更新，您可以在组件类中使用它来执行其他操作。

注意，您还可以使用其他指令和属性来自定义 nz-time-picker 的行为和外观。有关更多信息，请参阅官方文档。

el-time-picker range input的宽度设置

可以通过设置 el-time-picker 的 width 属性来控制其宽度，也可以通过 CSS 样式来控制其宽度，例如：

1. 设置 el-time-picker 的 width 属性：

<el-time-picker v-model="time" width="200px"></el-time-picker>

2. 使用 CSS 样式来控制其宽度：

<el-time-picker v-model="time" class="time-picker"></el-time-picker>

<style>
.time-picker .el-time-range-picker__content {
  width: 200px;
}
</style>