JavaScript Timespan控件

Question

我试图建立一个时间跨度控制。从本质上讲，它是一个控件，允许用户输入数年/月/日/小时的时间。

如果您曾经使用过JIRA，我认为他们可以很好地实现这一点。

我感兴趣的是，是否有其他人有类似的案例以及您是如何通过控件进行的。另外，你如何在JavaScript中处理时间跨度（我在想milisecs）。

目标是创建一个控件，让用户轻松输入时间跨度。简单地输入3h之类的东西，2个不同的日期/时间控件非常混乱。

Answer 1

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

你可以在下面的演示和jsFiddle中找到一个指令。

它使用范围方法parseTime(time)，它使用正则表达式来创建输入数组。所以你将在匹配的结果中有一个数字和关键字母。 然后，该字母将用于获取转换的时基，以毫秒为单位，该值是计算的乘数。

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

该演示工作得很好，但我认为有一点需要改进。如果在数字和字母之间输入空格，则无效。例如3 w 4 d 12h

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

'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>