如何用Primeng p-calendar范围模式实现仅选择结束日期？

问题背景 #

当前开发日期筛选功能，想用单个p-calendar组件的范围模式替代两个日期输入框。根据Primeng文档，范围模式支持点击两个日期选择范围（允许同一天），当前使用的代码如下：

<p-calendar [(ngModel)]="rangeDates" selectionMode="range" [readonlyInput]="true"></p-calendar>

目前仅能实现选择开始日期（点击一个日期后点击日历弹窗外部），但无法直接实现仅选择结束日期（让开始日期为空），这个需求用于向数据表筛选方法传递参数，查询所有早于该结束日期的记录。想确认仅通过Primeng原生组件是否可以实现该功能（已知可通过自定义组件实现）。

原生组件实现方案 #

Primeng原生p-calendar的范围模式默认不支持直接只选结束日期，但可以通过以下两种方式适配实现：

1. 监听选择事件手动重置日期数组 #

通过监听onSelect事件，在用户选择第一个日期后，手动将日期数组的开始项设为null，保留选中的日期作为结束日期。如果需要区分“正常范围选择”和“仅结束日期选择”，可以新增一个切换开关来控制逻辑。

代码示例：

<p-calendar 
  [(ngModel)]="rangeDates" 
  selectionMode="range" 
  [readonlyInput]="true" 
  (onSelect)="handleDateSelect()">
</p-calendar>
<!-- 可选：添加切换开关控制仅结束日期模式 -->
<p-checkbox [(ngModel)]="onlyEndDateMode" label="仅筛选截止日期"></p-checkbox>

rangeDates: Date[] = [];
onlyEndDateMode = false;

handleDateSelect() {
  if (this.onlyEndDateMode && this.rangeDates.length === 1) {
    // 切换到仅结束日期模式时，将开始日期设为null
    this.rangeDates = [null, this.rangeDates[0]];
  }
}

2. 取消输入框只读，允许手动编辑 #

将[readonlyInput]设为false，让用户可以手动删除输入框中的开始日期部分，只保留结束日期。需要确保日期格式配置正确，避免输入错误。

代码示例：

<p-calendar 
  [(ngModel)]="rangeDates" 
  selectionMode="range" 
  [readonlyInput]="false"
  dateFormat="yy-mm-dd">
</p-calendar>

用户可以直接在输入框中删除开始日期的内容，最终输入框会显示类似, 2024-05-20的格式，对应rangeDates为[null, Date对象]，可直接传递给筛选方法。

总结 #

以上两种方式均基于Primeng原生组件实现，无需自定义组件即可满足仅选择结束日期的筛选需求。如果需要更流畅的交互体验，可结合切换开关优化逻辑。

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