04.04.2021, 00:49
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
Как вывести календарь с временной зоной МСК
Есть вот скрипт, который выводит календарь на месяц. Нужно чтобы календарь выводился с временной зоной МСК (независим от других условий). А то день наступил, а календарь ещё показывает предыдущее число, то есть отстает от МСК-времени.
function Calendar3(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
var lastmonth = 32 - new Date(g.value, m.value-1, 32).getDate();
if (DNfirst != 0) {
for(var i = DNfirst; i > 1; i--) calendar += '<td style="color: Gray">' + (lastmonth-i);
}else{
for(var i = 6; i > 0; i--) calendar += '<td style="color: Gray">' + (lastmonth-i);
}
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
calendar += '<td class="today">' + i;
} else {
calendar += '<td>' + i;
}
if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
calendar += '<tr>';
}
}
var dayaftermonth = 1;
for(var i = DNlast; i < 8; i++) {
if(i > DNlast) {
calendar += '<td style="color: Gray">' + dayaftermonth;
dayaftermonth ++;
}
}
document.querySelector('#'+id+' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#'+id+' option[value="' + new Date().getMonth() + '"]').style.color = 'rgb(230, 33, 33)'; // в выпадающем списке выделен текущий месяц
}
Calendar3("calendar3",new Date().getFullYear(),new Date().getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
}
может быть нужно .getTimezoneOffset() прикрутить к имеющемуся коду?
|
|
04.04.2021, 10:48
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,232
|
|
|
Сообщение от jurvrn
|
|
Нужно чтобы календарь выводился с временной зоной МСК
|
Вот почитай про функции даты для "местного" времени и для UTC+0...
https://learn.javascript.ru/date#pol...mponentov-daty
Так же там есть метод возвращающий разницу в минутах между UTC+0 и местным временем... |
|
05.04.2021, 10:51
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
Сообщение от ksa
|
|
Так же там есть метод возвращающий разницу в минутах между UTC+0 и местным временем...
|
разность я могу вернуть ( то есть определить временную зону )
alert( new Date().getTimezoneOffset()/60 );
То есть часовой пояс Москвы Europe/Moscow - GMT+3.
А имеющийся код , получается, что отображает дату по нулевому UTC.
Где нужно корректировать в коде чтобы прибавлять 3 часа? |
|
05.04.2021, 16:53
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
я "начинающий", этот код сложный для моего понимания.
|
Сообщение от рони
|
|
скопировать и после всех var ххх = new Date(...) добавить xxx.setTimezoneOffset(-180);
|
например -
var Dlast = new Date(year,month+1,0).getDate(),
дополнить код в конце скрипта строкой - ?
var Dlast = Dlast.setTimezoneOffset(-180);
И так все переменные var ?
попробовать код можно - https://jsfiddle.net/1397myno/1/
Последний раз редактировалось jurvrn, 05.04.2021 в 17:08.
|
|
05.04.2021, 17:15
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
jurvrn,
было
var Dlast = new Date(year,month+1,0).getDate(),
станет.
var Dlast = new Date(year,month+1,0);
Dlast.setTimezoneOffset(-180);
Dlast = Dlast.getDate();
|
|
05.04.2021, 17:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
jurvrn,
было
for(var i = 1; i <= Dlast; i++) {
if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth())
станет
for(var i = 1; i <= Dlast; i++) {
var time = new Date();time.setTimezoneOffset(-180);
if (i == time.getDate() && D.getFullYear() == time.getFullYear() && D.getMonth() == time.getMonth())
и так везде где есть new Date()
|
|
05.04.2021, 19:13
|
|
Аспирант
|
|
Регистрация: 04.04.2021
Сообщений: 52
|
|
|
Сообщение от рони
|
было
var Dlast = new Date(year,month+1,0).getDate(),
|
|
Сообщение от рони
|
станет.
var Dlast = new Date(year,month+1,0);
|
Простите, но у меня в коде var Dlast идет в функции, элементы которой отделяются запятыми, в вашем примере это точки с запятой...
Или изменения переменных должны идти после основной функции, в которой они определяются?
Последний раз редактировалось jurvrn, 05.04.2021 в 19:15.
|
|
05.04.2021, 19:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
Сообщение от jurvrn
|
|
элементы которой отделяются запятыми,
|
запятые это короткая форма var, вместо запятой можно добавить var.
было
var Dlast = new Date(year,month+1,0).getDate(),
D = new Date(year,month,Dlast),
DNlast = D.getDay(),
DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
calendar = '<tr>',
m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#'+id+' input');
станет
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
var Dlast = new Date(year, month + 1, 0);
Dlast.setTimezoneOffset(-180);
Dlast = Dlast.getDate();
var D = new Date(year, month, Dlast);
D.setTimezoneOffset(-180);
var DNlast = D.getDay();
var DNfirst = new Date(D.getFullYear(), D.getMonth(), 1);
DNfirst.setTimezoneOffset(-180);
DNfirst = DNfirst.getDay();
var calendar = '<tr>',
m = document.querySelector('#' + id + ' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#' + id + ' input');
|
|
05.04.2021, 19:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
календарь с временной зоной МСК
jurvrn,
протестируйте
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tg {
border-collapse: collapse;
border-spacing: 0;
border-style: solid;
border-width: 1px;
border-color: #561;
margin: 0px auto;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 5px 8px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #f0f0f0;
color: #333;
background-color: #fff;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 5px 10px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: #f0f0f0;
color: #333;
background-color: #f0f0f0;
}
.tg .tg-s6z2 {
text-align: center;
}
.tg-wrap {
float: none;
position: relative;
padding: 3px;
}
#calendar3 {
-webkit-box-shadow: 0px 0px 3px 0px rgba(180, 180, 180, 0.80);
-moz-box-shadow: 0px 0px 3px 0px rgba(180, 180, 180, 0.80);
box-shadow: 0px 0px 3px 0px rgba(180, 180, 180, 0.80);
}
@media screen and (max-width: 767px) {
.tg {
width: auto !important;
}
.tg col {
width: auto !important;
}
.tg-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: auto 0px;
}
}
#calendar3 thead tr:last-child,
#calendar3 tbody td {
text-align: center;
}
#calendar3 thead tr:last-child {
font-size: small;
color: rgb(85, 85, 85);
}
#calendar3 tbody td {
color: rgb(44, 86, 122);
}
#calendar3 tbody td:nth-child(n+6),
#calendar3 .holiday {
color: rgb(126, 13, 1);
}
#calendar3 tbody td.today {
outline: 2px solid blue;
outline-offset: -2px;
}
#polegod {
width: 100%;
font-size: 14px;
font-family: arial, sans-serif;
border: 1px solid #ccc;
height: 30px;
padding-left: 5px;
}
#polegod::-webkit-inner-spin-button {
opacity: 1;
}
th.tg-s6z2:nth-child(1)>select:nth-child(1) {
padding-left: 5px;
padding-right: 15px;
height: 30px;
border-radius: 3px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
Date.prototype.setTimezoneOffset = function(minutes) {
var _minutes;
if (this.timezoneOffset == _minutes) {
_minutes = this.getTimezoneOffset();
} else {
_minutes = this.timezoneOffset;
}
if (arguments.length) {
this.timezoneOffset = minutes;
} else {
this.timezoneOffset = minutes = this.getTimezoneOffset();
}
return this.setTime(this.getTime() + (_minutes - minutes) * 6e4);
};
function Calendar3(id, year, month) {
var Dlast = new Date(year, month + 1, 0);
Dlast.setTimezoneOffset(-180);
Dlast = Dlast.getDate();
var D = new Date(year, month, Dlast);
D.setTimezoneOffset(-180);
var DNlast = D.getDay();
var DNfirst = new Date(D.getFullYear(), D.getMonth(), 1);
DNfirst.setTimezoneOffset(-180);
DNfirst = DNfirst.getDay();
var calendar = '<tr>',
m = document.querySelector('#' + id + ' option[value="' + D.getMonth() + '"]'),
g = document.querySelector('#' + id + ' input');
var last = new Date(g.value, m.value - 1, 32);
last.setTimezoneOffset(-180);
var lastmonth = 32 - last.getDate();
if (DNfirst != 0) {
for (var i = DNfirst; i > 1; i--) calendar += '<td style="color: Gray">' + (lastmonth - i);
} else {
for (var i = 6; i > 0; i--) calendar += '<td style="color: Gray">' + (lastmonth - i);
}
var time = new Date();
time.setTimezoneOffset(-180);
for (var i = 1; i <= Dlast; i++) {
if (i == time.getDate() && D.getFullYear() == time.getFullYear() && D.getMonth() == time.getMonth()) {
calendar += '<td class="today">' + i;
} else {
calendar += '<td>' + i;
}
var end = new Date(D.getFullYear(), D.getMonth(), i);
end.setTimezoneOffset(-180);
if (end.getDay() == 0) {
calendar += '<tr>';
}
}
var dayaftermonth = 1;
for (var i = DNlast; i < 8; i++) {
if (i > DNlast) {
calendar += '<td style="color: Gray">' + dayaftermonth;
dayaftermonth++;
}
}
document.querySelector('#' + id + ' tbody').innerHTML = calendar;
g.value = D.getFullYear();
m.selected = true;
if (document.querySelectorAll('#' + id + ' tbody tr').length < 6) {
document.querySelector('#' + id + ' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> ';
}
document.querySelector('#' + id + ' option[value="' + time.getMonth() + '"]').style.color = 'rgb(230, 33, 33)'; // в выпадающем списке выделен текущий месяц
}
var now = new Date();
now.setTimezoneOffset(-180);
Calendar3("calendar3", now.getFullYear(), now.getMonth());
document.querySelector('#calendar3').onchange = function Kalendar3() {
Calendar3("calendar3", +document.querySelector('#calendar3 input').value, +document.querySelector('#calendar3 select').value);
}
});
</script>
</head>
<body>
<div class="tg-wrap">
<table id="calendar3" class="tg">
<thead>
<tr>
<th class="tg-s6z2" colspan="4"><select>
<option value="0">Январь</option>
<option value="1">Февраль</option>
<option value="2">Март</option>
<option value="3">Апрель</option>
<option value="4">Май</option>
<option value="5">Июнь</option>
<option value="6">Июль</option>
<option value="7">Август</option>
<option value="8">Сентябрь</option>
<option value="9">Октябрь</option>
<option value="10">Ноябрь</option>
<option value="11">Декабрь</option>
</select></th>
<th class="tg-s6z2" colspan="3"><input type="number" id="polegod" value="" min="0" max="9999" size="4"></th>
</tr>
<tr>
<td class="tg-s6z2">Пн</td>
<td class="tg-s6z2">Вт</td>
<td class="tg-s6z2">Ср</td>
<td class="tg-s6z2">Чт</td>
<td class="tg-s6z2">Пт</td>
<td class="tg-s6z2">Сб</td>
<td class="tg-s6z2">Вс</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
|
|
|
|
