Как к дате добавить "n" дней?

@бел ка · Регистрация: 23.02.2023

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

есть какая то дата например 10.02.2024, надо получить несколько дат,

дата1 = дата + 5 дней

дата2 = дата + 73 дня

дата3 = дата - 19 дней

дата4 = дата - 75 дней

как это сделать?

Добавлено через 7 минут

PHP/HTML
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title>Chinese Zodiac</title>
    <style>
        @import url(https://db.onlinewebfonts.com/c/20a04794234e8f0981f0400c51ba02cd?family=OpticalBDB+Normal);orUse font-face declaration Fonts.(http | https)
        @font-face {
        font-family: "OpticalBDB Normal";
        src: url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.eot");
        src: url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.svg#OpticalBDB Normal")format("svg");
        }
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
 
<input type="date" id="desiredDate" min="1863-01-01" max="2299-12-31" />
<br/>
<div id="info"></div>
 
  <script>
    var listColors = [
      "зелёно", "зелёно", "красно", "красно", "жёлто", "жёлто", "бело", "бело", "сине", "сине"];
    var listEnd = [
      "й", "го", "го", "го","го", "й","й", "й", "й", "го", "й", "й"];
    var listAnimal = [
      "крысы", "быка", "тигра", "кролика", "дракона", "змеи", "лошади", "козы", "обезьяны", "петуха", "собаки", "свиньи" ];
    var dates = [
      { month: "01",
        day: [
          {"21":
            ["1890", "1966"] },
          {"22":
            ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
          {"23":
            ["1917", "1928", "1974", "1993", "2012", "2031"] },
          {"24":
            ["1887", "1936", "1955", "2001", "2039"] },
          {"25":
            ["1868", "1906", "1925", "1944", "1963", "1982", "2020"] },
          {"26":
            ["1876", "1895", "1914", "1933", "2009", "2028"] },
          {"27":
            ["1865", "1941", "1952", "1971", "1990"] },
          {"28":
            ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
          {"29":
            ["1873", "1903", "1949", "1987", "2006", "2025"] },
          {"30":
            ["1881", "1892", "1911", "1930", "1968", "2044"] },
          {"31": 
            ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
            ]
        },
        { month: "02",
          day: [
          {"1":
            ["1919", "2003", "2022", "2041"] },
          {"2":
            ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
          {"3":
            ["1916", "1954", "1973", "2011", "2030"] },
          {"4":
            ["1886", "1905", "1935", "1992", "2038"] },
          {"5":
            ["1867", "1924", "1943", "1962", "1981", "2019"] },
          {"6":
            ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
          {"7":
            ["1978", "1997", "2008"] },
          {"8":
            ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
          {"9":
            ["1872", "1891", "1967", "1986", "2005"] },
          {"10":
            ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
          {"11":
            ["1869", "1918", "1937", "1975", "2032"] },
          {"12":
            ["1888", "1956", "2021", "2040"] },
          {"13":
            ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
          {"14":
            ["1915", "1934", "1953", "2010"] },
          {"15":
            ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
          {"16":
            ["1904", "1923", "1980", "1999", "2018"] },
          {"17":
            ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
          {"18":
            ["1863", "1882", "1912", "1958", "1977", "2007"] },
          {"19":
            ["1871", "1901", "1939", "1996", "2015", "2034"] },
          {"20":
            ["1920", "1985"] },
            ]
        }
    ];
 
   function srch(arr, dat) {
     var p = dat.split('-')[0];
       function run(a, z, b) {
         if(b.length === 6) return b;
           for(var i = 0; i < a.length; i++) {
             for(var j = 0; j < a[i].day.length; j++) {
               for(var o in a[i].day[j]) {
                 for(var r = 0; r < a[i].day[j][o].length; r++) {
                  if(a[i].day[j][o][r] == z) {
                    b.push(o, a[i].month, z);
                  return run(a, String(++p), b);
                }
              }
            }
          }
        }
      }
      return run(arr, p, []);
  }
 
function ChineseZodiac() {
  var result = srch(dates, this.value);
  var oneDataDay = parseInt(result[0]);
  var oneDataMonth = result[1];
  var oneDataYear = result[2];
  var endDataDay = parseInt(result[3]) - 1;
  var endDataMonth = result[4];
  var endDataYear = result[5];
 
  var oneData = oneDataDay + '.' + oneDataMonth + '.' + oneDataYear;
  var endData = endDataDay + '.' + endDataMonth + '.' + endDataYear;
  var cineseYear = oneData + '-' + endData;
 
  
  var currentDate = this.value ? new Date(this.value) : new Date();
  var currentYear = currentDate.getFullYear();
 
  var colorIndex = (currentYear - 1564) % 10;
  var color = listColors[colorIndex];
 
  var endIndex = (currentYear - 1564) % 12;
  var end = listEnd[endIndex];
 
  var animalIndex = (currentYear - 1564) % 12;
  var animal = listAnimal[animalIndex];
 
  var chineseNumYear = currentYear + 2697;
  var cycleNum = Math.floor(chineseNumYear / 60) + 1;
  var yearCycle = (chineseNumYear % 60 === 0 ? 6 : chineseNumYear % 60) + " год в 60-летнем цикле.";
 
  var infoElement = document.getElementById("info");
  infoElement.innerHTML = "год " + color + end + " " + animal + "." + "<br/>" + oneData + '-' + endData + "<br/>" + chineseNumYear + " г." + "<br/>" + cycleNum + " цикл" + "<br/>" + yearCycle;
}
 
 
    var input = document.getElementById('desiredDate');
 
    input.value = new Date().getFullYear() + '-' + ((new Date().getMonth() < 9) ? '0' : '') + (new Date().getMonth() + 1) + '-' + ((new Date().getDate() < 10) ? '0' : '') + new Date().getDate();
    input.addEventListener('change', ChineseZodiac);
    input.dispatchEvent(new Event('change'));
  </script>
 </body>
</html>

в этом скрипте получаем даты,

JavaScript
1
2
3
4
5
6
7
8
9
10
var result = srch(dates, this.value);
  var oneDataDay = parseInt(result[0]);
  var oneDataMonth = result[1];
  var oneDataYear = result[2];
  var endDataDay = parseInt(result[3]) - 1;
  var endDataMonth = result[4];
  var endDataYear = result[5];
 
  var oneData = oneDataDay + '.' + oneDataMonth + '.' + oneDataYear;
  var endData = endDataDay + '.' + endDataMonth + '.' + endDataYear;

как дальше получить даты национальных китайских праздников, +/- дней от этих дат?

@Именч · 03.02.2024, 01:08

Последний вариант кода вас устроил?

@бел ка · 03.02.2024, 22:07 **[ТС]**

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

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

Добавлено через 16 минут
возникло пару вопросов по моему коду

PHP/HTML
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
<!DOCTYPE HTML>
 <html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>Chinese Zodiac</title>
  <style>
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family "ITC Benguiat Std Medium Condensed";
            font-family: "ITC Benguiat Std Book Condensed";
            font-family "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
        
        span.tree {
        color: hsl(120,100%,30%);
        } /* дерево */
        span.fire {
        color: hsl(345,100%,50%);
        } /* огонь */
        span.earth {
        color: hsl(51, 100%, 50%);
        } /* земля*/
        span.metallic {
        color: hsl(0, 0%, 75%);
        } /* металл*/
        span.water {
        color: hsl(215,100%,50%);
        } /* вода */
    </style>
</head>
<body>
 
  <input type="date" id="desiredDate" min="1564-01-01" max="2299-12-31"/>
  <br/>
  <div id="info"></div>
 
  <script>
    document.getElementById('desiredDate').valueAsDate = new Date();
 
    var dates = [
          { month: "Jan",
            day: [
              {"21":
                ["1890", "1966"] },
              {"22":
                ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
              {"23":
                ["1917", "1928", "1974", "1993", "2012", "2031"] },
              {"24":
                ["1887", "1936", "1955", "2001", "2039"] },
              {"25":
                ["1868", "1906", "1925", "1944", "1963", "1982", "2020"] },
              {"26":
                ["1876", "1895", "1914", "1933", "2009", "2028"] },
              {"27":
                ["1865", "1941", "1952", "1971", "1990"] },
              {"28":
                ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
              {"29":
                ["1873", "1903", "1949", "1987", "2006", "2025"] },
              {"30":
                ["1881", "1892", "1911", "1930", "1968", "2044"] },
              {"31": 
                ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
                ]
            },
            { month: "Feb",
              day: [
              {"1":
                ["1919", "2003", "2022", "2041"] },
              {"2":
                ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
              {"3":
                ["1916", "1954", "1973", "2011", "2030"] },
              {"4":
                ["1886", "1905", "1935", "1992", "2038"] },
              {"5":
                ["1867", "1924", "1943", "1962", "1981", "2000", "2019"] },
              {"6":
                ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
              {"7":
                ["1978", "1997", "2008"] },
              {"8":
                ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
              {"9":
                ["1872", "1891", "1967", "1986", "2005"] },
              {"10":
                ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
              {"11":
                ["1869", "1918", "1937", "1975", "2032"] },
              {"12":
                ["1888", "1956", "2002", "2021", "2040"] },
              {"13":
                ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
              {"14":
                ["1915", "1934", "1953", "2010"] },
              {"15":
                ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
              {"16":
                ["1904", "1923", "1980", "1999", "2018"] },
              {"17":
                ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
              {"18":
                ["1863", "1882", "1912", "1958", "1977", "2007"] },
              {"19":
                ["1871", "1901", "1939", "1996", "2015", "2034"] },
              {"20":
                ["1920", "1985"] },
                ]
            }
        ];
 
    function srch(arr, dat) {
      var p = dat.split('-')[0];
        var cnt = [-1, 1], h = -1; // новые вводные ... не пугайся )
          function run(a, z, b) {
            if (b.length === 9) return b;
              for (var i = 0; i < a.length; i++) {
                for (var j = 0; j < a[i].day.length; j++) {
                  for (var o in a[i].day[j]) {
                    for (var r = 0; r < a[i].day[j][o].length; r++) {
                      if (a[i].day[j][o][r] == z) {
                      b.push(o, a[i].month, z);
                      return run(a, String(+p + cnt[++h]), b);
                    }
                  }
                }
              }
            }
          }
        return run(arr, p, []);
      }
 
    function showResult(e) {  
      var result = srch(dates, this.value);
 
      var dayCurrentData = parseInt(result[0]);
      var monthCurrentData = result[1];
      var yearCurrentData = result[2];
      var dayPreviousData = parseInt(result[3]);
      var monthPreviousData = result[4];
      var yearPreviousData = result[5];
      var dayFollowingData = parseInt(result[6]);
      var monthFollowingData = result[7];
      var yearFollowingData = result[8];
 
      var CurrentData = dayCurrentData + '.' + monthCurrentData + '.' + yearCurrentData; // 2024
      var PreviousData = dayPreviousData + '.' + monthPreviousData + '.' + yearPreviousData; // 2023
      var FollowingData = dayFollowingData + '.' + monthFollowingData + '.' + yearFollowingData; // 2025
 
      var LastDayYear = new Date(CurrentData);
      LastDayYear.setDate(LastDayYear.getDate() - 1);
      var formattedLastDayYear = LastDayYear.getDate() + '.' + (LastDayYear.getMonth() + 1) + '.' + LastDayYear.getFullYear();
 
      var LastDayPreviousYear = new Date(FollowingData);
      LastDayPreviousYear.setDate(LastDayPreviousYear.getDate() - 1);
      var formattedLastDayPreviousYear = LastDayPreviousYear.getDate() + '.' + (LastDayPreviousYear.getMonth() + 1) + '.' + LastDayPreviousYear.getFullYear();
  
      var currentDate = new Date().toLocaleDateString().split('.').reverse().join('-');
 
      if (CurrentData >= currentDate) {
      document.getElementById('info').innerHTML = "<span class=''>" + CurrentData + '-' + formattedLastDayPreviousYear + "</span>";
      }
    
      else {
      document.getElementById('info').innerHTML = "<span class=''>" + PreviousData + '-' + formattedLastDayYear + "</span>" + "<br>" +
                                                  "<span class=''>" + CurrentData + '-' + formattedLastDayPreviousYear + "</span>";
      }
    }
 
    var input = document.getElementById('desiredDate');
 
    input.value = new Date().toLocaleDateString().split('.').reverse().join('-')
    input.addEventListener('change', showResult);
    input.dispatchEvent(new Event('change'));
  
// function formatedData { Data + '.' + (Month<10?"0":"")+Month + '.' + Year; }
 
  </script>
  <br><br>
  <span class="tree">дерево - зелёный</span><br>
  <span class="fire">огонь - красный</span><br>
  <span class="earth">земля - жёлтый</span><br>
  <span class="metallic">металл - белый</span><br>
  <span class="water">вода - синий, <span style="color: hsl(0,0%,0%);">чёрный</span></span><br>
 </body>
</html>
 
 
var listClass = ["tree", "tree", "fire", "fire", "earth", "earth", "metallic", "metallic", "water", "water"];
    
var listClassIndex = (currentyear - 1564) % 10;
var Class = Class[listClassIndex];

Добавлено через 13 минут
как правильно отформатировать даты в строках 181, 185, 186 ?

и как правильно сравнить дату введённую пользователем, с датой нг из массива, в строке 180 ?

@Именч · 04.02.2024, 09:36

Сообщение от бел ка

я же использовала инпут с типом дата,

Нет. Тебе выдали ранее предложенной код, основанный на for, который возвращал данные лишь по найденному году, после чего возвращал месяц и день из ключей объекта.

Сообщение от бел ка

JavaScript
1
var cnt = [-1, 1], h = -1; // новые вводные ... не пугайся )

Опять какой то бред от непонимания.

JavaScript
1
2
3
4
5
6
let startYear = ChineseNewYear(data); // Текущий год
let nextYear = ChineseNewYear(data, 1); // Следующий год от текущего
let nextNextYear = ChineseNewYear(data, 2); // Послеследующий год от текущего 
 
let lastYear = ChineseNewYear(data, -1); // Предыдущий год от текущего
let lastLastYear = ChineseNewYear(data, -2); // После-предыдущий год от текущего

Таким образом, что бы откорректировать вывод значений, в зависимости ещё от месяца и дня, нужно воспользоваться не только получением нового года, за какой - то год. Но ещё проанализировать данные из переменной data, а именно дня и месяца, что бы выдать значения нужных переменных "startYear, nextYear, nextNextYear, lastYear, lastLastYear "

// 04.02.2024 > 10.02.2024 - 28.01.2025

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
    function ChineseNewYear(year, offset) {
      if("string" == typeof year) {
        year = parseInt(year.match(/\b\d{4}\b/));
      } else if (year instanceof Date) {
        year = year.getFullYear();
      }
 
      if(isNaN(year) || (year < 1000 || year > 2200)) year = new Date().getFullYear();
      offset = parseFloat(offset);
      (!isNaN(offset)) && ((offset>=0) ? (year += offset) : (year += offset));
 
      const infoYear = dates[year];
      var d = infoYear[0];
      if(d < 10) d = '0' + d;
 
      var m = infoYear[1];
      if(m < 10) m = '0' + m;
 
      var date2 = new Date(m+'/'+d+'/'+year);
      date2.setDate(date2.getDate() - 1);
 
 
      const year1564 = year - 1564;
      const chineseNumYear = year + 2697;
 
      return {
        date:   d + '.' + m + '.' + year,
        date2:  date2.toLocaleDateString('ru-RU'),
        color:  listColors[year1564 % listColors.length],
        end:    listEnd[year1564 % listEnd.length],
        animal: listAnimal[year1564 % listAnimal.length],
        chineseNumYear: chineseNumYear,
        cycleNum:       Math.floor(chineseNumYear / 60) + 1,
        yearCycle:      (chineseNumYear % 60 === 0 ? 6 : chineseNumYear % 60) + " год в 60-летнем цикле.",
      };
    }
 
  function printDate(data) {
      var startYear = ChineseNewYear(data); // Текущий год
 
      var nextYear = ChineseNewYear(data, 1); // Следующий год от текущего
   
      return `${startYear.date} - ${nextYear.date2}`;
  }

Добавлено через 24 секунды

Сообщение от бел ка

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

Не хочу более участвовать в этом сюре

@бел ка · 04.02.2024, 17:47 **[ТС]**

Сообщение от Именч

Нет.
Не хочу более участвовать в этом сюре

за два-три дня вручную получу все даты, с -105г. и сохраню в гугл-диске, на будущее, чтобы в случае необходимости можно было взять уже готовые...

Добавлено через 4 часа 5 минут

Сообщение от Именч

Нет. Тебе выдали ранее предложенной код, основанный на for, который возвращал данные лишь по найденному году, после чего возвращал месяц и день из ключей объекта.

Опять какой то бред от непонимания.

в том то и дело в недопонимании...
предложенный код не будет работать в старых браузерах, поэтому и приходится извращаться и искать более кросбраузерное решение...

@бел ка · 05.02.2024, 14:08 **[ТС]**

никто не подскажет как правильно отформатировать даты в коде из 62 поста?

надо функцию 196 строка, вставить внутрь function showResult насколько я понимаю...

вот скрин что сейчас выводится на страницу, а надо что бы Jan Feb исправлялось на 01 и 02.........

@бел ка · 05.02.2024, 14:12 **[ТС]**

и 9.2.2024 исправлялось на 9.02.2024

@бел ка · 05.02.2024, 18:22 **[ТС]**

никто не знает?

как правильно отформатировать даты в коде из 62 поста?

надо функцию 196 строка, вставить внутрь function showResult насколько я понимаю...

вот скрин что сейчас выводится на страницу, а надо что бы Jan Feb исправлялось на 01 и 02

и 9.2.2024 исправлялось на 9.02.2024

@voraa · 05.02.2024, 19:48

Я уже много раз писал, что с датами, надо работать, как с датами, а не строками, числами.
Для представления дат в строковом формате, есть специальные средства в js.
Читайте, осваивайте, учитесь. Ну хотя бы попробуйте.
https://developer.mozilla.org/... TimeFormat

Новое (для вас) и хорошее, лучше чем старое, но которое непонятно как делать

@бел ка · 06.02.2024, 00:28 **[ТС]**

voraa, вся проблема в совместимости с браузерами...

Добавлено через 20 минут
в коде из 62 поста, что касается дат, осталось только две проблемы, которые пытаюсь решить
1.) вывести даты в нужном формате
2.) сравнить дату введённую пользователем, с датой из массива, где одинаковый год, и показать разный результат на странице, если дата введённая меньше, или дата = или >

@voraa · 06.02.2024, 08:26

Сообщение от бел ка

вся проблема в совместимости с браузерами...

IE8 поддерживаете?
С каким не совместим?

Добавлено через 49 минут

Сообщение от бел ка

предложенный код не будет работать в старых браузерах

Какой конкретно старый браузер интересует?

У ваших пользователей нет интернета, что бы скачать и установить что то поновее?

@бел ка · 06.02.2024, 16:38 **[ТС]**

Сообщение от voraa

У ваших пользователей нет интернета, что бы скачать и установить что то поновее?

просто эти пользователи не настолько продвинуты в интернете, что скачать и установить что нибудь поновее... нередко приходится полчаса-час в ватсапе объяснять что такое адресная строка, и чем отличаются две ссылки(id'ом), вроде на два абсолютно индетичних продукта(предмета)...

Добавлено через 19 минут
voraa, лучше объясни простыми словами что нужно заменить в коде из 62 поста, чтобы даты выводились в нужном формате, и чтобы на странице выводился разный результат если дата введённая пользователем меньше даты из массива, и другой если дата равна или больше...

@voraa · 06.02.2024, 17:05

Сообщение от бел ка

просто эти пользователи не настолько продвинуты в интернете, что скачать и установить что нибудь поновее

Да браузеры (Хром, файрфокс) обычно сами обновляются. А Intl.DateTimeFormat даже в IE11 был. Не в полном, но достаточном объеме.

@бел ка · 06.02.2024, 17:15 **[ТС]**

voraa, лучше объясни простыми словами что нужно заменить в коде из 62 поста, чтобы даты выводились в нужном формате, и чтобы на странице выводился разный результат если дата введённая пользователем меньше даты из массива, и другой если дата равна или больше...

@voraa · 06.02.2024, 18:04

Я только так умею. И по другому не хочу

HTML5
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE HTML>
 <html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>Chinese Zodiac</title>
  <style>
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "ITC Benguiat Std Medium Condensed";
            font-family: "ITC Benguiat Std Book Condensed";
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
        
        span.tree {
        color: hsl(120,100%,30%);
        } /* дерево */
        span.fire {
        color: hsl(345,100%,50%);
        } /* огонь */
        span.earth {
        color: hsl(51, 100%, 50%);
        } /* земля*/
        span.metallic {
        color: hsl(0, 0%, 75%);
        } /* металл*/
        span.water {
        color: hsl(215,100%,50%);
        } /* вода */
    </style>
</head>
<body>
 
  <input type="date" id="desiredDate" min="1564-01-01" max="2299-12-31"/>
  <br/>
  <div id="info"></div>
 
  <script>
    document.getElementById('desiredDate').valueAsDate = new Date();
 
    var dates = [
          { month: "01",
            day: [
              {"21":
                ["1890", "1966"] },
              {"22":
                ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
              {"23":
                ["1917", "1928", "1974", "1993", "2012", "2031"] },
              {"24":
                ["1887", "1936", "1955", "2001", "2039"] },
              {"25":
                ["1868", "1906", "1925", "1944", "1963", "1982", "2020"] },
              {"26":
                ["1876", "1895", "1914", "1933", "2009", "2028"] },
              {"27":
                ["1865", "1941", "1952", "1971", "1990"] },
              {"28":
                ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
              {"29":
                ["1873", "1903", "1949", "1987", "2006", "2025"] },
              {"30":
                ["1881", "1892", "1911", "1930", "1968", "2044"] },
              {"31": 
                ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
                ]
            },
            { month: "02",
              day: [
              {"1":
                ["1919", "2003", "2022", "2041"] },
              {"2":
                ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
              {"3":
                ["1916", "1954", "1973", "2011", "2030"] },
              {"4":
                ["1886", "1905", "1935", "1992", "2038"] },
              {"5":
                ["1867", "1924", "1943", "1962", "1981", "2000", "2019"] },
              {"6":
                ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
              {"7":
                ["1978", "1997", "2008"] },
              {"8":
                ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
              {"9":
                ["1872", "1891", "1967", "1986", "2005"] },
              {"10":
                ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
              {"11":
                ["1869", "1918", "1937", "1975", "2032"] },
              {"12":
                ["1888", "1956", "2002", "2021", "2040"] },
              {"13":
                ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
              {"14":
                ["1915", "1934", "1953", "2010"] },
              {"15":
                ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
              {"16":
                ["1904", "1923", "1980", "1999", "2018"] },
              {"17":
                ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
              {"18":
                ["1863", "1882", "1912", "1958", "1977", "2007"] },
              {"19":
                ["1871", "1901", "1939", "1996", "2015", "2034"] },
              {"20":
                ["1920", "1985"] },
                ]
            }
        ];
 
    function srch(arr, dat) {
      var p = dat.split('-')[0];
        var cnt = [-1, 1], h = -1; // новые вводные ... не пугайся )
          function run(a, z, b) {
            if (b.length === 9) return b;
              for (var i = 0; i < a.length; i++) {
                for (var j = 0; j < a[i].day.length; j++) {
                  for (var o in a[i].day[j]) {
                    for (var r = 0; r < a[i].day[j][o].length; r++) {
                      if (a[i].day[j][o][r] == z) {
                      b.push(o, a[i].month, z);
                      return run(a, String(+p + cnt[++h]), b);
                    }
                  }
                }
              }
            }
          }
        return run(arr, p, []);
      }
 
    function showResult(e) {  
      var result = srch(dates, this.value);
 
      var currentDate = new Date(result[2], result[1]-1, result[0]);
      var previouseDate = new Date(result[5], result[4]-1, result[3]);
      var followingtDate = new Date(result[8], result[7]-1, result[6]);
 
      var LastDayYear = new Date(currentDate);
      LastDayYear.setDate(LastDayYear.getDate() - 1);
 
      var LastDayPreviousYear = new Date(followingtDate);
      LastDayPreviousYear.setDate(LastDayPreviousYear.getDate() - 1);
 
      var dateFormater = new Intl.DateTimeFormat();
  
      var nowDate = new Date(this.value);
 
      if (currentDate >= nowDate) {
        document.getElementById('info').innerHTML = "<span class=''>" + dateFormater.format(currentDate) + 
          '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      } else {
        document.getElementById('info').innerHTML = "<span class=''>" +  dateFormater.format(previouseDate) + 
          '-' + dateFormater.format(LastDayYear) + "</span>" + "<br>" +
          "<span class=''>" + dateFormater.format(currentDate) + '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      }
    }
 
    var input = document.getElementById('desiredDate');
 
    input.valueAsDate = new Date()
    input.addEventListener('change', showResult);
    input.dispatchEvent(new Event('change'));
 
  </script>
  <br><br>
  <span class="tree">дерево - зелёный</span><br>
  <span class="fire">огонь - красный</span><br>
  <span class="earth">земля - жёлтый</span><br>
  <span class="metallic">металл - белый</span><br>
  <span class="water">вода - синий, <span style="color: hsl(0,0%,0%);">чёрный</span></span><br>
 </body>
</html>
 
 
var listClass = ["tree", "tree", "fire", "fire", "earth", "earth", "metallic", "metallic", "water", "water"];
    
var listClassIndex = (currentyear - 1564) % 10;
var Class = Class[listClassIndex];

@kidASM · 06.02.2024, 22:27

Зачем использовать дату в виде строки, если можно использовать дату? Вот пример:

PHP/HTML
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
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Даты</title>
        <style>
            main {
                display: flex;
                justify-content: center;
                flex-direction: column;
                margin-top: 3rem;
                gap: 10px;
            }
            form {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
            }
            #output {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 10px;
            }
            span {
                display: flex;
            }
        </style>
    </head>
    <body>
        <main>
            <form name="f1">
                <span>Введите дату:</span>
                <input type="date" name="inpDate">
            </form>
            <div id="output"></div>
        </main>
        <script>
            function dateToString(date){
                return date.toLocaleDateString(navigator.language, {year:"numeric", month:"long", day:"numeric"});
            }
 
            var form = document.forms.f1;
            var output = document.getElementById("output");
            if(form && output){
                form.inpDate.addEventListener('change', function(event){
                    var daysShift = [0, 5, 19, 73, 75];
 
                    var dates = {};
 
                    var strHTMLOutput = "";
 
                    for(var i=0; i<daysShift.length; i++){
                        var key = "date"+i;
                        dates[key] = new Date(event.target.valueAsNumber);
                        dates[key].setDate(dates[key].getDate() + daysShift[i]);
                        strHTMLOutput += "<span>"+dateToString(dates[key])+"</span>"
                    }
                    output.innerHTML = strHTMLOutput;
                });
            }
            else {
                console.error("Форма не найдена.")
            }
        </script>
    </body>
</html>

@бел ка · 07.02.2024, 15:32 **[ТС]**

kidASM, а что делать если при использовании dateToString экран остаётся белый и консоль выдаёт ошибку, если старые браузеры не воспринимают это?

Добавлено через 1 минуту
voraa,

@kidASM · 07.02.2024, 21:50

Сообщение от бел ка

kidASM, а что делать если при использовании dateToString экран остаётся белый и консоль выдаёт ошибку, если старые браузеры не воспринимают это?

Все популярные браузеры текущех версий поддерживают.
Внизу страницы указана совместимость Date.prototype.toLocaleDateString()
Или передаётся не объект Date()

@бел ка · 08.02.2024, 01:19 **[ТС]**

kidASM, ключевая фраза текущих версий...

@voraa · 08.02.2024, 07:27

Сообщение от бел ка

kidASM, ключевая фраза текущих версий...

Так вам то для какой конкретно версии нужно?

@бел ка · 08.02.2024, 12:06 **[ТС]**

в основном для телефонов, где-то 40 версии хрома и тому подобных...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Именч 168 / 146 / 32 Регистрация: 03.09.2018 Сообщений: 499
	03.02.2024, 01:08
	Последний вариант кода вас устроил? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	05.02.2024, 14:08 [ТС]
	никто не подскажет как правильно отформатировать даты в коде из 62 поста? надо функцию 196 строка, вставить внутрь function showResult насколько я понимаю... вот скрин что сейчас выводится на страницу, а надо что бы Jan Feb исправлялось на 01 и 02......... Миниатюры 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	05.02.2024, 14:12 [ТС]
	и 9.2.2024 исправлялось на 9.02.2024 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	05.02.2024, 18:22 [ТС]
	никто не знает? как правильно отформатировать даты в коде из 62 поста? надо функцию 196 строка, вставить внутрь function showResult насколько я понимаю... вот скрин что сейчас выводится на страницу, а надо что бы Jan Feb исправлялось на 01 и 02 и 9.2.2024 исправлялось на 9.02.2024 Миниатюры 0

@voraa 1259 / 1218 / 180 Регистрация: 21.01.2024 Сообщений: 5,617
	05.02.2024, 19:48
	Я уже много раз писал, что с датами, надо работать, как с датами, а не строками, числами. Для представления дат в строковом формате, есть специальные средства в js. Читайте, осваивайте, учитесь. Ну хотя бы попробуйте. https://developer.mozilla.org/... TimeFormat Новое (для вас) и хорошее, лучше чем старое, но которое непонятно как делать 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.02.2024, 00:28 [ТС]
	voraa, вся проблема в совместимости с браузерами... Добавлено через 20 минут в коде из 62 поста, что касается дат, осталось только две проблемы, которые пытаюсь решить 1.) вывести даты в нужном формате 2.) сравнить дату введённую пользователем, с датой из массива, где одинаковый год, и показать разный результат на странице, если дата введённая меньше, или дата = или > 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.02.2024, 17:15 [ТС]
	voraa, лучше объясни простыми словами что нужно заменить в коде из 62 поста, чтобы даты выводились в нужном формате, и чтобы на странице выводился разный результат если дата введённая пользователем меньше даты из массива, и другой если дата равна или больше... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	07.02.2024, 15:32 [ТС]
	kidASM, а что делать если при использовании dateToString экран остаётся белый и консоль выдаёт ошибку, если старые браузеры не воспринимают это? Добавлено через 1 минуту voraa, 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	08.02.2024, 01:19 [ТС]
	kidASM, ключевая фраза текущих версий... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	08.02.2024, 12:06 [ТС]
	в основном для телефонов, где-то 40 версии хрома и тому подобных... 0