Angular mydatepicker如何实现视图与组件层日期格式差异化展示

现有代码参考 #

原有模板代码 #

<div  class="input-group ">
<input class="form-control" readonly placeholder="Selecione uma data"  id="inputData" angular-mydatepicker name="datepicker"
formControlName="data" [options]="myOptions"  [locale]="locale" (click)="dp.toggleCalendar()" #dp="angular-mydatepicker"/>
  <div class="input-group-append">
    <button type="button" class="btn btn-secondary" (click)="dp.toggleCalendar()" >
      <i class="fa fa-calendar" aria-hidden="true" ></i>
    </button>
  </div>
</div>

注：原模板中formControlName="data"和[options]之间缺少空格，已经在上述代码中修正，避免模板解析报错。

组件默认返回值结构 #

{
     "isRange":false,
     "singleDate":{
         "date":{ 
              "year":2022,
              "month":6, 
              "day":14 
         },
        "jsDate":"2022-06-14T03:00:00.000Z", 
        "formatted": "14/06/2022", 
        "epoc":1655175600
     },
     "dateRange":null
}

具体实现步骤 #

完全可以实现视图、逻辑层格式分离，不需要修改组件源码，分两步配置即可：

• 第一步：配置组件选项控制视图展示格式
  在组件类的myOptions配置项中，明确指定dateFormat为dd/mm/yyyy，这个配置只控制输入框中用户可见的日期展示格式，不会改变组件返回的原始值结构：

import { IAngularMyDpOptions } from 'angular-mydatepicker';

// 组件内的配置
myOptions: IAngularMyDpOptions = {
  dateFormat: 'dd/mm/yyyy', // 视图层固定展示日/月/年格式
  // 其余原有业务配置保持不变即可
};

配置完成后，输入框、日历面板展示的日期就会是要求的dd/mm/yyyy格式，和用户交互的表现完全符合预期。

• 第二步：逻辑层单独转换获取yyyy-mm-dd格式值
  不要修改组件本身的返回值，在需要拿日期做逻辑处理（比如接口请求、业务计算）的时候，基于组件返回的jsDate字段做格式转换即可，避免手动拼接年月日出现的时区、前导0缺失问题：

/**
 * 从日期选择器返回值中提取yyyy-mm-dd格式日期
 * @param pickerVal 日期选择器的form值
 */
extractYmdDate(pickerVal: any): string {
  if (!pickerVal?.singleDate?.jsDate) {
    return '';
  }
  const date = new Date(pickerVal.singleDate.jsDate);
  const year = date.getFullYear();
  // 月份、日期不足两位时自动补前导0
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

使用方式也很简单，比如表单提交时：

onSubmit() {
  const formVal = this.form.getRawValue();
  // 逻辑层使用的yyyy-mm-dd格式日期
  const logicDate = this.extractYmdDate(formVal.data);
  // 后续业务逻辑直接用logicDate即可
}

这种实现方式耦合度最低，不会因为组件升级出现兼容问题，也完全满足两层格式不一致的需求。

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