按日期排序和过滤

Question

我有一个日期列，需要能够对其进行排序和过滤。数据以 2010-12-23 之类的字符串形式出现，可以根据需要进行预处理。它应该显示为 23.12.2010。稍后会进行一些国际化。

我想知道什么是正确的内部表示：

像"23.12.2010"这样的字符串不利于排序（可以通过对函数结果进行排序来完成，但会很慢）
像 "2010-12-23" 这样的字符串可以正确排序，可以很容易地格式化，但是 23.12 的过滤不起作用（可以做到，但速度很慢）
Date 可能会正确排序，但过滤会很慢
moment 可能是解决方案，不知道

我目前的想法是创建一个包含毫秒和显示字符串的对象，这样所有的操作都可以很快。但我敢打赌，有人比我更聪明....

我们假设以2010-12-23这样的形式显示日期是不可接受的，否则问题就解决了。总而言之，问题是我需要

以DD.MM.YYYY格式显示和过滤
根据数值排序（或者等效地，就好像它是 ISO 格式）。

Answer 1

这可能会对您有所帮助。我在 React 中使用了同样的东西。这是 link 对应 Moment.js - http://momentjs.com/docs/#/displaying/format/ 如果你在右侧菜单栏的 Display -> Format 下，你会看到本地化的格式，你需要使用 format L - pre defined format from moment 它将显示 09/04/1986（1986 年 9 月 4 日）；否则，您可以使用 DD-MM-YYYY 格式创建自己的格式。

比如我在React中练习的方式是

使用 let 定义变量： let deadlineFormated = Moment(this.props.ToDoItem.deadline).format('llll');

希望这对 Angular 有所帮助！

Answer 2

要点：解耦排序和过滤。对内部表示进行排序，对演示进行过滤。

按任何自然可排序格式的内部表示排序。您的原始 YYYY-MM-DD 日期字符串可以工作，因此将它们解析为 Date 对象。除非您处理大量行，否则性能差异可以忽略不计——但在那种情况下，您可能已经遇到了延迟和渲染性能方面的其他问题。

如果对显示的内容（演示文稿）进行自由文本过滤，会更直观。因此，如果您将日期格式化为 "May 7, 2016"，请对其进行子字符串匹配。如果您将日期格式化为 DD.MM.YYYY，请对其进行子字符串匹配。

如果过滤是由日期选择器或 select 字段等控件中的实际日期 select 离子驱动的，您可以对内部表示进行过滤。

Answer 3

要可靠地实现排序，建议将其转换为日期对象 (new Date(str))

如果您需要灵活地格式化 moment 也有格式化支持（检查 moment.format()）。 Moment 也有相当深的语言环境支持。

您始终可以将其保留为日期对象作为真实来源，并且为了进行过滤，您可以在过滤时执行 Date.toString()。这个 returns 一个字符串，你可以用它来过滤。

Answer 4

试试这个：获取日期的 Unix 时间戳（即数字格式）并使用 jquery 排序。

请检查此示例以进行 jquery 排序。关于示例将您的 unixtimestamp 替换为值。

<ul id="datelist">
<li value="1360013296">Date 1</li>
<li value="1360013297">Date 2</li>
<li value="1360013298">Date 3</li>
<li value="1360013299">Date 4</li>
</ul>

https://jsfiddle.net/ajaygokhale/bohgoq8o/

Answer 5

我认为您提出的方法不会运行出现太多性能问题，除非您要使用非常旧的浏览器或移动设备。

我模拟了一个示例来进行快速（性能）测试。首先，我定义了一个对象，它包含一个针对排序优化的值和一个针对显示优化的值：

var MyDate = function(dateString) {
    var date = new Date(dateString);
    var displayValue = "{0}.{1}.{2}"
        .replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
        .replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
        .replace("{2}", date.getUTCFullYear());

    return {
        sortKey: date.getTime(),
        displayValue: displayValue
    };
};

prefixZeroIfNeeded 方法确保我们得到 DD.MM 格式而不是 dd.mm 格式：

var prefixZeroIfNeeded = function(nr) {
    return nr < 10 ? "0" + nr : "" + nr;
};

然后，我们需要一些数据进行转换：

var data = [];
var myDates = data
    .map(MyDate)
    .sort(function(date1, date2) {
        return date1.sortKey - date2.sortKey;
    });

最后，一个非常基本的搜索功能的快速示例：

var searchMyDates = function(str) {
    return myDates.filter(function(myDate) {
        return myDate.displayValue.indexOf(str) !== -1;
    });
};

现在，我们可以创建一些模型数据并检查 A) 将原始字符串映射和排序到 MyDate 对象实际需要多长时间，以及B) 在我们的集合中搜索字符串。

这是我生成原始数据的方式：

for (var i = 0; i < 10000; i += 1) {
    var y = Math.floor(Math.random() * 101) + 1900;
    var m = prefixZeroIfNeeded(Math.floor(Math.random() * 13));
    var d = prefixZeroIfNeeded(Math.floor(Math.random() * 29));

    data.push(y + "-" + d + "-" + m);
}

使用console.time进行测量，在我的机器（A）上处理数据大约需要40ms。搜索字符串 .12. 大约需要 5-10 毫秒。

结论：我认为你的方向肯定是正确的，可以按照建议的方向继续工作。但是，根据我的个人经验，我了解到每当我开始处理涉及日期和时间的功能时，moment.js 是最佳选择。你最终会运行进入夏令时，时区，你给它命名并后悔你认为它很简单...

如果这对您有帮助，请告诉我。

编辑：片段中的代码（检查浏览器控制台的输出）

var data = [];

var prefixZeroIfNeeded = function(nr) {
  return nr < 10 ? "0" + nr : "" + nr;
};

// Generate random data:
for (var i = 0; i < 10000; i += 1) {
  var y = Math.floor(Math.random() * 101) + 1900;
  var m = prefixZeroIfNeeded(Math.floor(Math.random() * 13));
  var d = prefixZeroIfNeeded(Math.floor(Math.random() * 29));

  data.push(y + "-" + d + "-" + m);
}



var MyDate = function(dateString) {
  var date = new Date(dateString);
  var displayValue = "{0}.{1}.{2}"
    .replace("{0}", prefixZeroIfNeeded(date.getUTCDate()))
    .replace("{1}", prefixZeroIfNeeded(date.getUTCMonth() + 1))
    .replace("{2}", date.getUTCFullYear());

  return {
    sortKey: date.getTime(),
    displayValue: displayValue
  };
};

console.time("Map and sorting");

var myDates = data
  .map(MyDate)
  .sort(function(date1, date2) {
    return date1.sortKey - date2.sortKey;
  });

var searchMyDates = function(str) {
  return myDates.filter(function(myDate) {
    return myDate.displayValue.indexOf(str) !== -1;
  });
};

console.timeEnd("Map and sorting");

console.time("Search");

console.log("Searching for the month 12, %d results.", searchMyDates(".12.").length);


console.timeEnd("Search");

按日期排序和过滤

Sorting and filtering on Date

javascript

sorting

angularjs

momentjs

angularjs-filter