如何使用JavaScript添加/减去日期?


70

我想让用户使用JavaScript轻松添加和减去日期,以便按日期浏览其条目。

日期的格式为:“ mm / dd / yyyy”。我希望他们能够单击“下一步”按钮,并且如果日期为:“ 06/01/2012”,则单击下一步时,它应变为:“ 06/02/2012”。如果他们单击“上一个”按钮,则它应变为“ 05/31/2012”。

它需要跟踪of年,每月的天数等。

有任何想法吗?

使用AJAX从服务器获取日期的PS不是一种选择,这有点滞后,也不是客户想要的用户体验。


1
如果您使用的是datepicker。然后dateValue = $.datepicker.parseDate("mm/dd/yy", '06/01/2012'); dateValue.setDate(dateValue.getDate()+1);
Priyank Patel 2012年

Answers:


94

码:

var date = new Date('2011', '01', '02');
alert('the original date is ' + date);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() - 7); // minus the date

var nd = new Date(newdate);
alert('the new date is ' + nd);

使用Datepicker:

$("#in").datepicker({
    minDate: 0,
    onSelect: function(dateText, inst) {
       var actualDate = new Date(dateText);
       var newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate()+1);
        $('#out').datepicker('option', 'minDate', newDate );
    }
});

$("#out").datepicker();​

JSFiddle演示

可能会派上用场的其他东西:

getDate()   Returns the day of the month (from 1-31)
getDay()    Returns the day of the week (from 0-6)
getFullYear()   Returns the year (four digits)
getHours()  Returns the hour (from 0-23)
getMilliseconds()   Returns the milliseconds (from 0-999)
getMinutes()    Returns the minutes (from 0-59)
getMonth()  Returns the month (from 0-11)
getSeconds()    Returns the seconds (from 0-59)

良好连结: MDN日期


为什么要创建第三个新日期:var nd = new Date(newdate)?由.setDate调整的日期对象newdate很好,不是吗?
CSSian 2014年

@KevinM是的,取决于目的,因此只是为了清楚起见才创建了nd新日期var:)
Tats_innit

39

您需要在javascript Date对象中使用getTime()setTime()添加或减去时间。使用setDate()getDate()达到第1、30、31等个月的限制时,会导致错误。

使用setTime允许您设置偏移量(以毫秒为单位),并让Date对象确定其余部分:

var now=new Date();
var yesterdayMs = now.getTime() - 1000*60*60*24*1; // Offset by one day;
now.setTime( yesterdayMs );

2
这是唯一对我有用的解决方案。当对日期索引使用负数时,Date构造函数的行为似乎很奇怪。我找到解决它是用毫秒工作直接的唯一途径
杰克·奥尼尔

最好的解决方案!使用setDate的所有其他解决方案都应该被否决...可能使我免于很多麻烦...
Karl Adler

同上。这是最干净,更可靠的解决方案。谢谢@decasteljau
GR7


7

JavaScript Date对象可以在这里提供帮助。

第一步是将这些字符串转换为Date实例。这很容易做到:

var str = "06/07/2012"; // E.g., "mm/dd/yyyy";
var dt = new Date(parseInt(str.substring(6), 10),        // Year
                  parseInt(str.substring(0, 2), 10) - 1, // Month (0-11)
                  parseInt(str.substring(3, 5), 10));    // Day

然后,您可以进行各种有用的计算。JavaScript日期了解leap年。他们用“天”,这是一个理想化的概念正好86,400秒长。它们的基本值是自大纪元(1970年1月1日午夜)以来的毫秒数;对于大纪元之前的日期,它可以是负数。

有关MDN页面的Date更多信息,请参见

您可能还会考虑使用像MomentJS这样的库,它将有助于解析,进行日期数学运算,格式化...


4
不要和约会对象在一起。只需使用moment.js并保存头发即可。
Valamas

现在是2020年,MomentJS开发人员现在认为这是一个遗留项目。
Diomidis Spinellis

1
@DiomidisSpinellis-嘿,突发新闻!:-)(从字面上看,是上个月。)但请注意,它并没有派上用场,他们只是没有添加任何新功能。他们仍在维护它。多年来,我一直没有感觉到需要新功能,因此...无论如何,希望能够Temporal以良好的速度向前发展,但是它的API仍然是一个(略有变化的)目标……
TJ Crowder

同意 如果您已经在使用MomentJS,则无需跳船,但除非有非常迫切的需求,否则我不会在新项目中采用它。
Diomidis Spinellis

4
//In order to get yesterday's date in mm/dd/yyyy.


function gimmeYesterday(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() - parseInt(toAdd));
var yesterDAY = (d.getMonth() +1) + "/" + d.getDate() + "/" + d.getFullYear();
$("#endDate").html(yesterDAY);
        }
$(document).ready(function() {
gimmeYesterday(1);
});

您可以在这里尝试:http : //jsfiddle.net/ZQAHE/


3

也许这可以帮助

    <script type="text/javascript" language="javascript">
        function AddDays(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() + parseInt(toAdd));

            document.getElementById("result").innerHTML = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear();
        }

function SubtractDays(toAdd) {
            if (!toAdd || toAdd == '' || isNaN(toAdd)) return;
            var d = new Date();
            d.setDate(d.getDate() - parseInt(toAdd));

            document.getElementById("result").innerHTML = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear();
        }
    </script>
    ---------------------- UI ---------------
        <div id="result">
        </div>
        <input type="text" value="0" onkeyup="AddDays(this.value);" />
        <input type="text" value="0" onkeyup="SubtractDays(this.value);" />

3

在javascript中使用日期总是很麻烦。我总是最终使用图书馆。Moment.js和XDate都很棒:

http://momentjs.com/

http://arshaw.com/xdate/

小提琴:

http://jsfiddle.net/39fWa/

var $output = $('#output'),
    tomorrow = moment().add('days', 1);

$('<pre />').appendTo($output).text(tomorrow);

tomorrow = new XDate().addDays(-1);

$('<pre />').appendTo($output).text(tomorrow);


我见过moment.js在日期间隔(diff)中计算无效月份数的时间,例如,在2014年2月13日至2016年3月15日之间,moment.js将报告有26个月当大多数具有内置Date或DateTime类的语言将报告与25相同的间隔时。XDate似乎可以正确计算该间隔。
AndrewPK

2

我喜欢的方式是,如果您有一个日期对象,则可以从中减去另一个日期对象以得到差值。日期对象基于从特定日期开始的毫秒数。

var date1 = new Date(2015, 02, 18); // "18/03/2015", month is 0-index
var date2 = new Date(2015, 02, 20); // "20/03/2015"

var msDiff = date2 - date1; // 172800000, this is time in milliseconds
var daysDiff = msDiff / 1000 / 60 / 60 / 24; // 2 days

这就是您减去日期的方式。现在是否要添加它们?date1 + date2给出错误。但是如果我想获取以毫秒为单位的时间,可以使用:

var dateMs = date1 - 0;
// say I want to add 5 days I can use
var days = 5;
var msToAdd = days * 24 * 60 * 60 * 1000; 
var newDate = new Date(dateMs + msToAdd);

通过减去0,您可以将日期对象转换为毫秒格式。


2
var date = new Date('your date string here'); // e.g. '2017-11-21'

var newdate = new Date(date.getTime() + 24*60*60*1000 * days) // days is the number of days you want to shift the date by

这是数月和数年之间相减的唯一可靠解决方案。在花了太多时间浪费在getDate和setDate方法上,试图针对月/年轮班进行调整之后,就意识到了这一点。

decasteljau(在此线程中)已经回答了这个问题,但只想强调此方法的实用性,因为那里有90%的答案都建议使用getDate和setDate方法。


1

您可以使用本地javascript Date对象来跟踪日期。它将为您提供当前日期,让您跟踪日历特定内容,甚至帮助您管理不同的时区。您可以添加和减去天/小时/秒来更改正在使用的日期或计算新日期。

查看此对象参考以了解更多信息:

日期

希望有帮助!



0

我正在使用某种东西(需要jquery),在我的脚本中,我今天需要它,但是您当然可以相应地对其进行编辑。

HTML:

<label>Date:</label><input name="date" id="dateChange" type="date"/>
<input id="SubtractDay" type="button" value="-" />
<input id="AddDay" type="button" value="+" />

JavaScript:

    var counter = 0;

$("#SubtractDay").click(function() {
    counter--;
    var today = new Date();
    today.setDate(today.getDate() + counter);
    var formattedDate = new Date(today);
    var d = ("0" + formattedDate.getDate()).slice(-2);
    var m = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
    var y = formattedDate.getFullYear();
    $("#dateChange").val(d + "/" + m + "/" + y);
});
$("#AddDay").click(function() {
    counter++;
    var today = new Date();
    today.setDate(today.getDate() + counter);
    var formattedDate = new Date(today);
    var d = ("0" + formattedDate.getDate()).slice(-2);
    var m = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
    var y = formattedDate.getFullYear();
    $("#dateChange").val(d + "/" + m + "/" + y);
});

jsfiddle


0

我使用的最佳日期实用程序是date-fns,其原因如下:

  • 使用原生JavaScript Date格式。
  • 不变的;使用纯函数构建,并且总是返回一个新的日期实例,而不是更改传递的实例。
  • 模块化 仅导入您需要的功能。

包管理器:

"date-fns": "^1.30.1"

码:

import { addDays, subDays } from 'date-fns'

let today = new Date()
let yesterday = subDays(today, 1)
let tomorrow = addDays(today, 1)

简单又棒。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.