как нажатием на день календаря вызвать form, блок html
Здравствуйте! натолкните пожалуйста на мысль, а то я совсем уже в тупике.
Что мне почитать или какую тему посмотреть? календарь стандартный на js форму сделал для записи именифамилии и время данные сохраняются в json но, как мне сделать, чтобы нажатием на день, я мог вызвать это окно? меня очень наталкивание на мысль решения интересует вначале я думал через onclick button, но это получается кнопка, а ззадача ж щелчком по дню Прикладываю код
<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>
<table id="calendar2">
<thead>
<tr><td>‹<td colspan="5"><td>›
<tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
<tbody>
</table>
[js run]
<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> ';
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> <td> <td> <td> <td> <td> <td> ';
}
}
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>
[/js]
<button>
<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">
<script> function Myform (Dlast, DNlast, DNfirst) { alert ( "" ) } </form> </button> <script> localStorage.setItem('key', 'value'); localStorage.getItem('key'); // value const form = [{ "date": "12-03-2020", "name": "xyz" },{ "date": "12-03-2020", "name": "xyz" },{ "date": "12-03-2020", "name": "xyz" }]; localStorage.setItem('form', JSON.stringify(form)); // przy wchodzeniu do aplikacji sprawdz, czy dane znajdują sie w localStorage i jak tak to załaduj, jak nie to traktuj to jak pierwsze uruchomienie let form = []; if ("form" in localStorage) { // w ten sposób możesz sprawdzić czy właściwość wewnątrz obiektu istnieje form = JSON.parse(localStorage.getItem('form')); } else { // dane nie istnieją } |
Konstantin47,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
секундочку
|
концовка формы работает. Моя проблема, как научится делать функции, чтобы когда щелкаю по дню, появилось мое окно myform
ps а то две части работают отдельно, моя задача познакомить |
Konstantin47,
не надо разбивать код на куски. Цитата:
document.addEventListener( "DOMContentLoaded" , function() {
const on = (parent, event, selector, handler) => parent.addEventListener(event, ({target}) => {
if(target = target.closest(selector)) handler(target)
})
const fn = el => {
alert(`${el.textContent} форма открывайся, раз, два!!!`);
}
on(document, "click", "#calendar2 tbody td", fn);
});
|
Cпасибо большое! как доделаю, отпишу
|
вообщем, пока что дальше, чем такое сообщение в окне алерта не продвинулся, [object HTMLInputElement], то завтра отпишу
|
Konstantin47,
а присвоить некий класс форме, который из скрытой, сделает её видимой? |
можно спросить? я в правильном направлении думаю или совсем нет? просто я пока не понимаю, откуда слова брать и, когда они взаимодействуют со значениями, а когда нет. просто сам себя проверить вообще не могу ( ну кроме работает, не работает)
<div id = 'elem'>
<form name='elems'>
<button>
<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>
</div>
let elem1 = document.getElementById('elem');
// нужно создать класс и сделать из скрытой формы открытую
class div {
constructor( visibility ) {
this.visibility = 'visible'
}
}
|
Konstantin47,
<style type="text/css">
[name='elems']{
display: none;
}
[name='elems'].open{
display: initial;
}
</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.elems.classList.add("open")
//alert(`${el.textContent} форма открывайся, раз, два!!!`);
}
on(document, "click", "#calendar2 tbody td", fn);
});
</script>
|
как цитата - [name='elems']{
03 display: none; (с) это получается классы в css оформлены? пытаюсь тему найти Я извиняюсь конечно за много вопросов, просто хочу разобраться ( про вместо alert - "open" я бы и не догадался пока, что - все попытки были через alert, как это делать и даже сейчас, почему у меня не работает, то вот |
Цитата:
|
стили в css я понимаю, меня это удивило, что начинается с [ ] , а не с #
Спасибо большое |
Konstantin47,
https://developer.mozilla.org/ru/doc...bute_selectors |
про ту строчку в js не через alert ничего не скажу, а про сами стили. там же рабочий код? получается, что я уже и рабочим пользоваться не умею.
отпишу позже "достижения" |
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> ';
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> <td> <td> <td> <td> <td> <td> ';
}
}
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>
|
вообщем, я после тех стилей новый стиль вставлял. Спасибо большое! До встречи и буду стараться, так не тупить.
просто у меня проблема с - вот раздел введения в js все логично и понятно, где функцию математическую через log вывести или длину массива посчитать и число из середины показать, а вот, когда началось все со словами и элементами DOm , банально не понимаю, где этот словарь слов брать и где цифры со словами, вот, как с классами, я показал, ход мысли и , как бы по статье учебника - так ничего общего. в css стилях я смог скрыть форму, но про открытие формы в js без alert я бы не догадался, так даже через promt пробовал . |
Ронни, можно спросить? где находится значение для сохранения в LokalStorage? Если сохранять изменения в событии по клику.
|
Цитата:
LocalStorage на пальцах https://learn.javascript.ru/localstorage https://developer.mozilla.org/ru/doc...torage/setItem |
| Часовой пояс GMT +3, время: 14:29. |