25 exemple de date bootstrap gratuite la îndemână

Am ajuns deseori să examinăm diferite fragmente gratuite de date Bootstrap, care ne-au lăsat cu o colecție extinsă de soluții practice.

Nu doar atât!

În loc să ne bazăm EXCLUSIV pe instrumente terță parte, am creat și câteva dintre intrările noastre de selectare a datei.

Care sunt acum disponibile pentru dvs. gratuit .

Puteți face viața utilizatorilor dvs. mai ușoară și mai convenabilă. Și al tău, deoarece nu trebuie să creezi un selector de date de la zero.

Începeți AICI, fie că este vorba de un formular legat de dată sau de o căutare pe care sunteți interesat să o adăugați la aplicația dvs. web.

Gata cu munca manuala. Câteva clicuri și gata!

Calendar V09

Lăsați ca numele alternativelor noastre de selecție de date să nu vă păcălească, deoarece le-am lansat împreună cu colecția noastră completă de șabloane de calendar.

Dar să ne aruncăm direct în ea.

În loc să aleagă data potrivită, acest fragment gratuit depășește un nivel suplimentar cu selectarea timpului. Când faceți clic pe bară, se deschide o colecție de opțiuni cu comenzi rapide în partea de jos.

De asemenea, puteți utiliza chevronul îndreptat în sus pentru a adăuga secunde sau puteți apăsa semnul X pentru a închide selectorul de date.

Mai multe informații / Descarcă

Calendar V12

Calendar V12 este un selector de date Bootstrap cu un aspect modern și minimalist . Datorită aspectului îngrijit, îl puteți integra fără efort în diferite teme de site-uri web și design de aplicații așa cum este.

Widgetul are un efect de trecere cu mouse-ul, un buton pentru data de astăzi, o opțiune de ștergere a selecției și butonul de închidere.

Afișează în mod convenabil luna și anul în partea de sus cu săgeți la stânga și la dreapta pentru a trece în mod convenabil la lunile următoare sau anterioare.

Mai multe informații / Descarcă

Calendar V13

Dacă oferiți utilizatorilor să aleagă un interval de date pentru serviciile dvs., rezervare, oricare ar fi, Calendar V13 este modalitatea corectă de a alege. Acest selector de date Bootstrap are două widget -uri, ceea ce face ca alegerea datelor potrivite să fie foarte convenabilă.

Designul fragmentului gratuit este același cu cel de mai sus sport, adică minim și la obiect.

Când utilizatorul selectează data, aceasta apare în bară în format zi/lună/an. De asemenea, pot șterge RAPID selecția sau pot alege data de astăzi cu un singur clic.

Mai multe informații / Descarcă

Calendar V14

Dacă căutați un selector de date Bootstrap minimalist care face treaba foarte bine, veți asista la un rezultat grozav cu Calendar V14.

Acest instrument funcționează bine din cutie datorită simplității sale care se aplică oricărui design web. Acesta este cu adevărat doar un selector de date fără lucruri de lux, funcții suplimentare, butoane de resetare etc.

Descărcați-l, încorporați-l și gata!

Mai multe informații / Descarcă

Calendar V15

Acest selector de interval de date calendaristice este util pentru rezervările online, fie pentru o cameră de hotel, o mașină sau altceva.

Designul este foarte simplu , așa că nici măcar nu va trebui să schimbați nimic, mai degrabă folosiți-l din cutie. Cu toate acestea, puteți schimba culoarea datei evidențiate sau puteți merge cu versiunea implicită.

Deoarece acesta este un selector de date Bootstrap, știți că performanța sa este excelentă pe dispozitivele mobile și desktop.

Mai multe informații / Descarcă

Calendar V16

Păstrați lucrurile minime, dar îndrăznețe cu acest calendar/selector de date inline, pe care acum îl puteți încorpora în proiectul sau aplicația dvs. în mod liber.

Aspectul curat pare frumos pe diferite dimensiuni de ecran pentru a vă bucura utilizatorii.

Structura de design prezintă luna și anul în partea de sus, urmate de zilele lucrătoare de duminică până sâmbătă și de date. Un utilizator poate folosi, de asemenea, POINTERS din stânga și din dreapta pentru a alege luni diferite.

Mai multe informații / Descarcă

Calendar V17

Iată un șablon Bootstrap proaspăt care prezintă un calendar integrat cu o bară de rezultate deasupra. Odată ce utilizatorul selectează o dată, aceasta apare în bară în următoarea ordine – lună/zi/an .

Bara de rezultate este goală în mod implicit și apare cu un text de îndemn, îndemnând utilizatorul să aleagă data. În plus, calendarul vine cu o dată de azi preselectată.

Aspectul este flexibil și 100% receptiv la mobil, în timp ce codul PRIETENOS pentru o execuție rapidă.

Mai multe informații / Descarcă

Exemplu de selector de date Bootstrap de către un utilizator CodePen

Acesta este un exemplu gratuit de selector de date Bootstrap. Un utilizator CodePen l-a dezvoltat. Este un șablon complet personalizabil . Faceți modificări în funcție de preferințele dvs.

Acest exemplu oferă un câmp de introducere cu textul substituent „zz.ll.aaaa”. Puteți vedea o pictogramă mică în partea dreaptă a acestui câmp. După ce faceți clic pe acest câmp de introducere, apare un calendar pentru luna și anul curent. Puteți vedea pe el toate datele lunii curente. De asemenea, utilizatorul poate aduce acest calendar făcând clic pe pictograma mică din partea dreaptă.

Când selectați o dată, aceasta devine EVIDENȚATĂ cu culoarea albastră în calendar. Culoarea de fundal a datei selectate devine albastră. La clic pe o dată, data apare imediat în câmpul de introducere.

Mai multe informații / Descarcă

Selector de date de check-in și check-out

Acesta este un alt exemplu excelent de selecție de date Bootstrap dezvoltat de Amanda Louise Acosta Morais. După cum sugerează și numele acestui șablon, acesta permite utilizatorului să selecteze o dată de check-in și check-out.

Există două câmpuri de introducere, cu textul substituent „Înregistrare” și „Înregistrare” în acest șablon. Când utilizatorul face clic pe ele, apare un calendar, astfel încât utilizatorul să poată selecta o dată.

Există pictograme mici de calendar cu texte substituenți care sugerează utilizatorului că selectorii de date se vor deschide la clic pe câmpurile de introducere.

Mai multe informații / Descarcă

Selector de date Bootstrap de Sreekanth Are

Acesta este un șablon de selecție de date foarte util creat de Sreekanth Are. Are o interfață de utilizator frumoasă și curată. Din captura de ecran a acestui șablon, puteți vedea că există un câmp de introducere.

Când utilizatorii dau clic pe el, pot vedea data curentă în câmpul de introducere . Și când utilizatorul face clic pe pictograma calendarului, apare un selector de date. O dată este plasată în câmpul de introducere la selecție.

Formatul de dată care a fost utilizat este „aaaa-ll-zz”.

Mai multe informații / Descarcă

Selector de date bootstrap cu introducere de material

Acest exemplu de selector de date realizat de Salah Uddin are un aspect material. Pagina web are trei câmpuri de introducere. Când utilizatorul face clic pe al doilea câmp de introducere, va apărea un selector de date foarte modern.

Funcționalitatea este aceeași ca și celelalte datepicker. Singura diferență este că designul este mult mai bun. Arată foarte tare. Acest tip de șablon modern de selecție de date va oferi utilizatorilor aplicației dvs. web o experiență de utilizator uimitoare .

Utilizatorii site-ului dvs. vor adora acest uimitor selector de date. Deci, dacă credeți că acest șablon este suficient de bun, îl puteți utiliza pe site-ul dvs. web.

Mai multe informații / Descarcă

Selector de date Bootstrap de Vaidehi Baviskar

Acesta este un șablon de selecție de date Bootstrap, dezvoltat de un utilizator CodePen numit Vaidehi Baviskar. După cum puteți vedea din captura de ecran a acestui exemplu, există un titlu deasupra câmpului de introducere, „Selectați data:”.

Îi spune utilizatorului să aleagă o dată. În mod implicit, puteți vedea data curentă în câmpul de introducere. Când faceți clic pe câmpul de introducere sau pe pictograma mică , apare selectorul de date.

Puteți vedea toate datele din luna curentă în acest instrument de selectare a datelor.

Puteți selecta o dată din acest instrument, iar data selectată va apărea în câmpul de introducere.

Mai multe informații / Descarcă

Selector de date Bootstrap de către un utilizator CodePen

Acesta este un exemplu foarte simplu de alegere a datei. Arată foarte asemănător cu exemplul anterior. În acest exemplu, există două câmpuri de intrare cu două datepicker.

Data curentă este evidențiată cu un fundal galben în acest exemplu de selectare a datei, iar atunci când utilizatorul face clic pe o anumită dată, culoarea de fundal se schimbă în albastru.

Pe măsură ce data curentă este evidențiată, utilizatorului devine ușor să găsească rapid data curentă din acest instrument și să selecteze cu ușurință o dată. Dacă doresc să selecteze data curentă, o pot face rapid, deoarece data curentă este evidențiată.

Ei pot identifica instantaneu data curentă din toate datele din luna curentă.

Mai multe informații / Descarcă

Șablon Datepicker de Jowi Englis

Acesta este un exemplu standard de selecție de date realizat de Jowi Englis, un utilizator CodePen. După cum putem vedea din captura de ecran, există un titlu deasupra câmpului de introducere, „Data calendarului:”.

Îl poți schimba oricând cu ceva mai semnificativ și mai potrivit. Pictograma calendarului din câmpul de introducere arată bine. Textul substituent al câmpului de introducere este „Selectați o dată”, care este o legendă foarte potrivită pentru acest selector de date.

Când faceți clic pe câmpul de introducere, apare un frumos selector de date, unde data curentă este evidențiată cu un fundal albastru.

Din acest selector de date, utilizatorii site-ului dvs. nu pot selecta doar o dată din luna curentă, ei pot selecta și o dată dintr-o lună și un an diferit.

Mai multe informații / Descarcă

Selector de date Bootstrap de Richard Bailey

Acesta este un exemplu minunat de selecție de date Bootstrap dezvoltat de Richard Bailey. Acest șablon de selecție de date va permite utilizatorilor aplicației dvs. web să selecteze un interval de date. Deci, în acest exemplu sunt furnizate două datepicker.

Există două câmpuri de introducere, făcând clic pe fiecare dintre ele, se afișează un selector de date. Dacă doriți ca vizitatorii site-ului dvs. să selecteze un interval de date, puteți utiliza acest șablon gratuit.

Deoarece este complet personalizabil, puteți îmbunătăți designul modificând codul. Când utilizatorul selectează două date din selectorul de date, intervalul de date apare pe pagina web, chiar sub câmpurile de introducere.

Mai multe informații / Descarcă

Selector de date Bootstrap de Jose Castillo

Dacă aveți nevoie de un selector de date pentru site-ul dvs., nu mai trebuie să faceți unul de la zero. Puteți descărca acest șablon și îl puteți integra pe site-ul dvs. web.

Puteți modifica designul astfel încât să arate mai bine. După cum se vede din captura de ecran de mai sus, există două câmpuri de introducere . Când faceți clic pe oricare dintre ele, pe ecran apare un selector de date.

Data curentă are un fundal galben. Astfel, utilizatorul îl poate identifica rapid din lista de date afișată în selectorul de date.

Mai multe informații / Descarcă

Bootstrap Datepickers de Valentin

Acest stilou are două câmpuri de introducere cu două selector de date. Când faceți clic pe un câmp de introducere, un selector de date apare foarte ușor. Puteți vedea un efect vizual foarte tare când se deschide selectorul de date.

Astfel de efecte vizuale îmbunătățesc foarte mult experiența utilizatorului. Puteți folosi acest șablon dacă sunteți în căutarea unui exemplu de selecție de date foarte grozav. Este un exemplu minunat de selector de date conceput cu Bootstrap.

Pentru a arunca o privire mai atentă la acest exemplu, faceți clic pe butonul „Previzualizare” de mai jos și vedeți o previzualizare frumoasă a acestui exemplu.

Mai multe informații / Descarcă

Selector de date Bootstrap de Atanas Atanasov

Acesta este un exemplu frumos de selector de date Bootstrap gratuit. Dacă sunteți în căutarea unui selector de date foarte standard , utilizați-l pe acesta.

Când faceți clic pe pictograma calendar, apare selectorul de date. Deși acest exemplu de selecție de date nu evidențiază data curentă, pare foarte simplu și puternic.

Îl puteți vedea în câmpul de introducere când selectați o anumită dată. Dacă aveți nevoie de un titlu deasupra câmpului de introducere, puteți adăuga unul.

Mai multe informații / Descarcă

Selector de date Bootstrap de M Gambill

Acesta este un exemplu de selecție de date, dezvoltat de M Gambill. Există un câmp de text în care puteți introduce ceva text. Deasupra câmpului de text, există un titlu cu „Introduceți o dată”. Îi spune utilizatorului să introducă o dată.

Când faceți clic pe câmpul de text, apare un selector de date. Când faceți clic pe o dată, aceasta este afișată în câmpul de text . Există o zonă sub câmpul de text pentru afișarea rezultatului. În acea zonă, puteți vedea un text numit „Data este:”.

Mai multe informații / Descarcă

Bootstrap Datepicker de la tuanitpro

Acest exemplu de selecție de date Bootstrap vă oferă o casetă de text simplă. Când faceți clic pe el, apare un selector de date. Puteți vedea data selectată în câmpul de text. Se arată în felul următor: „22/08/2019”. Dacă preferați un alt format de dată , schimbați formatul de dată din cod.

Și dacă trebuie să îmbunătățiți designul, o puteți face.

Deoarece este un eșantion de cod open-source, puteți face modificări codului pentru a îmbunătăți șablonul să arate bine pe site-ul dvs. web.

Mai multe informații / Descarcă

Șablon Datepicker de Priyank Panchal

Acesta este un șablon de selecție de date de înaltă calitate dezvoltat de Priyank Panchal. Are două câmpuri de intrare, un câmp „De la” și un câmp „Către”. Aceste câmpuri permit utilizatorului să selecteze un interval de date.

Când faceți clic pe câmpurile de introducere, apar selecționatorii de date.

Datele selectate sunt afișate în câmpurile de introducere. Există și un buton în acest exemplu. Când faceți clic pe el, puteți vedea un mesaj . Puteți specifica ce se va întâmpla când utilizatorul face clic pe butonul din cod.

Dacă nu aveți nevoie de acest buton, îl puteți elimina.

Mai multe informații / Descarcă

Datepicker de Jacob Montgomery

Acest exemplu de selecție de date are un buton, făcând clic, care deschide un mod. Apoi puteți vedea un câmp de text, făcând clic, care arată un selector de date. Titlul plasat deasupra acestui câmp de introducere este „Datepicker”.

Dacă intenționați să utilizați acest șablon, schimbați titlul cu ceva mai adecvat sau eliminați-l dacă credeți că nu este necesar.

Există un buton „Închidere” sub câmpul de text. Făcând clic pe el, se închide modalul.

Mai multe informații / Descarcă

Exemplu Datepicker de Javier Buron

Acesta este un alt exemplu de selecție de date făcut de Javier Buron. După cum puteți vedea din captura de ecran de mai sus, există un câmp de text deasupra pentru titlu.

Când utilizatorul face clic pe câmpul de introducere, poate vedea un selector de date pe care îl poate folosi pentru a selecta o dată. Când este selectată o dată, aceasta este afișată în câmpul de text. Ar trebui să îl schimbați cu ceva mai semnificativ și mai potrivit dacă doriți să integrați acest șablon în site-ul dvs. web.

Este afișat și ca rezultat sub câmpul de text. Ieșirea este afișată în acest fel: „Rezultat: 22/09/2029”. Luați în considerare omiterea secțiunii de ieșire dacă nu o aveți nevoie.

Mai multe informații / Descarcă

Selector de date Bootstrap de Peter Schoning

Acest exemplu uimitor de selector de date Bootstrap gratuit realizat de Peter Schoning are un fundal verde frumos.

Acest exemplu vine cu un câmp de text care deschide un selector de date. Vă arată datele lunii curente, pe care le puteți utiliza pentru selecția dvs.

De asemenea, puteți selecta o dată dintr-o lună diferită de anul curent sau dintr-un an diferit . Data selectată este afișată în acest câmp de text: '15/08/2029′.

Puteți schimba formatul datei din cod, adaptându-l la nevoile dvs.

Mai multe informații / Descarcă

Exemplu Datepicker de către un utilizator CodePen

Acest stilou este un formular de căutare. Are un câmp de text cu titlul „Unele criterii”, unde utilizatorul trebuie să introducă criteriile de căutare. Apoi, utilizatorul trebuie să introducă un interval de date utilizând câmpurile de introducere furnizate.

Făcând clic pe câmpurile de introducere, apar selecționatorii de date, folosindu-se de către utilizatorul să aleagă datele pentru intervalul de date. Când utilizatorul specifică intervalul de date, poate efectua o operațiune de căutare făcând clic pe butonul „Căutare”.

De asemenea, utilizatorul poate șterge câmpurile de introducere făcând clic pe butonul „Șterge”. Rețineți că făcând clic pe butonul „Căutare” nu vă va afișa niciun rezultat al căutării, deoarece acesta este doar un exemplu simplu care demonstrează selecționatorii de date.

Nu este o aplicație completă .

Mai multe informații / Descarcă

Gânduri finale

În acest articol, aveți o listă de exemple de selecție de date Bootstrap de înaltă calitate. Sper că v-au plăcut. Dacă examinați codul acestor exemple, puteți înțelege că realizarea acestui tip de datepicker este o muncă simplă.

Crearea unui selector de date nu va dura mult timp. Dar de ce să scrieți cod de la zero când obțineți șabloane gratuite gata făcute? Folosirea unuia dintre aceste exemple de selecție de date în loc să faci unul de la zero este o idee excelentă.

Dacă simțiți că un exemplu trebuie îmbunătățit, o puteți face cu ușurință modificând codul. În acest fel, poți fi foarte productiv.

Folosind șabloane, vă puteți finaliza rapid proiectul site-ului. Aceste șabloane gratuite vă vor accelera procesul de dezvoltare.