如何使用Javascript按日期排序,然后按时间排序

How to sort by date and then by time using Javascript

本文关键字:排序 然后 时间 日期 何使用 Javascript      更新时间:2023-09-26

我写了一个脚本来帮助我转换一个非常漫长而乏味的任务,即从段落中复制数字并将它们重新键入到表中。

但是,我需要能够按日期对这些"段落"进行排序,然后在每个日期内,必须按时间对它们进行排序(我知道 3333Z 不是有效时间,这只是为了测试并确保它正确排序)。

这就是它需要显示为最终产品的方式。我的代码生成此表的 CSV 版本,我将其粘贴到 Excel 中以获取该表。

March 4
--------------------------------------------------------------------------------------
|  Value 1    |  Value 2    |  Value 3    |  Value 4     |   Value 3    |  Value 6   |
--------------------------------------------------------------------------------------
|     1111Z   |     1111Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     2222Z   |     2222Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     3333Z   |     3333Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
March 12
--------------------------------------------------------------------------------------
|  Value 1    |  Value 2    |  Value 3    |  Value 4     |   Value 3    |  Value 6   |
--------------------------------------------------------------------------------------
|     1111Z   |     1111Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     2222Z   |     2222Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     3333Z   |     3333Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
March 29
--------------------------------------------------------------------------------------
|   Value 1   |  Value 2    |  Value 3    |  Value 4     |   Value 3    |  Value 6   |
--------------------------------------------------------------------------------------
|     1111Z   |     1111Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     2222Z   |     2222Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------
|     3333Z   |     3333Z   |   12345.67  |  123456.123  |    123.123   |   456.78   |
--------------------------------------------------------------------------------------

我有一个名为 line1field2 的值,它的日期和时间格式为 DDHHHHZ。在上面的示例中,DD 将给出 4、12 和 29。然后必须按时间 (HHHH) 排序以创建表部件。

我知道这可以用其他语言完成,但是,由于系统要求,这必须是普通的JavaScript,没有像jQuery这样的库,并且它必须与FireFox 3.6.3一起使用。

下面的代码有效,但它不按日期分隔。

另外,我想将其另存为 CSV 文件(或将保留表格格式的文件)作为最终输出,我知道我可以用 PHP 做,但我认为我不能用 JavaScript 做到这一点。如果有人知道可以做到这一点的方法,请告诉我。

如果我不清楚任何事情,请问,我会尽力解释得更好。

谢谢

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Converter</title>
    <style type="text/css">
    body {
        background: #C8C8C8;
        margin: 10px;
        font-size: 100%;
    }
    .floatstop {
        clear: both;
    }
    .hidden {
        display: none;
    }
    .unhidden {
        display: block;
    }
    #button {
        margin: 0px auto;
    }
    #instruction {
        margin: 5px;
        width: 500px;
    }
    #workspace {
        background: #FFFFFF;
        float: left;
        margin: 0px auto;
        height: 300px;
        width: 505px;    
        border-style: ridge;
        border-width: 5px;
        border-color: gray;
    }
#outer {
    background: #F0F0F0;
    width: 1035px;
    margin: 0px auto;
    padding: 10px;
    border-style: solid;
    border-width: 3px;
    border-color: black;
}
#preview {
    background:   #FFFFFF;
    float: right;
    margin: 0px auto;
    height: 300px;
    width: 505px;
    border-style: ridge;
    border-width: 5px;
    border-color: gray;
}
#viewCSV {
    width: 500px;    
}
#viewHTML {
    width: 500px;
}
</style>
</head>
<body>
<script type="text/javascript" language="JavaScript">
//Select text function in Preview textarea
function selectText(id) {
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
//Trim leading zeros    
function trimNumber(s) {
    while (s.substr(0, 1) == '0' && s.length > 1) { s = s.substr(1, 9999); }
    return s;
}
//Trim leading zeros, but leave two digits before decimal point
function trimNumber2(s) {
    while (s.substr(0, 2) == '00' && s.length > 1) { s = s.substr(1, 9999); }
    return s;
}
var row = [];
var results = [];
function conversionCode() {
    var pastedText = document.getElementById("pastedText").value; //get text from input
    var para = pastedText.split("'n'n");
    var i = 0;
    for (i = 0; i < para.length; i++) { //start conversion loop
        var report = para[i];
        //Arrays are zero-based.
        var splitLines     = report.split('//');
        var line1Arr       = splitLines[0];
        var line2Arr       = splitLines[1];
        var line3Arr       = splitLines[2];
        var line4Arr       = splitLines[3];
        var line5Arr       = splitLines[4];
        //Break out FIRST line.
        var lineAAA        = splitLines[0].split('/');
        var datasetName1   = lineAAA[0];
        var line1field1    = lineAAA[1];
        var line1field2    = lineAAA[2];
        var line1field3    = lineAAA[3];
        var line1field4    = lineAAA[4];
        var line1field5    = lineAAA[5];
        var line1field6    = lineAAA[6];
        var line1field7    = lineAAA[7];
        var line1field8    = lineAAA[8];
        var line1field9    = lineAAA[9];
        //Break out SECOND line.
        var lineBBBBB      = splitLines[1].split('/');
        var datasetName2   = lineBBBBB[0];
        var line2field1    = lineBBBBB[1];
        var line2field2    = lineBBBBB[2];
        var line2field3    = lineBBBBB[3];
        var line2field4    = lineBBBBB[4];
        var line2field5    = lineBBBBB[5];
        var line2field6    = lineBBBBB[6];
        var line2field7    = lineBBBBB[7];
        //Break out THIRD line.
        var lineCCC        = splitLines[2].split('/');
        var dataSetName3   = lineCCC[0];
        var line3field1    = lineCCC[1];
        var line3field2    = lineCCC[2];
        var line3field3    = lineCCC[3];
        var line3field4    = lineCCC[4];
        var line3field5    = lineCCC[5];
        //Break out FOURTH line.
        var lineDDDD1      = splitLines[3].split('/');
        var dataSetName4   = lineDDDD1[0];
        var line4field1    = lineDDDD1[1];
        var line4field2    = lineDDDD1[2];
        var line4field3    = lineDDDD1[3];
        var line4field4    = lineDDDD1[4];
        var line4field5    = lineDDDD1[5];
        var line4field6    = lineDDDD1[6];
        var line4field7    = lineDDDD1[7];
        //Break out FIFTH line.
        var lineDDDD2      = splitLines[4].split('/');
        var dataSetName5   = lineDDDD2[0];
        var line5field1    = lineDDDD2[1];
        var line5field2    = lineDDDD2[2];
        var line5field3    = lineDDDD2[3];
        var line5field4    = lineDDDD2[4];
        var line5field5    = lineDDDD2[5];
        var line5field6    = lineDDDD2[6];
        var line5field7    = lineDDDD2[7];
        //Change variables to correct formating
        //date - selecting and validating the date from line1field2
        var date = line1field2.slice(0, -5);
        var min = 1;
        var max = 31;
        var num = parseInt(date);
        if (min > num || max < num) {
            alert('Invalid date');
            exit();
        }
        //Time - Correcting format
        line1field2 = line1field2.slice(2);
        line1field3 = line1field3.slice(2);
        //line3field1 - remove letters from end of field, remove leading zeros
        line3field1 = line3field1.slice(0, -3);
        line3field1 = trimNumber(line3field1);
        //line3field3 - Split field on ':'
        line3field3 = line3field3.split(':');
        line3field3 = line3field3[1];
        //line4field1 - Split field on ':', and removing leading zeros
        line4field1 = line4field1.split(':');
        line4field1 = line4field1[1];
        line4field1 = trimNumber(line4field1);
        //line3field5 - Remove leading zeros, but keep at least two numbers before the
        //decimal point (Example: 01.123)
        line3field5 = line3field5.split(':');
        line3field5 = line3field5[1];
        line3field5 = trimNumber2(line3field5);
        //Create Array for each row in table.
        row[row.length] = line1field2;
        row[row.length] = line1field3;
        row[row.length] = line3field1;
        row[row.length] = line3field3;
        row[row.length] = line4field1;
        row[row.length] = line3field5;
        //Add each report's data to array'
        results.push(row);
        //Remove data from row for next loop 
        row = [];
    }
    //Sort results array for display
    results = results.sort();
    //Build HTML table
    //Build CSV text  
    resultsHeader = "Value 1,Value 2,Value 3,Value 4,Value 5,Value 6" + "'n";
    document.getElementById("plainOutput").innerHTML = resultsHeader;
    for (i = 0; i < results.length; i++) {
        document.getElementById("plainOutput").innerHTML += results[i] + "'n";
    }
};
</script>
<div id="outer">
    <h1 align="center">CONVERTER</h1>
    <div id="workspace">
    <h2 align="center">Workspace</h2>      
    <form action="" method="get" id="inputForm">
    <textarea id="pastedText" style="width:500px" rows="10"></textarea>
        <div id="button" class="floatstop">
        <p><input type="button" value="Convert" onclick="conversionCode ()"></p>    
        </div>
    </form>
    </div>
    <div id="preview">
    <h2 align="center">Preview</h2>
        <div id="viewCSV"> 
        <form action="" method="get" name="csvDisplay">  
        <textarea id="plainOutput" style="width: 500px" rows="10" readonly="readonly" onClick="selectText('plainOutput')"></textarea>
        <p><input type="button" value="Select Text" onClick="selectText('plainOutput')"/></p>
        </form>
        </div>
    </div>
    <div id="instruction" > 
    <p style="margin-left: 20px"><strong>Instructions:</strong></br>
    <ol>
        <li>Paste text into the Workspace.</li>
        <li>Click the "Convert" button.</li>
        <li>Cclick on the text or the Select button at the bottom to select 
            the text.</li>
        <li>You <strong>must</strong> copy the text by either Right-clicking 
            and choose Copy or by pressing Control+C.</li>
        <li>Paste the text into Excel as CSV.</li>
        <li>Format table as necessary.</li>
        <li>Select table and paste into product.</li>
    </ol>
    </div>
</div>
</body>
</html>

将"times"转换为Date()对象(拆分字符串,转换为数字,馈送构造函数)。

然后使用日期数组的sort()方法。使用自定义比较函数,您可以轻松对日期进行排序。看看链接文档中的数字比较功能: 它也适用于 Date 对象,因为它将被隐式转换为数字。

之后,您将能够为每个日期将数组拆分为子数组。

export const sortByDate = (array, direction) => {
      if (!array.length) return []
      if (direction.toLowerCase() === "asc") {
        return array.sort(
          (a, b) => new Date(a).getTime() - new Date(b).getTime()
        )
      }
      if (direction.toLowerCase() === "desc") {
        return array.sort(
          (a, b) =>
            new Date(String(b)).getTime() -
            new Date(String(a)).getTime()
        )
      }
      return array
    }