25 przydatnych darmowych przykładów selektora dat typu Bootstrap

Często kończyliśmy przeglądanie różnych darmowych fragmentów selektora daty Bootstrap, co dało nam obszerny zbiór praktycznych rozwiązań.

Nie tylko to!

Zamiast WYŁĄCZNIE polegać na narzędziach innych firm, stworzyliśmy również kilka naszych danych wejściowych do selektora dat.

Które są teraz dostępne za darmo .

Możesz uczynić życie swoich użytkowników łatwiejszym i wygodniejszym. Twoje też, ponieważ nie musisz tworzyć od podstaw narzędzia do wybierania dat.

Rozpocznij TUTAJ, niezależnie od tego, czy chcesz dodać do swojej aplikacji internetowej formularz związany z datą, czy wyszukiwarkę.

Koniec z pracą ręczną. Kilka kliknięć i gotowe!

Kalendarz V09

Niech nie zwiedzie Cię nazwa naszych alternatywnych narzędzi do wybierania dat, ponieważ udostępniliśmy je w połączeniu z naszą pełną kolekcją szablonów kalendarzy.

Ale przejdźmy do tego.

Zamiast wybierać odpowiednią datę, ten bezpłatny fragment idzie o krok dalej z wyborem czasu. Po kliknięciu paska otwiera się zbiór opcji ze skrótami na dole.

Możesz także użyć strzałki skierowanej w górę, aby dodać sekundy lub nacisnąć znak X, aby zamknąć selektor dat.

Więcej informacji / Pobierz

Kalendarz V12

Calendar V12 to datapicker Bootstrap o nowoczesnym i minimalistycznym układzie. Ze względu na zgrabny wygląd możesz bez wysiłku zintegrować go z różnymi motywami stron internetowych i projektami aplikacji.

Widżet zawiera efekt najechania kursorem, przycisk na dzisiejszą datę, opcję wyczyszczenia zaznaczenia i przycisk zamykania.

Wygodnie wyświetla miesiąc i rok u góry za pomocą strzałek w lewo i w prawo, aby wygodnie przeskakiwać do następnego lub poprzedniego miesiąca.

Więcej informacji / Pobierz

Kalendarz V13

Jeśli oferujesz swoim użytkownikom wybór zakresu dat dla Twoich usług, rezerwacji, cokolwiek, Kalendarz V13 jest właściwym wyborem. Ten selektor dat Bootstrap zawiera dwa widżety , dzięki czemu wybieranie właściwych dat jest bardzo wygodne.

Projekt darmowego fragmentu jest taki sam jak ten powyżej sport, czyli minimalny i na temat.

Kiedy użytkownik wybierze datę, pojawia się ona na pasku w formacie dzień/miesiąc/rok. Mogą również SZYBKO wyczyścić zaznaczenie lub wybrać dzisiejszą datę jednym kliknięciem.

Więcej informacji / Pobierz

Kalendarz V14

Jeśli szukasz minimalistycznego datownika Bootstrap, który wykonuje swoją pracę bardzo dobrze, zobaczysz świetne wyniki z Kalendarzem V14.

To narzędzie działa dobrze po wyjęciu z pudełka ze względu na swoją prostotę, która ma zastosowanie do każdego projektu internetowego. To naprawdę tylko datapicker bez żadnych wymyślnych rzeczy, dodatkowych funkcji, przycisków resetowania itp.

Pobierz, osadź i gotowe!

Więcej informacji / Pobierz

Kalendarz V15

Ten selektor zakresu dat w kalendarzu przydaje się przy rezerwacjach online, niezależnie od tego, czy chodzi o pokój hotelowy, samochód czy coś innego.

Projekt jest bardzo prosty , więc nie musisz nawet niczego zmieniać, zamiast tego używać go po wyjęciu z pudełka. Możesz jednak zmienić kolor podświetlonej daty lub przejść z wersją domyślną.

Ponieważ jest to selektor dat Bootstrap, wiesz, że jego wydajność jest świetna na urządzeniach mobilnych i stacjonarnych.

Więcej informacji / Pobierz

Kalendarz V16

Zachowaj minimalizm, a jednocześnie śmiałość dzięki wbudowanemu kalendarzowi/selektorowi dat, który możesz teraz swobodnie osadzić w swoim projekcie lub aplikacji.

Czysty wygląd wygląda pięknie na różnych rozmiarach ekranu, ku zadowoleniu użytkowników.

Struktura projektu obejmuje u góry miesiąc i rok, a następnie dni tygodnia od niedzieli do soboty i daty. Użytkownik może również użyć lewych i prawych WSKAŹNIKÓW, aby wybrać różne miesiące.

Więcej informacji / Pobierz

Kalendarz V17

Oto nowy szablon Bootstrap, który zawiera wbudowany kalendarz z paskiem wyników na górze. Gdy użytkownik wybierze datę, pojawia się ona na pasku w następującej kolejności – miesiąc/dzień/rok .

Pasek wyników jest domyślnie pusty i zawiera tekst wezwania do działania, zachęcający użytkownika do wybrania daty. Co więcej, kalendarz zawiera wstępnie wybraną dzisiejszą datę.

Układ jest elastyczny i w 100% responsywny dla urządzeń mobilnych, a kod PRZYJAZNY DLA UŻYTKOWNIKA do szybkiego wykonania.

Więcej informacji / Pobierz

Przykład Bootstrap datepicker przez użytkownika CodePen

To jest darmowy przykład selektora dat Bootstrap. Opracował go użytkownik CodePen. To w pełni konfigurowalny szablon. Wprowadź w nim zmiany zgodnie z własnymi preferencjami.

W tym przykładzie przedstawiono pole wejściowe z tekstem zastępczym „dd.mm.rrrr”. Po prawej stronie tego pola możesz zobaczyć małą ikonę. Po kliknięciu tego pola wejściowego pojawia się kalendarz z bieżącym miesiącem i rokiem. Możesz zobaczyć na nim wszystkie daty bieżącego miesiąca. Użytkownik może również przenieść ten kalendarz, klikając małą ikonę po prawej stronie.

Kiedy wybierzesz datę, zostanie ona WYRÓŻNIONA niebieskim kolorem w kalendarzu. Kolor tła wybranej daty stanie się niebieski. Po kliknięciu daty data pojawia się natychmiast w polu wejściowym.

Więcej informacji / Pobierz

Wybór daty zameldowania i wymeldowania

To kolejny świetny przykład datownika Bootstrap opracowany przez Amandę Louise Acosta Morais. Jak sugeruje nazwa tego szablonu, pozwala on użytkownikowi wybrać datę zameldowania i wymeldowania.

W tym szablonie znajdują się dwa pola wejściowe z tekstami zastępczymi „Zaewidencjonuj” i „Wyewidencjonuj”. Kiedy użytkownik na nie kliknie, pojawi się kalendarz , aby użytkownik mógł wybrać datę.

Istnieją małe ikony kalendarza z tekstami zastępczymi, które wskazują użytkownikowi, że selektory dat zostaną otwarte po kliknięciu pól wejściowych.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa Sreekanth Are

Jest to bardzo przydatny szablon selektora daty stworzony przez Sreekanth Are. Ma ładny, przejrzysty interfejs użytkownika. Na zrzucie ekranu tego szablonu widać, że istnieje pole wejściowe.

Gdy użytkownicy go klikną, w polu wejściowym zobaczą aktualną datę . A gdy użytkownik kliknie ikonę kalendarza, pojawi się selektor dat. Przy wyborze w polu wejściowym umieszczana jest data.

Użyty format daty to „rrrr-mm-dd”.

Więcej informacji / Pobierz

Bootstrap datepicker z wprowadzaniem materiału

Ten przykład selektora daty stworzony przez Salaha Uddina ma wygląd materiału. Strona internetowa ma trzy pola wejściowe. Gdy użytkownik kliknie drugie pole wejściowe, pojawi się bardzo nowoczesny selektor dat.

Funkcjonalność jest taka sama, jak w przypadku innych selektorów dat. Jedyna różnica polega na tym, że projekt jest znacznie lepszy. Wygląda bardzo fajnie. Ten rodzaj nowoczesnego szablonu selektora dat zapewni użytkownikom Twojej aplikacji internetowej niesamowite wrażenia.

Użytkownicy Twojej witryny pokochają ten niesamowity selektor dat. Więc jeśli uważasz, że ten szablon jest wystarczająco dobry, możesz go użyć na swojej stronie.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa Vaidehi Baviskar

Jest to fajny szablon selektora dat Bootstrap opracowany przez użytkownika CodePen o imieniu Vaidehi Baviskar. Jak widać na zrzucie ekranu tego przykładu, nad polem wejściowym znajduje się nagłówek „Wybierz datę:”.

Mówi użytkownikowi, aby wybrał datę. Domyślnie możesz zobaczyć aktualną datę w polu wejściowym. Po kliknięciu pola wprowadzania lub małej ikony pojawia się selektor daty.

W tym narzędziu datownika możesz zobaczyć wszystkie daty z bieżącego miesiąca.

Możesz wybrać datę z tego narzędzia, a wybrana data pojawi się w polu wejściowym.

Więcej informacji / Pobierz

Bootstrap datepicker przez użytkownika CodePen

To jest bardzo prosty przykład datownika. Wygląda bardzo podobnie do poprzedniego przykładu. W tym przykładzie są dwa pola wejściowe z dwoma selektorami daty.

Bieżąca data jest wyróżniona żółtym tłem w tym przykładzie selektora dat, a gdy użytkownik kliknie konkretną datę, jej kolor tła zmienia się na niebieski.

Gdy bieżąca data jest podświetlona, ​​użytkownik może łatwo znaleźć bieżącą datę za pomocą tego narzędzia i łatwo wybrać datę. Jeśli chcą wybrać aktualną datę, mogą to zrobić szybko, gdy aktualna data jest podświetlona.

Mogą natychmiast znaleźć aktualną datę ze wszystkich dat w bieżącym miesiącu.

Więcej informacji / Pobierz

Szablon Datepicker autorstwa Jowi Englis

Jest to standardowy przykład datepickera stworzony przez Jowi Englis, użytkownika CodePen. Jak widać na zrzucie ekranu, nad polem wejściowym znajduje się nagłówek „Data kalendarza:”.

Zawsze możesz to zmienić na coś bardziej znaczącego i odpowiedniego. Ikona kalendarza w polu wprowadzania wygląda fajnie. Tekst zastępczy pola wejściowego to „Wybierz datę”, co jest bardzo odpowiednim podpisem dla tego selektora dat.

Po kliknięciu pola wprowadzania pojawi się piękny selektor dat, w którym aktualna data jest podświetlona niebieskim tłem.

Z tego selektora daty użytkownicy Twojej witryny mogą nie tylko wybrać datę z bieżącego miesiąca, ale także wybrać datę z innego miesiąca i innego roku.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa Richarda Bailey

To jest niesamowity przykład datownika Bootstrap opracowany przez Richarda Baileya. Ten szablon selektora dat pozwoli użytkownikom Twojej aplikacji internetowej wybrać zakres dat. W tym przykładzie są więc dwa selektory dat.

Istnieją dwa pola wprowadzania, kliknięcie każdego z nich powoduje wyświetlenie selektora daty. Jeśli chcesz, aby odwiedzający Twoją witrynę wybrali zakres dat, możesz skorzystać z tego bezpłatnego szablonu.

Ponieważ jest w pełni konfigurowalny, możesz ulepszyć projekt , modyfikując kod. Gdy użytkownik wybierze dwie daty z selektorów dat, zakres dat pojawi się na stronie internetowej, tuż pod polami wejściowymi.

Więcej informacji / Pobierz

Datepicker Bootstrap autorstwa Jose Castillo

Jeśli potrzebujesz selektora danych dla swojej witryny, nie musisz już tworzyć go od zera. Możesz pobrać ten szablon i zintegrować go ze swoją witryną.

Możesz dostosować projekt, aby wyglądał lepiej. Jak widać na powyższym zrzucie ekranu, istnieją dwa pola wejściowe . Po kliknięciu dowolnego z nich na ekranie pojawia się selektor dat.

Aktualna data ma żółte tło. Dzięki temu użytkownik może szybko zidentyfikować go z listy dat wyświetlanych w selektorze dat.

Więcej informacji / Pobierz

Bootstrap datepickers autorstwa Valentin

Ten długopis ma dwa pola wprowadzania z dwoma selektorami daty. Po kliknięciu pola wejściowego selektor dat pojawia się bardzo płynnie. Możesz zobaczyć bardzo fajny efekt wizualny, gdy otwiera się selektor dat.

Takie efekty wizualne znacznie poprawiają wrażenia użytkownika. Możesz użyć tego szablonu, jeśli szukasz bardzo fajnego przykładu selektora dat. To niesamowity przykład datepickera zaprojektowany z Bootstrapem.

Aby przyjrzeć się bliżej temu przykładowi, kliknij przycisk „Podgląd” poniżej i zobacz ładny podgląd tego przykładu.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa Atanas Atanasov

To jest piękny przykład darmowego selektora dat Bootstrap. Jeśli szukasz bardzo standardowego selektora dat, użyj tego.

Po kliknięciu ikony kalendarza pojawia się selektor dat. Chociaż ten przykład selektora dat nie podkreśla bieżącej daty, wygląda na bardzo prosty i wydajny.

Możesz to zobaczyć w polu wprowadzania, gdy wybierzesz konkretną datę. Jeśli potrzebujesz nagłówka nad polem wejściowym, możesz go dodać.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa M Gambilla

To fajny przykład datepickera opracowany przez M Gambilla. Jest pole tekstowe, w którym możesz wpisać tekst. Nad polem tekstowym znajduje się nagłówek z napisem „Wprowadź datę”. Mówi użytkownikowi, aby wprowadzić datę.

Po kliknięciu pola tekstowego pojawia się selektor dat. Po kliknięciu daty jest ona wyświetlana w polu tekstowym . Poniżej pola tekstowego znajduje się obszar do wyświetlania danych wyjściowych. W tym obszarze możesz zobaczyć tekst o nazwie „Data to:”.

Więcej informacji / Pobierz

Bootstrap datepicker autorstwa tuanitpro

Ten przykład selektora dat Bootstrap daje proste pole tekstowe. Po kliknięciu pojawia się selektor dat. Wybraną datę możesz zobaczyć w polu tekstowym. Jest to pokazane w ten sposób: „22.08.2019”. Jeśli wolisz inny format daty , zmień format daty w kodzie.

A jeśli potrzebujesz ulepszyć projekt, możesz to zrobić.

Ponieważ jest to przykładowy kod typu open source, możesz wprowadzać zmiany w kodzie, aby poprawić wygląd szablonu w Twojej witrynie.

Więcej informacji / Pobierz

Szablon Datepicker autorstwa Priyank Panchal

Jest to wysokiej jakości szablon selektora dat opracowany przez Priyank Panchal. Zawiera dwa pola wejściowe, pole „Od” i pole „Do”. Te pola pozwalają użytkownikowi wybrać zakres dat.

Po kliknięciu pól wejściowych pojawiają się selektory dat.

Wybrane daty są pokazane w polach wejściowych. W tym przykładzie jest też przycisk. Po kliknięciu zobaczysz komunikat . Możesz określić, co się stanie, gdy użytkownik kliknie przycisk z kodu.

Jeśli nie potrzebujesz tego przycisku, możesz go usunąć.

Więcej informacji / Pobierz

Datepicker autorstwa Jacoba Montgomery

Ten przykład selektora daty ma przycisk, którego kliknięcie otwiera modalny. Następnie możesz zobaczyć pole tekstowe, klikając, które pokazuje selektor dat. Nagłówek umieszczony nad tym polem wejściowym to „Datepicker”.

Jeśli zamierzasz korzystać z tego szablonu, zmień nagłówek na bardziej odpowiedni lub usuń go, jeśli uważasz, że jest to niepotrzebne.

Poniżej pola tekstowego znajduje się przycisk „Zamknij”. Kliknięcie go zamyka modalny.

Więcej informacji / Pobierz

Przykład Datepicker autorstwa Javiera Burona

To kolejny fajny przykład datepickera autorstwa Javiera Burona. Jak widać na powyższym zrzucie ekranu, powyżej znajduje się pole tekstowe do nagłówka.

Gdy użytkownik kliknie pole wprowadzania, zobaczy selektor dat, za pomocą którego może wybrać datę. Wybrana data jest wyświetlana w polu tekstowym. Powinieneś zmienić go na coś bardziej znaczącego i odpowiedniego, jeśli zamierzasz zintegrować ten szablon ze swoją witryną.

Jest również pokazywany jako wynik poniżej pola tekstowego. Wynik jest przedstawiony w następujący sposób: 'Wynik: 22.09.2029'. Rozważ pominięcie sekcji wyjściowej, jeśli jej nie potrzebujesz.

Więcej informacji / Pobierz

Datepicker Bootstrap autorstwa Petera Schoning

Ten niesamowity darmowy przykład datownika Bootstrap stworzony przez Petera Schoninga ma ładne zielone tło.

Ten przykład zawiera pole tekstowe, które otwiera selektor dat. Pokazuje daty bieżącego miesiąca, których możesz użyć do wyboru.

Możesz również wybrać datę z innego miesiąca niż rok bieżący lub z innego roku . Wybrana data jest pokazana w tym polu tekstowym: '08/15/2029′.

Możesz zmienić format daty z kodu, dostosowując go do swoich potrzeb.

Więcej informacji / Pobierz

Przykład Datepicker przez użytkownika CodePen

Ten długopis to formularz wyszukiwania. Posiada pole tekstowe z nagłówkiem „Some Criteria”, w którym użytkownik musi wprowadzić kryteria wyszukiwania. Następnie użytkownik musi wprowadzić zakres dat, korzystając z dostarczonych pól wejściowych.

Po kliknięciu pól wejściowych pojawiają się selektory dat, za pomocą których użytkownik może wybrać daty dla zakresu dat. Gdy użytkownik określi zakres dat, może przeprowadzić operację wyszukiwania, klikając przycisk „Szukaj”.

Użytkownik może również wyczyścić pola wejściowe, klikając przycisk „Wyczyść”. Należy pamiętać, że kliknięcie przycisku „Szukaj” nie spowoduje wyświetlenia żadnych wyników wyszukiwania, ponieważ jest to tylko prosty przykład ilustrujący selektory dat.

To nie jest kompletna aplikacja.

Więcej informacji / Pobierz

Końcowe przemyślenia

W tym artykule masz listę wysokiej jakości przykładów selektora dat Bootstrap. Mam nadzieję, że je polubiłeś. Jeśli przyjrzysz się kodowi tych przykładów, zrozumiesz, że tworzenie tego rodzaju selektorów dat to proste zadanie.

Stworzenie selektora dat nie zajmie dużo czasu. Ale po co pisać kod od zera , kiedy otrzymujesz gotowe, darmowe szablony? Użycie jednego z tych przykładów selektora dat zamiast tworzenia go od zera to doskonały pomysł.

Jeśli uważasz, że przykład wymaga poprawy, możesz to łatwo zrobić, modyfikując kod. W ten sposób możesz być bardzo produktywny.

Korzystając z szablonów, możesz szybko ukończyć projekt strony internetowej. Te bezpłatne szablony przyspieszą Twój proces rozwoju.