Angularjs输入字符串到时间格式

时间:2017-05-11 11:16:23

标签: javascript angularjs

我是棱角分明的新人。我正在使用uib时间选择器,它不接受字符串时间。

例如,我有时间从json喜欢“06:00”。我也需要24小时和12小时格式。问题是我在ng-model中创建了显示时间的指令,我也有一个文本输入。假设如果我在输入文本中输入值,例如1111,则需要将其格式化为11:11

其他一些例子:183 - 18:03,18349 - 18:34:09就像这样。

请有人帮我解决这个问题。

dateTimeMask.directive('timeMask', function($filter) {
  return {
    restrict: 'A',
    priority: 1,
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
        var timeFormat;

        function formatter(value) {

            var formattedValueLength = timeFormat.length;
            var unformattedValueLength = timeFormat.replace(':', '').length;
            var timeMask = new String(timeFormat);

            if (ngModel.$isEmpty(value)) {
                return value;
            }
            if (!value) {
                ngModel.$setValidity('time', true);
                  return null;
                } else if (angular.isDate(value) && !isNaN(value)) {
                    ngModel.$setValidity('time', true);
                  return value;
                } 
            else if (angular.isString(value)) {
              var timeRegex = /^(0?[0-9]|1[0-2]):[0-5][0-9] ?[a|p]m$/i;
              if (!scope.showMeridian) {
                timeRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
              }
              if (!timeRegex.test(value)) {
                  ngModel.$setValidity('time', false);
                  return undefined;
              }
              else {
                ngModel.$setValidity('time', true);
                var date = new Date();
                var sp = value.split(":");
                var apm = sp[1].match(/[a|p]m/i);
                if (apm) {
                  sp[1] = sp[1].replace(/[a|p]m/i, '');
                  if (apm[0].toLowerCase() == 'pm') {
                    sp[0] = sp[0] + 12;
                  }
                }
                date.setHours(sp[0], sp[1]);
                return date;
              }
            }
            else {
              ngModel.$setValidity('time', false);
              return undefined;
            }
        }

        var showTime = function(data) {
            timeFormat = (!scope.showMeridian) ? "HH:mm" : "hh:mm a";
            return $filter('date')(formatter(data), timeFormat);
          };

        scope.$watch('showMeridian', function(value) {
            var myTime = ngModel.$modelValue;
            if (myTime) {
                element.val(showTime(myTime));
            }

          });

        ngModel.$formatters.push(function (value) {
        timeFormat = (!scope.showMeridian) ? "HH:mm" : "hh:mm a";
          var date = formatter(value);
          return date;
        });

        ngModel.$parsers.push(function (value) {
          var date = showTime(value);
          return date;
        });


    } //link function
  };
});

这是我的html代码,它会显示弹出的时间我需要更新文本和弹出值,请帮我解决这个问题。

0 个答案:

没有答案