我想让用户使用 JavaScript 轻松地添加和减去日期,以便按日期浏览他们的条目。
日期格式为:“mm/dd/yyyy”。我希望他们能够单击“下一步”按钮,如果日期是:“06/01/2012”,那么在单击下一步时,它应该变为:“06/02/2012”。如果他们点击“上一个”按钮,那么它应该变成“2012 年 5 月 31 日”。
它需要跟踪闰年、一个月中的天数等。
有任何想法吗?
PS 使用 AJAX 从服务器获取日期不是一种选择,它有点滞后,也不是客户端想要的用户体验。
我想让用户使用 JavaScript 轻松地添加和减去日期,以便按日期浏览他们的条目。
日期格式为:“mm/dd/yyyy”。我希望他们能够单击“下一步”按钮,如果日期是:“06/01/2012”,那么在单击下一步时,它应该变为:“06/02/2012”。如果他们点击“上一个”按钮,那么它应该变成“2012 年 5 月 31 日”。
它需要跟踪闰年、一个月中的天数等。
有任何想法吗?
PS 使用 AJAX 从服务器获取日期不是一种选择,它有点滞后,也不是客户端想要的用户体验。
代码:
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);
使用日期选择器:
$("#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();
可能会派上用场的额外内容:
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 日期
您需要在 javascript Date 对象中使用getTime()
和setTime()
添加或减去时间。在达到 1、30、31 等月份的限制时,使用setDate()
and将导致错误。getDate()
使用 setTime 允许您以毫秒为单位设置偏移量,并让 Date 对象计算其余部分:
var now=new Date();
var yesterdayMs = now.getTime() - 1000*60*60*24*1; // Offset by one day;
now.setTime( yesterdayMs );
startdate.setDate(startdate.getDate() - daysToSubtract);
startdate.setDate(startdate.getDate() + daysToAdd);
JavaScriptDate
对象可以在这里提供帮助。
第一步是将这些字符串转换为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 日期了解闰年等。他们使用了一个理想化的“一天”概念,即86,400秒长。它们的基本价值是自大纪元(1970 年 1 月 1 日午夜)以来的毫秒数;对于大纪元之前的日期,它可以是负数。
更多关于MDN 页面的信息Date
。
您也可以考虑使用MomentJS 之类的库,这将有助于解析、进行日期数学运算、格式化......
//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/
可能这会有所帮助
<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);" />
在 javascript 中处理日期总是有点麻烦。我总是最终使用图书馆。Moment.js 和 XDate 都很棒:
小提琴:
var $output = $('#output'),
tomorrow = moment().add('days', 1);
$('<pre />').appendTo($output).text(tomorrow);
tomorrow = new XDate().addDays(-1);
$('<pre />').appendTo($output).text(tomorrow);
</p>
我喜欢的方式是,如果您有一个日期对象,您可以从中减去另一个日期对象以获得差异。日期对象基于某个日期的毫秒数。
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,您可以将日期对象转换为毫秒格式。
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 (in this thread) 已经回答了这个问题,但只是想强调这种方法的实用性,因为 90% 的答案都推荐 getDate 和 setDate 方法。
您可以使用本机 javascript Date 对象来跟踪日期。它会给你当前日期,让你跟踪日历特定的东西,甚至帮助你管理不同的时区。您可以添加和减去天/小时/秒来更改您正在使用的日期或计算新日期。
查看此对象参考以了解更多信息:
希望有帮助!
所有这些添加日期的功能都是错误的。您将错误的月份传递给 Date 函数。有关该问题的更多信息:http: //www.domdigger.com/blog/?p=9
我正在使用的东西(需要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);
});
我用过的最好的日期工具是date-fns有几个原因:
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)
简单而真棒。