Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как нажатием на день календаря вызвать form, блок html (https://javascript.ru/forum/misc/81676-kak-nazhatiem-na-den-kalendarya-vyzvat-form-blok-html.html)

Konstantin47 16.01.2021 02:50

как цитата - [name='elems']{
03
display: none;
(с) это получается классы в css оформлены? пытаюсь тему найти

Я извиняюсь конечно за много вопросов, просто хочу разобраться ( про вместо alert - "open" я бы и не догадался пока, что - все попытки были через alert, как это делать и даже сейчас, почему у меня не работает, то вот

рони 16.01.2021 08:49

Цитата:

Сообщение от Konstantin47
пытаюсь тему найти

??? https://developer.mozilla.org/ru/docs/Web/CSS/Reference

Konstantin47 16.01.2021 14:32

стили в css я понимаю, меня это удивило, что начинается с [ ] , а не с #

Спасибо большое

рони 16.01.2021 15:38

Konstantin47,
https://developer.mozilla.org/ru/doc...bute_selectors

Konstantin47 16.01.2021 17:18

про ту строчку в js не через alert ничего не скажу, а про сами стили. там же рабочий код? получается, что я уже и рабочим пользоваться не умею.

отпишу позже "достижения"

рони 16.01.2021 17:50

Konstantin47,
Пример: рабочий код, запустить, кликнуть по любой дате
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    [name='myform'] {
        display: none;
    }
    [name='myform'].open {
        display: initial;
    }
    </style>
    <style>
    #calendar2 {
        width: 100%;
        font: monospace;
        line-height: 1.2em;
        font-size: 15px;
        text-align: center;
    }
    #calendar2 thead tr:last-child {
        font-size: small;
        color: rgb(85, 85, 85);
    }
    #calendar2 thead tr:nth-child(1) td:nth-child(2) {
        color: rgb(50, 50, 50);
    }
    #calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
        cursor: pointer;
    }
    #calendar2 tbody td {
        color: rgb(44, 86, 122);
    }
    #calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
        color: rgb(231, 140, 92);
    }
    #calendar2 tbody td.today {
        background: rgb(220, 0, 0);
        color: #fff;
    }
    </style>
    <script>
document.addEventListener( "DOMContentLoaded" , function() {
 const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
     if(target = target.closest(selector)) handler(target)
 })
 const fn = el => {
 document.myform.classList.add("open")
 //alert(`${el.textContent} форма открывайся, раз, два!!!`);
 }
 on(document, "click", "#calendar2 tbody td", fn);
  });
    </script>
</head>
<body>
<table id="calendar2">
  <thead>
    <tr><td>‹<td colspan="5"><td>›
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>
<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
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>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').ondblclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').ondblclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}
// i - day
</script>
 <form name="myform">
 <label for="name"><b>Proszę wpisać Imie Nazwisko</b></label>
    <input type="text" placeholder="Enter name" name="name" required>
 <br>
 <br>
 <label for="time"><b>Proszę wybrać godzine</b></label>
 <input type="time" name="cron" value="15:15" min="8:00" max="20:00">
 </form>
 </body>
</html>

Konstantin47 16.01.2021 20:35

вообщем, я после тех стилей новый стиль вставлял. Спасибо большое! До встречи и буду стараться, так не тупить.

просто у меня проблема с - вот раздел введения в js все логично и понятно, где функцию математическую через log вывести или длину массива посчитать и число из середины показать, а вот, когда началось все со словами и элементами DOm , банально не понимаю, где этот словарь слов брать и где цифры со словами, вот, как с классами, я показал, ход мысли и , как бы по статье учебника - так ничего общего. в css стилях я смог скрыть форму, но про открытие формы в js без alert я бы не догадался, так даже через promt пробовал .

Konstantin47 18.02.2021 19:19

Ронни, можно спросить? где находится значение для сохранения в LokalStorage? Если сохранять изменения в событии по клику.

рони 18.02.2021 19:30

Цитата:

Сообщение от Konstantin47
где находится значение для сохранения в LokalStorage? Если сохранять изменения в событии по клику

нигде, придумайте имя ключа , там и будет хранится.
LocalStorage на пальцах

https://learn.javascript.ru/localstorage

https://developer.mozilla.org/ru/doc...torage/setItem


Часовой пояс GMT +3, время: 23:03.