2012-06-07 31 views
63

我想讓用戶使用JavaScript輕鬆添加和減少日期,以便按日期瀏覽其條目。如何使用JavaScript添加/減少日期?

日期格式爲:「mm/dd/yyyy」。我希望他們能夠點擊「下一步」按鈕,如果日期是:「2012年6月1日」,然後點擊下一步,它應該變成:「2012年6月2日」。如果他們點擊'prev'按鈕,那麼它應該變成「05/31/2012」。

它需要跟蹤的閏年,在一個月的天數等

任何想法? P使用AJAX從服務器獲取日期不是一個選項,它有點滯後,而不是客戶需要的用戶體驗。

+1

如果您使用的是datepicker。然後'dateValue = $ .datepicker.parseDate(「mm/dd/yy」,'06/01/2012');''dateValue.setDate(dateValue.getDate()+1);' –

回答

83

代碼:

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);​ 

JSFiddle Demo

使用日期選擇器:

$("#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 Demo

可能出現得心應手額外的東西:

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

+0

爲什麼要創建第三個新日期:var nd = new Date(newdate)??日期對象newdate由.setDate調整就好了,不是嗎? –

+0

@KevinM yep,取決於目的,所以'nd'是新日期'var'是爲了清晰起見而創建的! ':)' –

1

您可以使用本機javascript Date對象來跟蹤日期。它會給你當前的日期,讓你跟蹤日曆特定的東西,甚至幫助你管理不同的時區。您可以添加和減少天/小時/秒來更改您正在使用的日期或計算新日期。

看看這個對象的引用,以瞭解更多:

Date

希望幫助!

14
startdate.setDate(startdate.getDate() - daysToSubtract); 


startdate.setDate(startdate.getDate() + daysToAdd); 
4

可能這將有助於

<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);" /> 
6

中的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,這將有助於解析,做日期數學,格式化......

+4

不要帶日期的人東西。只需使用moment.js並保存你的頭髮。 –

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); 

+0

我看過times.js在日期間隔(差異)中計算無效月數的時間 - 例如,2014年2月13日至2016年3月15日期間 - moment.js會報告有26幾個月,大多數內置Date或DateTime類的內置語言都會報告與25相同的時間間隔,但XDate似乎可以正確計算該時間間隔。 – AndrewPK

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/

32

您需要使用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); 
+2

這是爲我工作的唯一解決方案。當一個負數用於日指數時,Date構造函數似乎表現得很奇怪。我發現解決這個問題的唯一方法就是直接用毫秒工作 –

+0

最好的解決方案!使用setDate的所有其他解決方案應該是downvoted ...可能已經安全了我很多麻煩... – abimelex

+0

同上。這是最乾淨和更可靠的解決方案。謝謝@decasteljau – GR7

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你把日期對象到毫秒格式。

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
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方法。