Angular4中mydaterangepicker绑定输入框并点击输入框唤起日历

针对你在Angular4项目中使用mydaterangepicker遇到的两个问题（点击输入框无法唤起日历、父表单要求结束日期大于开始日期），我整理了具体的解决步骤：

1. 实现点击输入框唤起日历选择器 #

这个组件默认确实没有提供直接开启「点击输入框唤起日历」的配置项，但我们可以通过手动绑定点击事件来实现，利用你已经引入的jQuery操作DOM即可：

修改组件代码 #

在你的form-schedule组件中，补充ngAfterViewInit生命周期钩子，绑定输入框的点击事件：

import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { IMyDrpOptions } from 'mydaterangepicker';
declare let jQuery: any;

@Component({
  selector: "form-schedule",
  templateUrl: "./form-schedule.component.html",
  styleUrls: ["./form-schedule.component.css"]
})
export class FormScheduleComponent implements OnInit, AfterViewInit { 
  myDateRangePickerOptions: IMyDrpOptions = {
    dateFormat: 'yyyy-mm-dd',
    sunHighlight: false,
    showClearDateRangeBtn: false,
    editableDateRangeField: false
  };

  scheduleModel: any;

  ngOnInit() {
    // 你的初始化逻辑
  }

  ngAfterViewInit() {
    // 绑定输入框点击事件，触发日历按钮的点击动作
    jQuery('input[name="daterange"]').on('click', () => {
      // 找到日历触发按钮并模拟点击
      jQuery('.my-date-range-picker-btn').click();
    });
  }

  onDateRangeChanged($event: any) {
    // 后续添加校验逻辑
  }
}

说明 #

• 我们在视图初始化完成后（ngAfterViewInit），通过jQuery选中你设置了name="daterange"的输入框，绑定点击事件。
• 点击输入框时，自动触发日历组件的触发按钮（类名为my-date-range-picker-btn）的点击事件，从而唤起日历选择器。

2. 添加结束日期大于开始日期的校验 #

在onDateRangeChanged事件回调中，我们可以对选择的日期范围进行校验，确保结束日期晚于开始日期：

完善onDateRangeChanged方法 #

onDateRangeChanged($event: any) {
  // 确保开始和结束日期都存在
  if ($event.beginDate && $event.endDate) {
    // 将组件返回的日期格式转换为Date对象（*注意：月份是从0开始的，所以要减1*）
    const startDate = new Date(
      $event.beginDate.year,
      $event.beginDate.month - 1,
      $event.beginDate.day
    );
    const endDate = new Date(
      $event.endDate.year,
      $event.endDate.month - 1,
      $event.endDate.day
    );

    // 校验结束日期是否大于开始日期
    if (endDate <= startDate) {
      // 这里可以根据你的需求处理错误，比如弹出提示、标记表单错误、重置日期等
      alert('结束日期必须大于开始日期！');
      // 重置选择的日期范围
      this.scheduleModel = null;
    } else {
      // 校验通过，执行后续逻辑
      console.log('日期范围校验通过:', $event);
    }
  }
}

说明 #

• 组件返回的$event对象中包含beginDate和endDate，分别存储年、月、日信息。
• 我们将这些信息转换为标准的Date对象后进行比较，如果结束日期不大于开始日期，就触发错误提示并重置日期。

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