使用查询计算日期之间的差异

时间:2013-10-08 01:33:38

标签: javascript jquery html web

我真的需要帮助计算两个日期之间的差异,它必须是整数的天数。这是我的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>

5 个答案:

答案 0 :(得分:3)

虽然jQuery弥补了Javascript的许多缺点,虽然Date支持是Javascript的缺点之一,但jQuery并没有帮助你处理日期。所以,你选择了错误的工具,正如许多其他人已经注意到的那样。

jQueryUI DatePicker如果您按照预期使用它(显示日期选择器),将为您做很多事情,并为您做一部分工作做得很差,比如计算日期之间的天数,因为它分解得相当差。

我和其他人一起质疑你为什么不使用它 - 可能你只是不知道它存在,或者你注意到它有点像怪物而且没有奇妙的写作。这些是有效的指控,但我警告你,日期和日历是许多着名的绝望开发者陷入其中的一个。人类认为某些事情变得简单的致命区域,以及计算机和现实在您编写细节之后很长一段时间都会la when when when when when when when。。。。。。。。。。。。。。。。。。。<<<<<。

如果您遇到的混乱不足以说服您在进入日期和日期格式时情况不好而且只会变得更糟,这是an old Quora answer of mine的一部分:

  

例如,如果您告诉我系统中的所有引号都会在10天后到期,我可能会说没问题,这很简单,并将到期任务估计为一小时。如果我估计这一周,你会叫我疯了。

     

然后我尝试编码。他们何时到期,午夜或提供时间?我如何使他们过期 - 我是否写了一份不断醒来并过期旧报价的工作?在用户等待的时候,我是否等待用户检查并过期旧报价?

     

然后我发现它实际上是10个工作日。什么是工作日?如何正确推进日期,以便我跳过周末?假期安排是什么时候?闰年怎么样?当IS是闰年? (提示:这不是每4年一次。除了每100年,它不是每4年一次。)

     

好的,我们将建立一个界面供您维持假期时间表,因为它可能会有所变化。

     

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

     

一小时如何变成2周?

所以减少你的损失。使用jQueryUI Datepicker。

答案 1 :(得分: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;
}

答案 2 :(得分: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; 
}

请注意,这不会自己工作。你仍然有工作要做。是的,我正在大肆宣传!!!

答案 3 :(得分:0)

雅,你为什么不使用datepicker? 我不知道如何在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'格式)

答案 4 :(得分: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是你的朋友)。