如何设置angular-mydatepicker控件在日期值未定义时显示占位符

解决方案 #

步骤1：调整日期控件配置，添加占位符属性 #

在你的myDatePickerOptions配置中新增placeholder字段，设置你想要展示的占位符文本：

public myDatePickerOptions: IMyDpOptions = {
  todayBtnTxt: 'Today',
  dateFormat: 'mm/dd/yyyy',
  firstDayOfWeek: 'su',
  sunHighlight: true,
  satHighlight: true,
  inline: false,
  height: '25px',
  placeholder: '请选择日期' // 新增这行，可自定义占位符内容
};

步骤2：修改空日期的返回值 #

当日期为undefined时，不要返回{date: {year:0, month:0, day:0}}，直接返回null即可，修改threePartDateFromDate方法：

threePartDateFromDate(d_: string): any {
  // 空值直接返回null触发占位符
  if(!d_) {
    console.log('日期为空');
    return null;
  }
  const date_ = new Date(d_);
  return {
    date: {
      year: date_.getFullYear(),
      month: date_.getMonth()+1,
      day: date_.getDate()
    }
  }
}

补充说明 #

• 该控件仅在绑定值为null时才会触发占位符展示，传入undefined、非法日期对象都会被识别为错误值，展示NaN或者0值
• 确认模板中的日期控件绑定使用的是响应式表单的formControlName，没有额外的[value]属性赋值覆盖表单值

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