Question

我是javascript / jQuery的新手，我正在尝试一些雄心勃勃的技能水平。我找到了一些有帮助但却陷入困境的片段。

我有一堆日期格式如下：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()，月份名称就会正确映射。

解析自定义日期和排序

3 个答案: