2012-06-07 6 views
63

Я хочу, чтобы пользователи легко добавляли и вычитали даты с помощью JavaScript, чтобы просматривать их записи по дате.Как добавить/вычесть даты с помощью JavaScript?

Даты относятся к формату: «мм/дд/гггг». Я хочу, чтобы у них была возможность нажать кнопку «Далее», и если дата: «06/01/2012», то при следующем нажатии она должна стать: «06/02/2012». Если они нажмут кнопку «prev», тогда он должен стать «05/31/2012».

Необходимо следить за високосных лет, количество дней в месяце и т.д.

Любые идеи?

P.S, использующий 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

Использование 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 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

Зачем создавать 3-ю новую дату : var nd = new Date (newdate) ?? Объект date, newdate, с поправкой на .setDate, отлично, не так ли? –

+0

@KevinM yep, зависит от цели, поэтому 'nd' является новой датой' var', только что созданной для ясности! ':)' –

1

Вы можете использовать собственный объект Date javascript для отслеживания дат. Он даст вам текущую дату, позволит вам отслеживать конкретные календарные данные и даже помогать вам управлять разными часовыми поясами. Вы можете добавлять и судить дни/часы/секунды, чтобы изменить дату, с которой вы работаете, или рассчитать новые даты.

взглянуть на эту ссылку на объект, чтобы узнать больше:

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 секунд. Их базовая ценность - это количество миллисекунд со времен Эпохи (полночь, 1 января 1970 года); это может быть отрицательное число для дат до эпохи.

Подробнее о MDN page on Date.

Вы могли бы также рассмотреть вопрос об использовании библиотеки как MomentJS, который поможет разбору, делая даты математика, форматирование ...

+4

не делайте вокруг людей с датами. Просто используйте moment.js и сохраните свои волосы. –

3

Работы с датами в JavaScript всегда немного хлопот. Я всегда использую библиотеку. Moment.js и XDate оба велики:

http://momentjs.com/

http://arshaw.com/xdate/

Fiddle:

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

Я видел моменты, когда moment.js вычисляет недопустимое количество месяцев в течение интервала дат (diff) - например, между датами 13 февраля 2014 года и 15 марта 2016 года - момент.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/

1

Все эти функции для добавления даты неверны. Вы отправляете неправильный месяц функции Date. Более подробная информация об этой проблеме: http://www.domdigger.com/blog/?p=9

32

Вы должны использовать getTime() и setTime() добавлять или вычитать время в JavaScript Object Date. Использование setDate() и getDate() приведет к ошибкам при достижении границы месяцы 1, 30, 31, и т.д ..

Использование SetTime позволяет установить смещение в миллисекундах, и пусть дата объекта Рисунок остальное:

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

Это единственное решение, которое сработало для меня. Конструктор Date, кажется, ведет себя странно, когда отрицательное число используется для индекса дня. Я нашел единственный способ разрешить это было работать с миллисекундами напрямую –

+0

Лучшее решение !. Все остальные решения, использующие setDate, должны быть опущены ... могли бы защитить меня от многих проблем ... – abimelex

+0

То же. Это самое чистое и надежное решение. Спасибо @decasteljau – GR7

2

Как мне нравится, если у вас есть объект даты, вы можете вычесть из него другой объект даты, чтобы получить разницу. Объекты Date основаны на миллисекундах с определенной даты.

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.

Смежные вопросы