我想讓用戶使用JavaScript輕鬆添加和減少日期,以便按日期瀏覽其條目。如何使用JavaScript添加/減少日期?
日期格式爲:「mm/dd/yyyy」。我希望他們能夠點擊「下一步」按鈕,如果日期是:「2012年6月1日」,然後點擊下一步,它應該變成:「2012年6月2日」。如果他們點擊'prev'按鈕,那麼它應該變成「05/31/2012」。
它需要跟蹤的閏年,在一個月的天數等
任何想法? P使用AJAX從服務器獲取日期不是一個選項,它有點滯後,而不是客戶需要的用戶體驗。
我想讓用戶使用JavaScript輕鬆添加和減少日期,以便按日期瀏覽其條目。如何使用JavaScript添加/減少日期?
日期格式爲:「mm/dd/yyyy」。我希望他們能夠點擊「下一步」按鈕,如果日期是:「2012年6月1日」,然後點擊下一步,它應該變成:「2012年6月2日」。如果他們點擊'prev'按鈕,那麼它應該變成「05/31/2012」。
它需要跟蹤的閏年,在一個月的天數等
任何想法? P使用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 Date
爲什麼要創建第三個新日期:var nd = new Date(newdate)??日期對象newdate由.setDate調整就好了,不是嗎? –
@KevinM yep,取決於目的,所以'nd'是新日期'var'是爲了清晰起見而創建的! ':)' –
您可以使用本機javascript Date對象來跟蹤日期。它會給你當前的日期,讓你跟蹤日曆特定的東西,甚至幫助你管理不同的時區。您可以添加和減少天/小時/秒來更改您正在使用的日期或計算新日期。
看看這個對象的引用,以瞭解更多:
希望幫助!
startdate.setDate(startdate.getDate() - daysToSubtract);
startdate.setDate(startdate.getDate() + daysToAdd);
可能這將有助於
<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對象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日期瞭解閏年等。他們使用「日」的理想化概念,即正好是 86,400秒。它們的基礎值是自大紀元以來的毫秒數(1970年1月1日午夜)。它可能是The Epoch之前的日期的負數。
更多關於MDN page on Date
。
你也可以考慮使用庫像MomentJS,這將有助於解析,做日期數學,格式化......
不要帶日期的人東西。只需使用moment.js並保存你的頭髮。 –
與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);
我看過times.js在日期間隔(差異)中計算無效月數的時間 - 例如,2014年2月13日至2016年3月15日期間 - moment.js會報告有26幾個月,大多數內置Date或DateTime類的內置語言都會報告與25相同的時間間隔,但XDate似乎可以正確計算該時間間隔。 – AndrewPK
//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/
所有這些添加日期的函數都是錯誤的。您將錯誤的月份傳遞給日期函數。有關該問題的更多信息: http://www.domdigger.com/blog/?p=9
您需要使用getTime()
和setTime()
添加或在。減去一個JavaScript Date對象的時間。到達月1,30,31,等的限制時,使用setDate()
和getDate()
會導致錯誤..
使用時刻設定允許您設置一個以毫秒爲單位偏移,並讓Date對象圖中的其餘部分:
var now=new Date();
var yesterdayMs = now.getTime() - 1000*60*60*24*1; // Offset by one day;
now.setTime(yesterdayMs);
我喜歡的方式,就是如果你有一個約會對象,你可以從中減去另一個日期對象獲得的差異。日期對象基於某個日期的毫秒數。
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你把日期對象到毫秒格式。
東西我使用(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);
});
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方法。
如果您使用的是datepicker。然後'dateValue = $ .datepicker.parseDate(「mm/dd/yy」,'06/01/2012');''dateValue.setDate(dateValue.getDate()+1);' –