JavaScript 时间跨度控制

Question

我正在尝试构建一个时间跨度控件。本质上，它是一个控件，允许用户输入年/月/日/小时来表示某件事所花费的时间。

如果您曾经使用过 JIRA，我认为他们对此有一个不错的实现。

我很感兴趣是否有其他人遇到过类似的情况以及您如何通过控件来处理它。另外，你将如何处理 JavaScript 中的时间跨度(我在想毫秒)。

目标是创建一个让用户轻松输入时间跨度的控件。 2 个不同的日期/时间控件对于简单地输入 3 小时之类的内容来说非常困惑。

Answer 1

是的，将输入字符串解析为毫秒是个好主意。所以你可以用它来进行稍后的计算。例如然后，您可以使用 new Date(your-milliseconds) 创建一个日期对象。

您可以为此编写一条指令，如下面的演示和 jsFiddle 所示。 .

它使用作用域方法parseTime(time)，该方法使用正则表达式创建输入数组。因此，匹配结果中将包含一个数字和关键字母。然后，该字母将用于获取转换为毫秒的时基，该值是计算的乘数。

为了稍后再次显示输入的时间跨度，我创建了一个过滤器，将毫秒转换回“周、天、...”格式。

演示运行得很好，但我认为有一点需要改进。如果在数字和字母之间输入空格，则不起作用。例如3周4天12小时

但这可能很容易解决。它应该通过 trim 解析方法中的空格来工作。

'use strict';

angular.module('myApp', []).
constant('formatObj', {
    "w": 7 * 24 * 60 * 60 * 1000, // milliseconds
    "d": 24 * 60 * 60 * 1000,
    "h": 60 * 60 * 1000,
    "m": 60 * 1000,
    "s": 1000,
    "ms": 1
})
    .controller('mainCtrl', function ($scope) {})
    .directive('timeSpanInput', function () {
    return {
        template: '<input ng-model="time" ng-change="parseTime(time)" ' +
            'placeholder="enter time..."></input>(e.g. 3w 4d 12h)<p ng-show="timespan">timespan entered {{timespan | dateSpan}}</p>',
        controller: function ($scope, $filter, formatObj) {
            $scope.parseTime = function (timeStr) {
                var pattern = /(\d+)(\w{1,2})/g, // returns 1w, 1, w from 1w string
                    match,
                    timespan = 0;

                while (match = pattern.exec(timeStr)) {
                    console.log(match); // index=1 value 2=format letter w d h s
                    if (match.length == 3 && isNaN(match[2])) {
                        timespan += match[1] * formatObj[match[2]];
                    }
                }
                //console.log(timespan);
                $scope.timespan = timespan;
            };
        }
    };
})
    .filter('dateSpan', function (formatObj) {
    return function (date) {
        // convert milli seconds to weeks days hours minutes seconds string
        if (angular.isUndefined(date)) return; // date not defined yet.

        var dateObj = {},      // created date obj {w: 3, d: 4, h:12}
            dateResult = date, // used to calculated times
            factor = 0,  // math factor millis to weeks, hours, etc.
            result = ''; // formatted result string

        for (var key in formatObj) {
            factor = formatObj[key];
            dateObj[key] = Math.floor(dateResult / factor);
            dateResult -= dateObj[key] * factor;
        }

        // console.log(dateObj);
        // generate output string
        for (var key in dateObj) {
            if (dateObj[key]) {
                result += (dateObj[key] + key + ' ');
            }
        };
        //console.log('res', result);
        return result;
    };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<div ng-app="myApp" ng-contoller="mainCtrl">
    <time-span-input></time-span-input>
</div>