How can I add 1 day to current date?
I have a current Date object that needs to be incremented by one day using the JavaScript Date object. I have the following code in place:
How can I add one day to it? I’ve added +1 to getUTCDay() and getUTCDate() but it doesn’t display ‘Sunday’ for day , which I am expecting to happen.
Does date: (date.getUTCDate()+1) not work (works for me)? It’s possible that there is a naming conflict with date (as Date()-Object and as Object-Key. Have you tried calling the Date()-Object different?
So it’s not the 7 Apr you need (what is ‘add next day’ to me), it’s the Sunday . Remember to add the +1 both in day: and date: (or, as the current answer mentions, before).
11 Answers 11
To add one day to a date object:
var date = new Date(); // add a day date.setDate(date.getDate() + 1); See duplicate question: stackoverflow.com/questions/3674539/…. This answer is good, but does not account for DST. There are 2 days of the year that do not have 24 hours.
@Jess—it depends on how you want changes over DST represented. The question asked how to add one to the date, that’s exactly what the above answer does. Adding 24 hours doesn’t necessarily increment that date, adding one to the local date using setDate always does.
Of course not! You start with a UTC time, then essentially convert it to local, add a day, then convert it back to UTC. So one day was added to the local date, but only 23 hrs the UTC time. If you add 1 to the UTC date, you’ll get back 01:00:00 local time. That behaviour isn’t unique to daylight saving, it’s a consequence of using three different timezones.
Aha. I didn’t realize getDate was converting from UTC to local time. a.setUTCDate(a.getUTCDate() + 1);
In my humble opinion the best way is to just add a full day in milliseconds, depending on how you factor your code it can mess up if you are on the last day of the month.
For example Feb 28 or march 31.
Here is an example of how I would do it:
var current = new Date(); //'Mar 11 2015' current.getTime() = 1426060964567 var followingDay = new Date(current.getTime() + 86400000); // + 1 day in ms followingDay.toLocaleDateString(); Imho this insures accuracy
Here is another example. I do not like that. It can work for you but not as clean as example above.
var today = new Date('12/31/2015'); var tomorrow = new Date(today); tomorrow.setDate(today.getDate()+1); tomorrow.toLocaleDateString(); So some of you have had gripes about my millisecond approach because of day light savings time. So I’m going to bash this out. First, Some countries and states do not have Day light savings time. Second Adding exactly 24 hours is a full day. If the date number does not change once a year but then gets fixed 6 months later I don’t see a problem there. But for the purpose of being definite and having to deal with allot the evil Date() I have thought this through and now thoroughly hate Date. So this is my new Approach.
var dd = new Date(); // or any date and time you care about var dateArray = dd.toISOString().split('T')[0].split('-').concat( dd.toISOString().split('T')[1].split(':') ); // ["2016", "07", "04", "00", "17", "58.849Z"] at Z Now we have our Official Valid international Date Object clearly written out at Zulu meridian. Now to change the date
dd.setDate(dd.getDate()+1); // this gives you one full calendar date forward tomorrow.setDate(dd.getTime() + 86400000);// this gives your 24 hours into the future. do what you want with it. Календарь на JavaScript
В этой статье вы прочитаете как сделать календарь на чистом JavaScript, тут будет совсем не большая программа, и только основное.
Также можете прочитать статью: «Круглые часы на Canvas».
Делаем календарь на JavaScript:
Суть программы будет в том, что мы сделаем функцию которая смотрит какая сейчас дата и строит календарь месяца который сейчас идёт.
HTML:
В HTML просто нужно добавить блок для рендеринга.
То есть тут просто создали блок div , с идентификатором calendar .
CSS:
В CSS всё также очень просто, надо сделать так, чтобы вид был более менее.
Если вы хорошо знаете CSS, то для вас всё понятно, иначе, посмотрите наш учебник на эту тему.
JavaScript:
Теперь перейдём к самому главному, это коду на JavaScript, у нас будет две функции, первая главная, для создания календаря, вторая, берёт номер недели.
Давайте не много разберём этот код, в начале мы получаем сегодняшней день, и перебразуем номер месяца в понятный для JS формат.
Все остальные действия дальше нужны только для рендеринга картинки, их особо нет смысла рассматривать, вы сами сможете это понять.
В этой функции берём день в неделе, можете заметить, что если нам попадается ноль, то мы присваиваем семь, это нужно для того, что бы менять строку в таблице.
Потом запускаем функцию createCalendar() , и вот что у нас получается.
На этом закончим теперь мы сделали календарь на HTML и JS, как вы видите, это очень простой код и показывает только один месяц, который проходит сейчас, но если его не много модернизировать, то может получится очень функциональное приложение.
Вывод:
В этой вы прочитали как сделать календарь на чистом JavaScript, думаю вам было просто, единственное стоит сказать, что этот код был взят с этой ссылки.
Javascript календарь одного дня
Этот виджет календаря не требует внешних библиотек, поскольку он написан исключительно на JavaScript, CSS и HTML. Из внешних источников используется только Font Awesome CSS для клавиш навигации, но при желании их тоже можно заменить на собственные.
Структура HTML
В HTML загрузите Reset CSS , чтобы очистить форматирование HTML-элементов в браузере по умолчанию. Аналогичным образом загрузите Font Awesome CSS для значков, добавив следующие ссылки CDN в тег заголовка вашей веб-страницы.
Нам нужен элемент div , в котором календарь будет отображаться динамически. Создайте элемент div с именем класса calendar-wrapper , разместите кнопки смены месяца «следующий/предыдущий» и элемент div с идентификатором divCal .
Не забудьте добавить ссылку на будущий файл .js , где будет основной функционал.
Вы можете разместить приведенную выше HTML-структуру в любом месте вашей веб-страницы/приложения, где вы хотите создать виджет календаря.
Создание стилей CSS
После создания оболочки в HTML пришло время настроить макет календаря. Выберите класс calendar-wrapper и определите его ширину, поля, отступы и свойства границы следующим образом. Вы можете установить собственный цвет фона по вашему выбору.
Функция календаря генерирует даты, расположенные в виде таблицы. Таким образом, вы можете легко настроить макет календаря, выбрав элемент таблицы. Ниже приведены стили по умолчанию, вы можете изменить их в соответствии с вашими потребностями.
Класс not-current для элемента td указывает отключенные даты в календаре. Если вы хотите скрыть эти даты, вы можете использовать свойство видимости CSS со «скрытым» значением.
Если вы хотите настроить текущую дату, вы можете выбрать today класс и определить для него стили CSS.
В календаре используется значок Font Awesome внутри кнопок. Эти кнопки навигации по календарю можно настроить, выбрав их по идентификатору. Вы можете установить собственный цвет фона, размер шрифта и значок для этих кнопок в соответствии с вашими потребностями.
#btnPrev < float: left; margin-bottom: 20px; >#btnPrev:before < content: '\f104'; font-family: FontAwesome; padding-right: 4px; >#btnNext < float: right; margin-bottom: 20px; >#btnNext:after < content: '\f105'; font-family: FontAwesome; padding-left: 4px; >#btnPrev, #btnNext
Также вы можете определить стиль наведения для кнопок «следующая/предыдущая».
#btnPrev:hover, #btnNext:hover
Добавляем JavaScript
На этом этапе мы можем перейти к главному и добавить функцию JavaScript календаря в свой проект перед закрытием тега body .
var Cal = function(divId) < //Сохраняем идентификатор div this.divId = divId; // Дни недели с понедельника this.DaysOfWeek = [ 'Пн', 'Вт', 'Ср', 'Чтв', 'Птн', 'Суб', 'Вск' ]; // Месяцы начиная с января this.Months =['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; //Устанавливаем текущий месяц, год var d = new Date(); this.currMonth = d.getMonth(); this.currYear = d.getFullYear(); this.currDay = d.getDate(); >; // Переход к следующему месяцу Cal.prototype.nextMonth = function() < if ( this.currMonth == 11 ) < this.currMonth = 0; this.currYear = this.currYear + 1; >else < this.currMonth = this.currMonth + 1; >this.showcurr(); >; // Переход к предыдущему месяцу Cal.prototype.previousMonth = function() < if ( this.currMonth == 0 ) < this.currMonth = 11; this.currYear = this.currYear - 1; >else < this.currMonth = this.currMonth - 1; >this.showcurr(); >; // Показать текущий месяц Cal.prototype.showcurr = function() < this.showMonth(this.currYear, this.currMonth); >; // Показать месяц (год, месяц) Cal.prototype.showMonth = function(y, m) < var d = new Date() // Первый день недели в выбранном месяце , firstDayOfMonth = new Date(y, m, 7).getDay() // Последний день выбранного месяца , lastDateOfMonth = new Date(y, m+1, 0).getDate() // Последний день предыдущего месяца , lastDayOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate(); var html = '
| ' + this.Months[m] + ' ' + y + ' | '; html += '||||||
| '; k++; > > // Записываем текущий день в цикл var chk = new Date(); var chkY = chk.getFullYear(); var chkM = chk.getMonth(); if (chkY == this.currYear && chkM == this.currMonth && i == this.currDay) < html += ' | '; > else < html += ' | '; > // закрыть строку в воскресенье if ( dow == 0 ) < html += ' | '; k++; > > i++; >while(i '; // Записываем HTML в div document.getElementById(this.divId).innerHTML = html; >; // При загрузке окна window.onload = function() < // Начать календарь var c = new Cal("divCal"); c.showcurr(); // Привязываем кнопки «Следующий» и «Предыдущий» getId('btnNext').onclick = function() < c.nextMonth(); >; getId('btnPrev').onclick = function() < c.previousMonth(); >; > // Получить элемент по id function getId(id) Если вам нужно добавить больше функциональности, вы можете соответствующим образом изменить код. Назначение каждой переменной, объекта и функции прокомментировано, поэтому вы можете легко понять, что делает функция календаря. ЗаключениеНу вот мы наконец и перевернули наш календарь. Это довольно простой, но в то же время гибкий пример использования JS в веб-разработке. Виджет написан на чистом JS. При желании вы даже можете исключить из него Font Awesome CSS, чтобы убрать весь внешний код. Это никак не повлияет на функционал. Оформление можно сделать любым на усмотрение, а функционал календаря расширить, добавив собственные функции на ваше усмотрение. | |||