AngularJS中如何在input标签中使用自定义JSON日期转换过滤器？

首先得明确核心原因：AngularJS的ng-model不支持直接在绑定表达式里使用过滤器，这就是你在input里用mydate过滤器报错的关键。

为什么插值表达式里能用？因为{{}}插值是单向数据绑定——只需要把模型里的JSON日期转成视图能显示的格式，过滤器刚好做的就是这种单向转换。但ng-model是双向绑定，它需要同时处理「模型→视图」和「视图→模型」的双向转换逻辑，直接加过滤器会打破这种机制，导致Angular解析绑定表达式失败。

下面给你两种实用的解决方案：

方案一：用自定义指令扩展ngModel（推荐，可复用） #

把mydate过滤器的逻辑集成到自定义指令中，通过ngModel的$formatters（模型→视图）和$parsers（视图→模型）实现完整的双向转换：

1. 编写自定义指令 #

app.directive('mydateModel', function() {
  return {
    require: 'ngModel', // 依赖ngModel控制器
    link: function(scope, element, attrs, ngModel) {
      // 处理「模型→视图」：把JSON日期转成指定格式的字符串
      ngModel.$formatters.push(function(modelValue) {
        const dateRegex = /\/Date\(([0-9]*)\)\//;
        const matchResult = modelValue?.match(dateRegex);
        
        if (matchResult) {
          const date = new Date(parseInt(matchResult[1]));
          // 转成你需要的yyyy-MM-dd格式（可根据需求调整）
          const year = date.getFullYear();
          const month = ('0' + (date.getMonth() + 1)).slice(-2);
          const day = ('0' + date.getDate()).slice(-2);
          return `${year}-${month}-${day}`;
        }
        return modelValue;
      });

      // 处理「视图→模型」：把用户输入的日期字符串转回JSON日期格式
      ngModel.$parsers.push(function(viewValue) {
        const date = new Date(viewValue);
        if (!isNaN(date.getTime())) {
          return `/Date(${date.getTime()})/`;
        }
        return viewValue; // 无效日期则返回原输入
      });
    }
  };
});

2. 在input中使用指令 #

直接绑定模型，加上自定义指令即可，不需要写过滤器：

<input class="w-100" datetime="yyyy-MM-dd" ng-model="ApplyToProgress.CurrentWork.StartDate" mydate-model>

方案二：在控制器中提前转换模型数据（适合一次性场景） #

如果只是个别地方需要处理，不想写指令，可以在控制器里把JSON日期提前转成Date对象，然后直接绑定到input：

1. 控制器中转换数据 #

// 假设你的模型值是JSON日期字符串
const dateRegex = /\/Date\(([0-9]*)\)\//;
const matchResult = ApplyToProgress.CurrentWork.StartDate.match(dateRegex);

if (matchResult) {
  // 把JSON日期转成Date对象
  ApplyToProgress.CurrentWork.StartDate = new Date(parseInt(matchResult[1]));
}

2. input直接绑定Date对象 #

如果用HTML5的日期输入类型，Angular会自动处理显示格式：

<input class="w-100" type="date" ng-model="ApplyToProgress.CurrentWork.StartDate">

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