Pasek progresu pomiędzy datami

Lipiec 01 2019
Czas

Dobra ostatnio na zajęciach były przerabiane daty z Java Script, część z Was też czasami o to pyta dlatego taki mały przykład jak operować obiektem date dla tych którzy mieli tego za mało na kursie. 

Zrobimy prosty progress bar pokazujący różnicę w wybranych datach ustawionych w data-start i data-end. 

Całość jest dość dobrze okomentowana ale poniżej i tak ogólny opis dla zainteresowanych

W HTML mamy:
id="box" - kontener trzymający całość oraz daty od oraz do w  
 data-start="2019-01-01" i data-end="2019-12-31"

id="boxStart" oraz id="boxEnd" - boxy do których wrzucimy daty od i do w odpowiednim formacie: dzień tygodnia, miesiąc, dzień, rok - format angielski ale oczywiście mozecie ustawić dowolną kolejność.

id="boxBar" - div trzymający pasek progresu (szare tło)
id="boxBarIn" - sam progress bar (pomarańczowy)

W CSS stylujemy całość a kod z JS jest okomentowany, linijka po linijce więc nie ma sensu powtarzać.

Jak ktoś chce poćwiczyć, rozwinąć temat to proponuję zamiast pobierać daty z  data-start i  data-end dorobić inputy typu date i na bierząco zmieniać pasek progresu.

Całość macie TUTAJ

Autor: Geek Factory
Powrót
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.