16.07.2019, 09:09
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Блондинка, так и я не об этом, а по всей теме, в вопросе же написано - зачем внизу у вас еще один календарь.
|
|
17.07.2019, 10:06
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Rise,
В смысле, зачем сетка календаря на месяц, я правильно сформулировала ваш вопрос?
|
|
17.07.2019, 11:57
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Блондинка,
в теге input есть свой календарь, зачем ещё один, спрашивает Rise?
|
|
17.07.2019, 12:22
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
Блондинка,
Может тебе не очевидно, если Chrome, там у input справа есть значок стрелки на клик по которому появляется сетка календаря для выбора даты, почти такая же, как у тебя, здесь можешь посмотреть. Только твой календарь не для выбора (ввода) даты, а для вывода, но вывод даты есть в input. Так зачем нужно еще одно место вывода в виде своей сетки календаря, если визуально никакой новой информации она не несет?
Последний раз редактировалось Rise, 17.07.2019 в 12:28.
|
|
19.07.2019, 13:26
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Возникла одна проблема, вчера отложила телефон, экран естественно погас, сегодня включаю тел и в календаре подсвечены вчерашние число и день недели...
Второй момент, если на страницу зайти без малого полночь, пока читаешь текст страницы наступают новые сутки а подсвечены остаются день и число вчерашних суток...
Возможно ли как-то отследить что экран включился, а также наступление 00:00 часов и обновить отдельный блок?
Вот немного поправила стили и html...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
body {
width: 350px;
}
#calendar {
width: 320px;
padding: 5px;
margin: 5px;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
input[type=month] {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
text-align: center;
}
table {
border-collapse: separate;
width: 100%;
padding: 1px;
}
table, th, td {
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
margin: 1px;
}
th, td {
text-align: center;
}
.wrapper {
margin-top: 5px;
}
.anotherMonthWeek {
background-color: #e6f5ff;
color: #9ed9ff;
border: 1px solid #dcdcdc;
} /* дата будние дни другой месяц */
.anotherMonthWeekEnd {
background-color: #fff5fa;
color: #ffb8db;
border: 1px solid #dcdcdc;
} /* дата выходные дни другой месяц */
.currentMonthWeek {
background-color: #def1ff;
color: #0091ff;
}
.currentMonthWeekEnd {
background-color: #ffc3d7;
color: #dc143c;
} /* дата выходные дни */
.currentDay{
background-color: #c2d6ff;
border: 1px solid #0000ff;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #0000ff, -1px 1px #0000ff, 1px -1px #0000ff, -1px -1px #0000ff, 1px 0px #0000ff, 0px 1px #0000ff, -1px 0px #0000ff, 0px -1px #0000ff;
}
#wrapper th {
background-color: #c2d6ff;
color: #0069ff;
}
#wrapper th:nth-child(n+6){
background-color: #ffb4d2;
color: #b92346;
} /* дни недели выходные дни */
#wrapper th.currentDay {
border: 1px solid #285fcd;
background-color: #6b9cff;
color: #E6f5ff;
text-shadow: 1px 1px #285fcd, -1px 1px #285fcd, 1px -1px #285fcd, -1px -1px #285fcd, 1px 0px #285fcd, 0px 1px #285fcd, -1px 0px #285fcd, 0px -1px #285fcd;
}
#wrapper th:nth-child(n+6).currentDay{
border: 1px solid #b92346;
background-color: #ff73a0;
color: #ffafc8;
text-shadow: 1px 1px #b92346, -1px 1px #b92346, 1px -1px #b92346, -1px -1px #b92346, 1px 0px #b92346, 0px 1px #b92346, -1px 0px #b92346, 0px -1px #b92346;
}
#wrapper td:nth-child(n+6).currentDay{
background-color: #ff85ad;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff;
text-shadow: 1px 1px #ff0000, -1px 1px #ff0000, 1px -1px #ff0000, -1px -1px #ff0000, 1px 0px #ff0000, 0px 1px #ff0000, -1px 0px #ff0000, 0px -1px #ff0000;
}
button.current.hide {
display: none;
}
button {
width: 100%;
border: 1px solid #a9a9a9;
border-radius: 6px/4px;
}
</style>
</head>
<body>
<div id="calendar">
<form name="formDate">
<input type="month" id="inpDate" name="inpDate">
<button type="button" class="current hide">сегодня</button>
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
var button = document.querySelector("button.current");
function createTable(event){
var date = form.inpDate.valueAsDate;
if(button) button.classList.remove("hide");
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay";
if(button) button.classList.add("hide");
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
};
function setToday()
{
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
if(wrapper && form){
form.addEventListener('change', createTable);
button && button.addEventListener("click", setToday);
setToday()
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</div>
</body>
</html>
|
|
19.07.2019, 13:36
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Rise,
К сожалению для меня не очевидно, поскольку хромом я пользуюсь очень редко, а в моём браузере данных кнопочек нету, если предложишь свой вариант календаря заменив поле для ввода месяца на выпадающий список с кнопками < и > для выбора месяца и поле ввода с кнопками < и > для ввода года, буду благодарна...
|
|
19.07.2019, 13:38
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Блондинка, мне кажется стало понятно, что input не нужен вообще. А два момента что ты описала это одно и тоже, надо наверное крутить интервал и обновлять данные.
|
|
19.07.2019, 14:05
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Блондинка
|
|
в моём браузере данных кнопочек нету,
|
В каком? Последним из основных браузеров, который обзавелся календарем для поля типа date был FF. В нем нет стрелочки, но он отображает дату и кнопку очистки поля, а календарь появляется по фокусу.
Последний раз редактировалось laimas, 19.07.2019 в 14:10.
|
|
19.07.2019, 15:54
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
laimas,
В Habbit browser для android...
Последний раз редактировалось Блондинка, 19.07.2019 в 15:59.
|
|
19.07.2019, 16:46
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Rise,
обновление дива раз в секунду нормально? не слишком часто?
можешь заменить поле для выбора месяца и добавить обновление дива?
|
|
|
|
