AngularJS：input选中日期的格式化显示及placeholder设置问询

嘿，很高兴你已经搞定了日期传递到控制器的问题！针对你现在问的「能不能在input标签里通过placeholder格式化选中的日期」，我得先给你明确说清楚：原生的<input type="date">控件是没办法用placeholder来控制选中后的日期显示格式的。

为啥placeholder行不通？ #

placeholder的作用只是在用户还没选择日期时，显示一段提示文本（比如“请选择日期”），一旦用户选中了日期，placeholder就会被浏览器默认的日期格式（通常是YYYY-MM-DD，格式由用户系统区域设置决定）替换掉——它根本不具备修改选中后内容格式的能力。

那在AngularJS里怎么实现ddMMyyyy格式的显示？ #

既然原生控件做不到，我们可以借助AngularJS的特性来绕开这个限制，给你两种实用的方案：

方案1：用过滤器+隐藏原生控件，模拟格式化显示

这种方式是用原生date控件做日期选择（可以隐藏它），然后用一个普通文本框显示格式化后的日期，点击文本框触发原生选择器：

<!-- 隐藏的原生date控件，负责实际的日期选择 -->
<input ng-if="shutDown" type="date" ng-model="rawDate" style="display: none;">
<!-- 显示格式化后的日期，点击时触发原生选择器 -->
<input 
  ng-if="shutDown" 
  type="text" 
  ng-model="formattedDate" 
  readonly 
  ng-click="document.querySelector('[type=date]').click()"
  placeholder="请选择日期"
>
<button ng-if="shutDown" class="btn-xs btn btn-blue-dark" ng-click="assignDate()">Lagre</button>

然后在控制器里监听原生日期的变化，用date过滤器转换成ddMMyyyy格式：

app.controller('YourController', function($scope, $filter) {
  $scope.rawDate = null;
  $scope.formattedDate = '';

  // 监听原生日期模型的变化，同步格式化后的字符串
  $scope.$watch('rawDate', function(newDate) {
    if (newDate) {
      $scope.formattedDate = $filter('date')(newDate, 'ddMMyyyy');
    } else {
      $scope.formattedDate = '';
    }
  });

  $scope.assignDate = function() {
    // 这里可以直接用格式化后的formattedDate，或者rawDate对象
    console.log('格式化后的日期:', $scope.formattedDate);
  };
});

方案2：自定义指令封装控件（更复用）

如果你的项目里多个地方都需要这种格式化的日期输入，可以写一个AngularJS指令来封装逻辑，这样不用重复写代码：

app.directive('formattedDateInput', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 把模型里的Date对象转换成ddMMyyyy格式显示在视图
      ngModel.$formatters.push(function(modelValue) {
        return modelValue ? $filter('date')(modelValue, 'ddMMyyyy') : '';
      });

      // 监听原生控件的change事件，更新视图显示
      element.on('change', function() {
        scope.$apply(function() {
          ngModel.$setViewValue($filter('date')(ngModel.$modelValue, 'ddMMyyyy'));
        });
      });
    }
  };
});

使用的时候直接在原生date控件上加上指令即可：

<input 
  ng-if="shutDown" 
  type="date" 
  formatted-date-input 
  ng-model="dates" 
  placeholder="请选择日期"
>
<button ng-if="shutDown" class="btn-xs btn btn-blue-dark" ng-click="assignDate(dates)">Lagre</button>

补充说明 #

不管用哪种方案，原生date控件的ng-model绑定的依然是Date对象（或符合YYYY-MM-DD的字符串），这保证了我们能正常把日期传递到控制器，同时又能让用户看到ddMMyyyy格式的日期。

内容的提问来源于stack exchange，提问作者Øystein Seel