-1

我真的需要帮助计算两个日期之间的差异，它必须是整数中的天数。这是我的 HTML 和 jQuery ..

这根本不起作用......该网站应该说今天的日期。然后用户将选择日期并单击“检查我们的安全记录”按钮，并在页面底部显示已经过了多少天。jQuery：

$(document).ready(function() {
    $('#safetyRecord').hide();

var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]

var newDate = new Date();
newDate.setDate(newDate.getDate());    
$('#today').html(dayNames[newDate.getDay()] + "," +' ' + monthNames[newDate.getMonth()]      + ' ' + newDate.getDate() + ","+ ' ' + newDate.getFullYear());

/*
$(':button').click(function(){
var start = $('#dateOfLastAccident').val();
var end = $('#today');

var startDate = new Date(start);
var endDate = new Date(end);

var diff = endDate - StartDate;

var numDays = Math.floor( diff / 1000 /60 /60 /24 );
$('#daysSinceLastAccident'+ numDays)();
*/
});

的HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>generic safety</title>

    <link rel="stylesheet" href="L3hw.css">

    <!-- jQuery library hosted by Google Content Distribution Network -->
    <script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="L3hw.js"></script>

</head>
<body>
    <header>
        <img src="images/genericBanner.png" alt="Generic, Inc.">
        <p>
            The New Ventures Mission is to scout profitable growth   opportunities in
            relationships, both internally and externally, in emerging, mission-inclusive
            markets, and explore new paradigms and then filter and communicate and
            evangelize the findings.
        </p>
    </header>

    <section id="main">
        <h1>Safety at generic company</h1>
        <h2>Today is <span id="today">TBD</span>.<br>
            Our last lost-work accident was on
            <input type="date" id="dateOfLastAccident">
            <button type="button" id="checkRecord">Check our safety  record</button>
        </h2>
        <h2 id="safetyRecord">
            It has been <span id="daysSinceLastAccident">TBD</span> days  since our last lost-work accident.
        </h2>
    </section> <!-- end main -->

    <footer>
        <p id="message">
            <!-- (an appropriate safety message will appear here) -->
        </p>
        <p><img src="images/genericBullet.png" alt="*"> Generic Company - we  do stuff</p>
    </footer>
</body>
</html>
4

5 回答 5

3

尽管 jQuery 弥补了 Javascript 的许多不足，并且虽然日期支持是 Javascript 的不足之一，但 jQuery 并不能帮助您处理日期。因此，正如这里的许多其他人所指出的那样，您为这项工作选择了错误的工具。

如果您按预期使用jQueryUI DatePicker（显示日期选择器）， jQueryUI DatePicker将为您完成大部分工作，并且在为您完成部分工作方面做得很差，例如仅计算日期之间的天数，因为它分解得相当糟糕.

我和其他人一起质疑你为什么不使用它 - 可能是你只是不知道它存在，或者你注意到它有点像怪物而且写得不好。这些都是有根据的指控，但我警告你，日期和日历是许多著名的绝望深渊开发者之一。人类认为某些事情很简单的致命区域，在您将自己的方式编写到细节中很久之后，计算机和现实就会猛烈抨击，那时已经为时已晚，无法减少损失并对此感觉良好。

如果你陷入的混乱不足以让你相信当你进入日期和日期格式时情况很糟糕并且只会变得更糟，这是我的旧 Quora 答案的一部分：

例如，如果您告诉我系统中的所有报价将在 10 天内到期，我可能会说很好，这很简单，并将到期任务估计为一个小时。如果我为此估计一周，你会说我疯了。

然后我尝试对其进行编码。它们何时到期、午夜或提供的时间？我如何使它们过期 - 我是否编写一个不断唤醒并过期旧报价的工作？当我让用户等待时，我是否等待用户检查它们并在那里过期旧报价？

然后我发现实际上是10个工作日。什么是工作日？如何正确提前日期以便跳过周末？假期安排是怎样的？闰年呢？什么时候是闰年？（提示：不是每 4 年一次。也不是每 4 年一次，除了每 100 年一次。）

好的，我们将为您构建一个界面来维护假期时间表，因为它可能会发生变化。

然后我发现您希望用户在报价到期前一天收到警告电子邮件。不是一天，是工作日。在他们的时区。确保它只在他们所在的营业时间内熄灭。

一个小时怎么变成了两周？

所以减少你的损失。使用 jQueryUI 日期选择器。

于 2013-10-08T01:53:19.717 回答
1

首先，您需要弄清楚“天数差异”的含义，例如

2013-10-11T00:00:01 - 2013-10-10T23:59:59 => 1 day or 2 seconds?

如果您可以忽略时间部分，则使用 UTC 值的天数差异相当简单：

// Expects ISO8601 format yyyy-mm-dd
function toUTCDate(s) {
  s = s.split(/\D/g);
  // Re-order arguments for other formats
  return new Date(Date.UTC(s[0], --s[1], s[2]));
}

function daysDiff(dateString) {
  var msInDay = 8.64e7
  var now = new Date();
  var nowUTC = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()); 
  return (nowUTC - toUTCDate(dateString)) / msInDay;
}

console.log(daysDiff('2013-09-30'));  // 8 for 8 October 2013

如果您有两个字符串日期，则daysDiff函数可以很简单：

function daysDiff(d0, d1) {
  return (toDate(d1) - toDate(d0)) / 8.64e7;
}
于 2013-10-08T02:35:43.660 回答
0

我建议您使用日期选择器，并重新考虑您为什么要编程。如果您没有使用正确的工具，因为它不是必需的，那么您不应该进行编程。

我觉得我不应该做你的功课，但是......这是一个粗略的想法（在普通 JS，而不是 jQuery 中）：

function funC(){
//here is the date today...
var d=new Date();
var i = getElementById("today")'
i.InnerHTML= d;
//here is a function for the days since the date
var e = getElementById("dateOfLastAccident");
var x = d-e;
var y = //insert your own algo to format dates
var a = getElementById("daysSinceLastAccident");
a.InnerHTML = y; 
}

请注意，这不会自行工作。你还有工作要做。是的，我在喊！！！

于 2013-10-08T01:43:41.157 回答
0

是的，你为什么不使用日期选择器？我不知道如何在 javascript 中计算日期格式的字符串，但我知道我们可以在 PHP 中计算日期格式的字符串。所以，如果你想使用 jquery，你也应该使用 ajax。（我不使用 datepicker，所以手动插入日期）它是 PHP：

<?php 
$datefr = strtotime($_REQUEST['datefr']);
$dateto = strtotime($_REQUEST['dateto']);

$result = ($dateto-$datefr)/(3600*24); //convert 'secon' to 'day'

echo $result;
?>

这是 HTML：

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
function calculate(){
var datefr = $("#datefr").val();
var dateto = $("#dateto").val();

$.ajax({
url : "caculate.php",
type: "POST",
data : "datefr="+datefr+"&dateto="+dateto,
success : 
function (data){
$("#result").val(data);
}
});

}
</script>
<input type="text" id="datefr"><input type="text" id="dateto">
<input type="button" onclick="calculate()" value="Calculate">
<br>
<input type="text" readonly id="result">day(s)

试试这个，你会看到结果！
（将插入的两个日期都必须是 'yyyy-mm-dd' 或 'dd-mm-yyyy' 格式）

于 2013-10-08T02:26:35.250 回答
0

如果您使用日期选择器，是的。需要吗，不需要。使用 Google Chrome 和您提供的 HTML ( input type='date')，您可以免费获得一个。您提供的注释掉的代码非常接近您需要的功能。我不会给你答案，而是给你指点，因为这是家庭作业。

$(':button').click(function(){
var start = $('#dateOfLastAccident').val();
var end = $('#today'); //Perhaps use what you used to popluate #today,this code won't get text or value, just an object

var startDate = new Date(start);
var endDate = new Date(end);

var diff = endDate - StartDate; //javasctipt is case sensative

var numDays = Math.floor( diff / 1000 /60 /60 /24 );
$('#daysSinceLastAccident'+ numDays)(); //not how jQuery sets text: http://api.jquery.com/text/
//dont forget to show what is hidden: http://api.jquery.com/show/

这是最基本的，但应该让你到达你需要去的地方。

还要了解 javascript 调试，使用警报进行调试，或者更好地登录到控制台进行调试，其中 javascript 控制台位于（chrome f12 中的提示是你的朋友）。

于 2013-10-08T03:35:51.400 回答