Pole input type text ciągle wyświetla obiekt, który powinien być niewidoczny

0

Hej. Robię właśnie tutorial na temat tego jak zrobić kalendarz w javascripcie i postępuję zgodnie z zaleceniami, po czym pojawia się dziwny problem, z którego nie mam jak wybrnąć.
Napisałem HTML, żeby rozpisać pole formularza

<div class="input-calendar-cnt">
        <input type="text" class="input-calendar">
        <div class="calendar">
(...) tu są dalej przyciski, pole obecnej daty oraz poszczególne tabelki dni miesiąca
</div></div>

Ostylowuję to tak

/* wrapper dla inputa kalendarza */
.input-calendar-cnt {
    position: relative;
    display: inline-block;
}

/* input kalendarza */
.input-calendar {
    background-image: url(../css/calendar-icon1.png);
    background-position: 99% center;
    background-repeat: no-repeat;
    border:1px solid #ddd;
    cursor:pointer;
}

/* kalendarz */
.calendar {
    position: absolute;
    top:100%;
    left:0;
    width: 300px;
    background: #fff;
    min-height: 300px;
    padding: 5px;
    border: 1px solid #ddd;
    box-shadow:2px 2px 1px rgba(0,0,0,0.1);
    font-family: sans-serif;
    display: block;
    z-index: 100;
}

No i zgodnie z instrukcjami na dwóch stronach, żeby jedno pole chowało się względem drugiego wrapper musi być na pozycji relative, a calendar na pozycji absolute oraz z-index 100 i display:block. Wszystkie wymagania zostały spełnione, a tu lipa... Oba pola są cały czas widoczne. Pole kalendarza cały czas się wyświetla i nie można go zamknąć. Od razu jest widoczne. Co to może powodować? Z góry dzięki za podpowiedzi.

0

Wrzuc kod tu: https://codepen.io/pen/ i najlepiej narysuj co chcesz osiagnac i zly dzial

0
Karol Szymanowski napisał(a):

Wrzuc kod tu: https://codepen.io/pen/ i najlepiej narysuj co chcesz osiagnac i zly dzial

Sorry za dział. Wrzucam link do codepena

See the Pen JabwrM by Voltar Zord (@VoltarZord) on CodePen.

<script async="async" src="https://static.codepen.io/assets/embed/ei.js"></script>

P.S. później doczytałem w tutorialu, że trzeba dodać jeszcze funkcję do html, css i javascript, żeby w ogóle to działało - no więc dodałem - i nie działa

0

Widziałem ten sam albo podobny kurs. Pokaż co masz. Wrzuć js do oddzielnego pliku. a wszystko najlepiej na https://jsfiddle.net/. Rozumiem, że ogólnie działa, tylko nie znika po wybraniu daty ?
Żeby odpalić ten kalendarz twój kod HTML powinien wyglądać tak:

<head>
</head>
<body>
<input class="input1">
</body>

resztę zrobi za ciebie skrypt.
No i jak coś nie działa to korzystaj z konsoli/debugera (F12 W Chrome).

0
debug napisał(a):

Widziałem ten sam albo podobny kurs. Pokaż co masz. Wrzuć js do oddzielnego pliku. a wszystko najlepiej na https://jsfiddle.net/. Rozumiem, że ogólnie działa, tylko nie znika po wybraniu daty ?

Tak czy siak, jak widzisz sam w codepen kalendarz nie znika, jest ciągle widoczny bo cały skrypt nie działa. Wszystkie polecenia w js dla inputa nie kontaktują się z tym co widać na ekranie. W js są polecenia dla show i hide, dla działania całego kalendarza i to wszystko gdzieś się nie może dogadać z jakiegoś powodu. To może być jakiś mały szczegół.

0

https://jsfiddle.net/d58ytz1b/3/
to jest twój kod z CodePen nic nie ruszałem w JS, zmieniłem tylko HTML.
I chyba wszystko działa jak należy ?

0

Hmmm, fakt, działa :) tylko dlaczego na codepen i u mnie w Brackets nie chce? Dobra tam.. spróbuję z tym trochę powalczyć :)

0

Jest gitara, działa :) Po prostu niepotrzebnie rozpisałem cały HTML kiedy wszystkie elementy kalendarze zostały wrzucone do JS-a. Wystarczyło wpisać właściwą klasę inputa, tak, jak to zrobiłeś i śmiga. Dzięki!

1 użytkowników online, w tym zalogowanych: 0, gości: 1