解析自定义日期并排序

Question

我是 javascript/jQuery 的新手，我正在尝试一些雄心勃勃的东西来提升我的技能水平。我发现了一些有帮助但被卡住的 sn-ps。

我有一堆格式如下的日期：dd-month-yyyy（2013 年 10 月 10 日）。据我了解，这在某种程度上是一种非常规的日期格式。所以我要做的是将日期解析为正常格式，然后使用 jQuery tinysort 插件（我认为我使用不正确）排列父 div。

我在这里做了一个 jsfiddle：http://jsfiddle.net/8BYDZ/

或者这是我的代码：

<div id="date-sort">
  <div class="date-content"> 
    <p>Some Content</p>
    <p class="date-sort">10-Oct-2013</p>
    <hr />
  </div>
  <div class="date-content"> 
    <p>Some Content</p>
    <p class="date-sort">12-Oct-2013</p>
    <hr />
  </div>
  <div class="date-content"> 
    <p>Some Content</p>
    <p class="date-sort">2-Sep-2013</p>
    <hr />
  </div>
  <div class="date-content"> 
    <p>Some Content</p>
    <p class="date-sort">22-Jun-2013</p>
    <hr />
  </div>
  <div class="date-content"> 
    <p>Some Content</p>
    <p class="date-sort">1-May-2013</p>
    <hr />
  </div>
</div>

$(document).ready(function(){
    function customParse(str) {
      var months = ['Jan','Feb','Mar','Apr','May','Jun',
                    'Jul','Aug','Sep','Oct','Nov','Dec'],
          n = months.length, re = /(\d{2})-([a-z]{3})-(\d{4})/i, matches;

      while(n--) { months[months[n]]=n; } // map month names to their index :)

      matches = str.match(re); // extract date parts from string

      return new Date(matches[3], months[matches[2]], matches[1]);
    }

    var array = [];

    var elements = $('.date-sort');

    for(var i = 0; i < elements.length; i++) {
       var current = elements[i];
        if(current.children.length === 0 && current.textContent.replace(/ |\n/g,'') !== '') {
           // Check the element has no children && that it is not empty
           customParse(current.textContent);
           array.push(current.textContent);
        }
    } 

    $('div#date-sort>.date-content>.date-sort').tsort();

});

感谢您提供任何帮助、见解或意见。

Answer 1

你需要给 tinysort 一个可排序的日期。

new Date(matches[3], months[matches[2]], matches[1]).toJSON();

// ...

current.setAttribute('data-date', customParse(current.textContent));

// ...

$('div#date-sort>.date-content').tsort('.date-sort', {attr: 'data-date' });

您的正则表达式过于严格，因为天数并不总是两个数字。

re = /(\d{1,2})-([a-z]{3})-(\d{4})/i

Here is a working jsiddle

Answer 2

您只需使用.replace() 消除- 标记，然后使用new Date().getTime() 将1970 年1 月1 日午夜和您的日期之间的毫秒数分配给一个数组，该数组将.sort() 说明如何你需要它。

$(document).ready(function(){
  var ds = $('.date-sort'), dt = [];
  ds.each(function(i){
    dt[i] = new Date($(this).html().replace(/-/g, ' ')).getTime();
  });
  dt.sort();
  ds.each(function(i){
    $(this).html(new Date(dt[i])/*add . whatever here*/);
  });    
});

我更新了你的 JSFiddle。

Answer 3

在 JavaScript 中，对象通常被认为是创建关联映射的最佳方式（正如下面评论者所指出的，在数组上设置属性是完全有效的）。

我会使用一个对象作为月份名称和数字之间的映射。此外，我会使用小写名称，因此我可以支付一次小写的成本，并在我的映射中使用该值。

所以我会用对象初始化器替换您的 months 数组的定义：

var months = { 'jan': 1, 'feb': 2, 'mar': 3, /*...*/ };

这样，你就不需要循环了。

现在您只需在输入时调用.toLowercase()，月份名称就会正确映射。