Вывод количества дней от даты

@Тайгер · Регистрация: 06.01.2019

Студворк — интернет-сервис помощи студентам

1) Скрипт, который выводит количество дней ОТ определённой даты (не обратный отсчёт), назначение скрипта — описано ниже.
2) Количество дней должно выводиться в формате: год-месяц-день.
То есть должно выводиться следующее:

Я не пью уже 1 год 2 месяца и 3 дня

Что-то вроде приложения «I Am Sober» на яблокофоне (https://apps.apple.com/ua/app/... 04239?l=ru). Но у меня яблокофона нет, да и не надо мне это на телефоне. Мне нужна такая HTML-страничка на компе.
Нашёл в сети скрипт, который показывает количество дней, но не форматирует дату в красивом виде «столько-то лет, месяцев, дней».

@DrType · 01.01.2022, 15:47

Вот что я написал:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function get_gap(date1, date2) {
  const res = {};
  const d = new Date(+date1);
  const y1 = date1.getFullYear(),
    y2 = date2.getFullYear();
  const m1 = date1.getMonth(),
    m2 = date2.getMonth();
  d.setFullYear(y2);
  res.years = y2 - y1 - (+d > +date2);
  if (+d > +date2) {
    d.setFullYear(y2 - 1);
  }
  let months = 0;
  while (+d <= +date2) {
    d.setMonth(d.getMonth() + 1);
    months++;
  }
  if (+d > +date2) {
    d.setMonth(d.getMonth() - 1);
    months--;
  }
  res.months = months;
  res.days = Math.floor((+date2 - +d) / (1000 * 60 * 60 * 24));
  return res;
}
function formatter(data) {
  const rgxps = [/^[2-9]?1$/, /^[2-9]?[2-4]$/, /1\d$|^[2-9]?[5-9]$|0$/];
  const years = ["год", "года", "лет"],
    months = ["месяц", "месяца", "месяцев"],
    days = ["день", "дня", "дней"];
  return `Я не пью уже ${data.years} ${
    years[rgxps.findIndex((r) => r.test(data.years + ""))]
  } ${data.months} ${
    months[rgxps.findIndex((r) => r.test(data.months + ""))]
  } и ${data.days} ${days[rgxps.findIndex((r) => r.test(data.days + ""))]}`;
}
let d1 = new Date("2002-01-02"),
  d2 = new Date(Date.now());
console.log(formatter(get_gap(d1, d2)));

@Тайгер · 01.01.2022, 15:52 **[ТС]**

Я ничего не понимаю в JavaScript. Заключил ваш код в в теги <script> и включил в HTML-страницу (в теге <body>) — ничего не выводится, пустая страница.

@DrType · 01.01.2022, 15:55

Пока можете заменить в 39 строчке console.log на alert. А вообще — могу для демонстрации прикрутить сюда календарь с выбором даты и выводом результата на страницу.

@Тайгер · 01.01.2022, 16:00 **[ТС]**

Замечательно! Единственная проблема — это выводится в alert-окне, а мне надо чтобы выводило в HTML-элемент на странице, например, по ID, типа <p id="data"></p>.
И ещё вопрос: у вас дата 2002-01-02 для отсчёта, можно расшифровку, где тут день, а где месяц? И вроде бы в JS месяцы идут от нуля? То есть декабрь будет одиннадцатым месяцем?
UPD: нет, проверил, в вашем коде будет 12-тым.

@DrType · 01.01.2022, 16:07

В HTML-разметку добавьте

HTML5
1
2
<input type="date">
<p id="output"></p>

В конец скрипта добавьте

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
document.body.onload = function () {
  document.querySelector("[type=date]").addEventListener("input", function (e) {
    const date = new Date(this.value);
    if (+date > Date.now()) {
      document.getElementById("output").textContent = "";
    } else {
      document.getElementById("output").textContent = formatter(
        get_gap(date, new Date(Date.now()))
      );
    }
  });
};

Предполагается, что в поле вы вводите дату, когда перестали пить.

Добавлено через 1 минуту
Надеюсь, в работе программки нигде не возникнет проблем, связанных с разницей между локальным и всемирным временем.

@Тайгер · 01.01.2022, 16:11 **[ТС]**

В принципе, это то, что мне надо, за исключением двух моментов:
1) Мне не надо выбор даты по календарю, дата будет всегда одна — когда бросил пить, т.е. её надо указать только один раз в теле скрипта. Просто при открытии страницы показывает надпись — Я не пью бла-бла-бла.
2) Сначала выскакивает алерт-окно — его приходится закрывать. Правда, если вырезать строку с alert (39), то работает как надо. Но актуален пункт первый.
3) Проблемы с разницей времени не вижу. У меня всё показывает правильно.

@DrType · 01.01.2022, 16:29

2) Тогда можно оставить блок id="output", и вместо alert прописать

JavaScript
39
document.getElementById("output").textContent = formatter(get_gap(d1, d2));

3) Проблема не видна, но она есть. Допустим, вы оказались в другом часовом поясе. В некоторые моменты (в районе полуночи) календарная дата может различаться в разных поясах. А дата отсчёта жёстко фиксирована в скрипте и не меняется. Поэтому скрипт будет выдавать разные результаты в зависимости от того, в каком часовом поясе вы находитесь... Можно решить проблему, для этого надо будет использовать другой способ ввода (дату отсчёта ввести один раз, затем хранить в localStorage), также надо мне будет указать часы в конструкторе даты, использовать UTC()...

Да, дату прописывайте в привычном нам формате — 01 здесь это первый месяц (январь) и т. д.
2002-01-02 — ГГГГ-ММ-ДД.

@Тайгер · 01.01.2022, 16:41 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script  type="text/javascript">
function get_gap(date1, date2) {
  const res = {};
  const d = new Date(+date1);
  const y1 = date1.getFullYear(),
    y2 = date2.getFullYear();
  const m1 = date1.getMonth(),
    m2 = date2.getMonth();
  const d1 = date1.getDate(),
    d2 = date2.getDate();
  d.setFullYear(y2);
  res.years = y2 - y1 - (+d > +date2);
  if (+d > +date2) {
    d.setFullYear(y2 - 1);
  }
  let months = 0;
  while (+d <= +date2) {
    d.setMonth(d.getMonth() + 1);
    months++;
  }
  if (+d > +date2) {
    d.setMonth(d.getMonth() - 1);
    months--;
  }
  res.months = months;
  res.days = Math.floor((+date2 - +d) / (1000 * 60 * 60 * 24));
  return res;
}
function formatter(data) {
  const rgxps = [/^[2-9]?1$/, /^[2-9]?[2-4]$/, /1\d$|^[2-9]?[5-9]$|0$/];
  const forms = new Map([
    [rgxps[0], 0],
    [rgxps[1], 1],
    [rgxps[2], 2],
    [rgxps[3], 2]
  ]);
  const years = ["год", "года", "лет"],
    months = ["месяц", "месяца", "месяцев"],
    days = ["день", "дня", "дней"];
  return `Я не пью уже ${data.years} ${
    years[rgxps.findIndex((r) => r.test(data.years + ""))]
  } ${data.months} ${
    months[rgxps.findIndex((r) => r.test(data.months + ""))]
  } и ${data.days} ${days[rgxps.findIndex((r) => r.test(data.days + ""))]}`;
}
let d1 = new Date("2021-12-18"),
  d2 = new Date(Date.now());
document.getElementById("output").textContent = formatter(get_gap(d1, d2));
 
document.body.onload = function () {
  document.querySelector("[type=date]").addEventListener("input", function (e) {
    const date = new Date(this.value);
    if (+date > Date.now()) {
      document.getElementById("output").textContent = "";
    } else {
      document.getElementById("output").textContent = formatter(
        get_gap(date, new Date(Date.now()))
      );
    }
  });
};
</script>

HTML5
1
<p id="output"></p>

Этот код не работает — пустая страница.

@DrType · 01.01.2022, 16:50

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function get_gap(date1, date2) {
  const res = {};
  const d = new Date(+date1);
  const y1 = date1.getFullYear(),
    y2 = date2.getFullYear();
  const m1 = date1.getMonth(),
    m2 = date2.getMonth();
  d.setFullYear(y2);
  res.years = y2 - y1 - (+d > +date2);
  if (+d > +date2) {
    d.setFullYear(y2 - 1);
  }
  let months = 0;
  while (+d <= +date2) {
    d.setMonth(d.getMonth() + 1);
    months++;
  }
  if (+d > +date2) {
    d.setMonth(d.getMonth() - 1);
    months--;
  }
  res.months = months;
  res.days = Math.floor((+date2 - +d) / (1000 * 60 * 60 * 24));
  return res;
}
function formatter(data) {
  const rgxps = [/^[2-9]?1$/, /^[2-9]?[2-4]$/, /1\d$|^[2-9]?[5-9]$|0$/];
  const years = ["год", "года", "лет"],
    months = ["месяц", "месяца", "месяцев"],
    days = ["день", "дня", "дней"];
  return `Я не пью уже ${data.years} ${
    years[rgxps.findIndex((r) => r.test(data.years + ""))]
  } ${data.months} ${
    months[rgxps.findIndex((r) => r.test(data.months + ""))]
  } и ${data.days} ${days[rgxps.findIndex((r) => r.test(data.days + ""))]}`;
}
const d1 = new Date("2021-12-18"),
  d2 = new Date(Date.now());
document.body.onload = () => {
  document.getElementById("output").textContent = formatter(get_gap(d1, d2));
};

@Тайгер · 01.01.2022, 16:57 **[ТС]**

Excellent!!! То, что надо!!! Благодарности DrType! Теперь у меня есть страничка, которая будет показывать мне в красивом виде, сколько я не пью.
Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@Тайгер 0 / 0 / 0 Регистрация: 06.01.2019 Сообщений: 23

	Вывод количества дней от даты 01.01.2022, 14:02. Показов 1602. Ответов 10 Метки вывод значения, дата и время, формат дата (Все метки) 1) Скрипт, который выводит количество дней ОТ определённой даты (не обратный отсчёт), назначение скрипта — описано ниже. 2) Количество дней должно выводиться в формате: год-месяц-день. То есть должно выводиться следующее: Я не пью уже 1 год 2 месяца и 3 дня Что-то вроде приложения «I Am Sober» на яблокофоне (https://apps.apple.com/ua/app/... 04239?l=ru). Но у меня яблокофона нет, да и не надо мне это на телефоне. Мне нужна такая HTML-страничка на компе. Нашёл в сети скрипт, который показывает количество дней, но не форматирует дату в красивом виде «столько-то лет, месяцев, дней». 0

@Тайгер 0 / 0 / 0 Регистрация: 06.01.2019 Сообщений: 23
	01.01.2022, 15:52 [ТС]
	Я ничего не понимаю в JavaScript. Заключил ваш код в в теги <script> и включил в HTML-страницу (в теге <body>) — ничего не выводится, пустая страница. 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	01.01.2022, 15:55
	Пока можете заменить в 39 строчке `console.log` на `alert`. А вообще — могу для демонстрации прикрутить сюда календарь с выбором даты и выводом результата на страницу. 1

@Тайгер 0 / 0 / 0 Регистрация: 06.01.2019 Сообщений: 23
	01.01.2022, 16:00 [ТС]
	Замечательно! Единственная проблема — это выводится в alert-окне, а мне надо чтобы выводило в HTML-элемент на странице, например, по ID, типа <p id="data"></p>. И ещё вопрос: у вас дата 2002-01-02 для отсчёта, можно расшифровку, где тут день, а где месяц? И вроде бы в JS месяцы идут от нуля? То есть декабрь будет одиннадцатым месяцем? UPD: нет, проверил, в вашем коде будет 12-тым. 0

@Тайгер 0 / 0 / 0 Регистрация: 06.01.2019 Сообщений: 23
	01.01.2022, 16:11 [ТС]
	В принципе, это то, что мне надо, за исключением двух моментов: 1) Мне не надо выбор даты по календарю, дата будет всегда одна — когда бросил пить, т.е. её надо указать только один раз в теле скрипта. Просто при открытии страницы показывает надпись — Я не пью бла-бла-бла. 2) Сначала выскакивает алерт-окно — его приходится закрывать. Правда, если вырезать строку с alert (39), то работает как надо. Но актуален пункт первый. 3) Проблемы с разницей времени не вижу. У меня всё показывает правильно. 0

@Тайгер 0 / 0 / 0 Регистрация: 06.01.2019 Сообщений: 23
	01.01.2022, 16:57 [ТС]
	Excellent!!! То, что надо!!! Благодарности DrType! Теперь у меня есть страничка, которая будет показывать мне в красивом виде, сколько я не пью. Спасибо. 0

Опции темы

Вывод количества дней от даты

Решение