13 Uiters ontwerpte reaksiedatumkiesers

Reageer datums

Het 'n goed gereëlde datumkieser is belangrik sodat die besoeker nie 'n sekonde mors om die geboortedatum te kies of wanneer hy die bestelling van die produk wat hy pas in ons e-handel gekoop het, wil ontvang nie. Om hierdie rede bring ons 13 keuses vir datum en tyd in React wat gekenmerk word deur hul ontwerp en uitstekende gebruikerservaring.

Hierdie keurders kom van React.js, die open source Javascript-biblioteek Dit stel ons in staat om van hul wonderlike ervarings te herskep wanneer ons die spesifieke datum en dag moet kies vir 'n geleentheid op die webwerf wat ons besoek. Laat ons dit doen sonder om te vergeet om u daaraan te herinner 'n ander oortjie-lys ook in Javascript React.js.

Reageer meervoudige keurder

Reageer meervoudige keurder

Hierdie datapicker in Reageer, afgesien van het 'n goeie ontwerp, Dit word gekenmerk deur die keuse van verskeie datums in die kalender wat dit aan ons gee, toe te laat. U kan die demo vind om in situ te weet hoe hierdie React-kieser optree. Hier het jy sy plek in GitHub.

Reageer inheemse reeks

Native

Un datumkieser in React.js wat gekenmerk word deur die gebruiksgemak en hoe aanpasbaar dit is. Eenvoudig in sy konsepsie, dit is die grootste sukses om die datum- en tydkieser van u webwerf te word.

Inheemse reaksiedatums

Inheemse reaksie

Hierdie React-datakieser volg dieselfde patroon as die vorige omskakel in 'n ander een wat in hierdie lys aangedui word. Behalwe kalender, kan u 'n reeks dae kies om as filter te gebruik. Nog 'n interessante React-datumkieser wat u tot u beskikking het.

RC datum kieser

Reageer datyd

U het die demo van hierdie RC-datumkieser wat soos die res steeds uitstekende gehalte toon. Een van die besonderhede daarvan is dat bied die moontlikheid om die tyd te kies, dit verskil dus van die ander in hierdie verband. Goeie gebruikerservaring is 'n uitstekende koppelvlak soos datum- en tydkieser in React.js. Jy het hier jou Github.

Reageer Kalender

Reageer Kalender

Hier gaan ons heeltemal van die tyd af om by 'n datumkieser in React.js te bly. Dit is soortgelyk aan die vorige een met die duidelike tema, maar dit word onderskei deur te verskyn as 'n balk wat oopgemaak kan word om die gewenste datum te kies. Hier het jy jou Github om na die bronkode te gaan in plaas van die demo.

Mobiele reaktiedatumkieser

Reageer selfoon

Hierdie datumkieser wat toegewy is aan mobiele van React.js, verskil van die res vir die weeg van baie min. Dit staan ​​uit vir sy ontwerp deur die verskillende elemente van die datum deur middel van 'n digitale wiel te kies. Jy het jou Github sodat u nader aan die bronkode kan kom en dit op u webwerf kan implementeer.

Oneindige reaksie kalender

Oneindige kalender

Hierdie oneindige datumkieser wat met React gebou is, word gekenmerk deur temas, sleutelbordondersteuning, reekskeuse en ligging. Een van die omvattendste datumkiesers op die hele lys. Hier het jy jou Github vir al die oorblywende inligting nadat u die demo geniet het. In die paneel sal u die hele reeks opsies hê om elkeen te probeer en sodoende 'n beter idee te kry van die moontlikhede daarvan.

Reageer datums

Reageer datums

'N Datumkieser in React wat onderskei word deur geoptimaliseer word vir mobiele en dit word met baie goeie maniere aangebied. Het ook jou Github sodat u alle besonderhede daarvan kan ken en dit na u webwerf kan neem. U het 'n groot verskeidenheid opsies, sodat u dit op u manier kan instel en sodoende meer daaruit kan haal.

Reageer inheemse keurder

Mobiele reaksie

Ons beveel aan dat u slaag deur sy Github om die ontwerp van hierdie datumkieser in React te ken. Ons kan dit onderskei omdat gebruik die API's DataPickerAndroid, TimePickerAndroid en DatePicker iOS. Dus sal die koppelvlak vir u bekend klink as u gewoond is aan die hantering van enige van hierdie bedryfstelsels vir mobiele toestelle. Ideaal om dit in 'n app vir een van die twee genoemde bedryfstelsels soos Android en iOS te implementeer.

Eenvoudige React-kieser

Eenvoudige reaksie

'N Baie eenvoudige datumkieser in React.js wat u op die demo-webwerf verskeie voorbeelde van gebruik kan vind. Ons het ook jou Github om die res van die besonderhede van hierdie eenvoudige keurder in React te ken. Nog 'n interessante nie net vir sy eenvoud nie, maar ook vir sy verskillende aanpassingsopsies om ons webwerf 'n baie elegante en eenvoudige webwerf te bied.

Invoermoment

Invoermoment

'N Ander datakieser word bygevoeg, die opsie om ook die tyd te kies, sodat dit volledig is. Werk met momentjs en die ontwerp kom van dieselfde Dribbble-webwerf. U sal dit beslis liefhê vir sy ontwerp en die elegansie wat dit gee aan die webwerf waar dit geïnstalleer is. Dit is jou Github sodat u niks mis met 'n ander goeie voorbeeld van wat 'n datum- en tydkieser is nie.

Reageer dagkieser

Reageer-kieser

Hierdie datumkieser in React word gekenmerk deur sy 9KB in gzipper, behalwe dat dit bestaan goed aanpasbaar, opspoorbaar, wat ARIA ondersteun en nie van iets buite afhanklik is nie. Lokaliseerbaar bedoel ons dat ons die taal van die kalender kan kies sodat dit in ons taal vertaal word. Nog een van die mees volledige keurders van hierdie hele React-lys, wat dit vir ons moeilik maak om daaroor te besluit.

Datepicker ReactJS

Datapicker

U het die demo soos die ander om hierdie datakieser ter plaatse te ken, wat gekenmerk word deur 'n werkbalk wat die kalender oopmaak as dit ingedruk word. Dit het 'n sweefkieser en is 'n keurder van hoë gehalte in ontwerp. Is minimalisties, sodat dit geïntegreer kan word op enige tipe webwerf. U het hul Github om die res van die besonderhede uit te vind en die kode te gebruik soos u wil vir u webwerf.

Ons laat u met 'n ander lys, alhoewel hierdie tyd van vorms in CSS sodat die implementeer van nou af en u het 'n goeie repertorium waar u die vorm van elegansie vir u webwerf kan kies.


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

Wees die eerste om te kommentaar lewer

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.