md-datepicker 输入格式

Question

在 angular material 中使用 md-datepicker 指令时，日期格式似乎不适用于直接输入。

如果我 select 日历中的日期，它将按指定显示（在我的例子中是 DD-MM-YYYY），但如果我尝试手动更改输入，我的条目将被分析为 MM -DD-YYYY.

到目前为止，我的日期选择器是使用

中的代码设置的

angular.module('MyApp').config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {
    return date ? moment(date).format('DD-MM-YYYY') : '';
  };
});

Here 是一个代码笔，用于查看实际问题。

有没有办法设置条目格式？

Answer 1

格式化日期事件是不够的。您还应该配置解析日期事件。

$mdDateLocaleProvider.parseDate = function(dateString) {
  var m = moment(dateString, 'DD-MM-YYYY', true);
  return m.isValid() ? m.toDate() : new Date(NaN);
};

查看更新的笔：http://codepen.io/anon/pen/GpBpwZ?editors=101

Answer 2

完整的解决方案基础是：

$mdDateLocaleProvider.formatDate = function(date) {
 return date ? moment(date).format('DD-MM-YYYY') : '';
};

$mdDateLocaleProvider.parseDate = function(dateString) {
 var m = moment(dateString, 'DD-MM-YYYY', true);
 return m.isValid() ? m.toDate() : new Date(NaN);
};

Answer 3

config($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {      
      if(date !== null) {
        if(date.getMonthName == undefined) {
          date.getMonthName = function() {
            var monthNames = [ "January", "February", "March", "April", "May", "June", 
            "July", "August", "September", "October", "November", "December" ];
            return monthNames[this.getMonth()];
          }
        }        
        var day = date.getDate();
        var monthIndex = date.getMonth();
        var year = date.getFullYear();
        return day + ' ' + date.getMonthName() + ' ' + year;
      }
    };
  }

Answer 4

除了 formatDate -

之外还需要提供两个定义

parseDate - 这是为了确保手动输入的日期有效

isDateComplete - 这是为了确保不开始验证部分输入的日期

Reference

/**
        * @param date {Date}
        * @returns {string} string representation of the provided date
        */
        $mdDateLocaleProvider.formatDate = function (date) {
            return date ? moment(date).format('DD-MM-YYYY') : '';
        };

        /**
         * @param dateString {string} string that can be converted to a Date
         * @returns {Date} JavaScript Date object created from the provided dateString
         */
        $mdDateLocaleProvider.parseDate = function (dateString) {
            var m = moment(dateString, 'DD-MM-YYYY', true);
            return m.isValid() ? m.toDate() : new Date(NaN);
        };

        /**
         * Check if the date string is complete enough to parse. This avoids calls to parseDate
         * when the user has only typed in the first digit or two of the date.
         * Allow only a day and month to be specified.
         * @param dateString {string} date string to evaluate for parsing
         * @returns {boolean} true if the date string is complete enough to be parsed
         */
        $mdDateLocaleProvider.isDateComplete = function (dateString) {
            dateString = dateString.trim();
            // Look for two chunks of content (either numbers or text) separated by delimiters.
            var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-]))([a-zA-Z]{3,}|[0-9]{1,4})/;
            return re.test(dateString);
        };

md-datepicker 输入格式

md-datepicker input format

angularjs

angular-material