13 Mahusay na Dinisenyo na Mga Pumili ng Petsa ng React

Mag-react ng mga petsa

magkaroon ng isang maayos ang maayos na pumili ng petsa upang ang bisita ay hindi mag-aksaya ng isang segundo sa pagpili ng petsa ng kapanganakan o kung kailan nais niyang makatanggap ng pagkakasunud-sunod ng produktong nabili lamang sa aming eCommerce. Dahil dito dinadalhan ka namin ng 13 tagapili ng petsa at oras sa React na nailalarawan sa pamamagitan ng kanilang disenyo at ng kanilang mahusay na karanasan sa gumagamit.

Ang mga selectors na ito ay mula sa React.js, ang open source Javascript library na nagbibigay-daan sa amin upang muling likhain ang ating sarili sa ilan sa kanilang magagaling na karanasan kapag pipiliin ang petsa at ang tukoy na araw para sa isang kaganapan sa website na binibisita namin. Gawin natin ito nang hindi nakakalimutan upang ipaalala sa iyo na mayroon ka isa pang listahan ng tab din sa Javascript React.js.

Mag-reaksyon ng maraming tagapili

Mag-reaksyon ng maraming tagapili

Ang datepicker na ito sa React, bukod sa may magandang disenyo, Ito ay nailalarawan sa pamamagitan ng pagpapahintulot sa pagpili ng maraming mga petsa sa kalendaryo na ibinibigay sa amin. Maaari mong mahanap ang demo upang malaman sa situasyon kung paano kumilos ang React selector na ito. Narito ang lugar mo sa Github.

Mag-reaksyon ng katutubong saklaw

Natural

Un tagapili ng petsa sa React.js na kung saan ay nailalarawan sa pamamagitan ng kadalian ng paggamit nito at kung paano ito napapasadyang. Simple sa paglilihi nito, ito ang maximum na tagumpay nito upang maging tagapili ng petsa at oras ng iyong website.

Mga Petsa ng React ng Katutubo

Katutubong React

Ang tagapili ng petsa ng React na ito ay sumusunod sa parehong pattern tulad ng mga naunang mag-convert sa isa pa sa mga nakasaad sa listahang ito. Pati na rin ang kalendaryo, maaari kang pumili ng isang saklaw ng mga araw upang magamit bilang isang filter. Isa pang kawili-wiling tagapili ng reaksyon ng React na mayroon ka na.

Tagapili ng petsa ng RC

React datime

Mayroon kang demo ng tagapili ng petsa ng RC na ito na patuloy na nagpapakita ng mahusay na kalidad tulad ng natitira. Isa sa mga detalye nito ay iyon nag-aalok ng posibilidad na pumili ng oras, kaya't naiiba ito sa iba tungkol dito. Mahusay na karanasan ng gumagamit ay isang mahusay na interface tulad ng tagapili ng petsa at oras sa React.js. Meron ka dito ang iyong Github.

Mag-react sa Kalendaryo

Mag-react sa Kalendaryo

Dito namin ganap na nagtatapon ng oras, upang manatili sa isang tagapili ng petsa sa React.js. Ito ay katulad ng dati na may malinaw na tema, ngunit nakikilala ito sa pamamagitan ng paglitaw bilang isang bar na maaaring mabuksan upang mapili ang petsa na gusto namin. Narito ka na ang iyong Github upang pumunta sa source code sa halip na ang demo.

Tagapili ng petsa ng React ng Mobile

React ng mobile

Ang tagapili ng petsa na ito na nakatuon sa mobile mula sa React.js ay naiiba sa iba pa para sa bigat ng bigat. Nakatayo ito para sa disenyo nito sa pamamagitan ng pagpili ng iba't ibang mga elemento ng petsa sa pamamagitan ng isang digital wheel. Meron kayo ang iyong Github upang maaari kang makakuha ng mas malapit sa source code nito at sa gayon ipatupad ito sa iyong website.

Walang-hanggan na Kalendaryo ng React

Walang katapusang kalendaryo

Ang walang katapusang tagapili ng petsa na itinayo kasama ng React ay nailalarawan sa pamamagitan ng mga tema, suporta sa keyboard, pagpipilian ng saklaw at lokasyon. Isa sa mga pinaka-komprehensibong pumili ng petsa sa buong listahan. Narito ka na ang iyong Github para sa lahat ng natitirang impormasyon pagkatapos mong nasiyahan ang demo. Sa panel magkakaroon ka ng buong serye ng mga pagpipilian upang subukan ang bawat isa at sa gayon makakuha ng isang mas mahusay na ideya ng mga posibilidad nito.

Mga Petsa ng React

Mag-react ng mga petsa

Isang tagapili ng petsa sa React na nakikilala ng ma-optimize para sa mobile at ito ay ipinakita sa napakahusay na ugali. Mayroon ding ang iyong Github upang malaman mo ang bawat detalye nito at sa gayon dalhin ito sa iyong website. Mayroon kang maraming iba't ibang mga pagpipilian upang mula sa demo maaari mong i-configure ito sa iyong paraan at sa gayon maaari kang makakuha ng higit dito.

Mag-reaksyon ng tagapili ng katutubong

MobileReact

Inirerekumenda namin na pumasa ka ng kanyang Github upang malaman ang disenyo ng tagapili ng petsa sa React. Maaari nating makilala ito sapagkat gamitin ang API DataPickerAndroid, TimePickerAndroid at DatePicker iOS. Kaya't ang interface nito ay magiging pamilyar sa iyo kung sanay ka sa pagharap sa anuman sa mga OS para sa mga mobile device. Perpekto upang ipatupad ito sa isang app para sa alinman sa dalawang nabanggit na operating system tulad ng Android at iOS.

Pumili ng simpleng React

Simpleng React

Isang napaka-simpleng tagapili ng petsa sa React.js na maaari mong makita ang maraming mga halimbawa ng paggamit mula sa demo website. Mayroon din kami ang iyong Github upang malaman ang natitirang mga detalye ng simpleng tagapili na ito sa React. Ang isa pang kawili-wili hindi lamang para sa pagiging simple nito, ngunit para dito iba't ibang mga pagpipilian sa pagpapasadya upang bigyan ang aming website ng isang napaka-elegante at simpleng isa.

Sandali ng pag-input

Sandali ng pag-input

Ang isa pang tagapili ng petsa kung saan idinagdag ang pagpipilian upang piliin din ang oras, kaya kumpleto na ito. Gumagana sa mga momentj at ang disenyo ay nagmula sa parehong website ng Dribbble. Tiyak na mamahalin mo ito para sa disenyo nito at ang gilas na ibinibigay nito sa website kung saan ito naka-install. Ito ang iyong Github upang hindi ka makaligtaan ng anupaman sa isa pang mahusay na halimbawa ng kung ano ang isang tagapili ng petsa at oras.

React day picker

React selector

Ang tagapili ng petsa na ito sa React ay nailalarawan ng 9KB nito sa gzipper, bukod sa pagiging napapasadyang mabuti, matatagpuan, na sumusuporta sa ARIA at hindi nakasalalay sa anumang panlabas. Na-localizable nangangahulugan kami na maaari naming piliin ang wika ng kalendaryo upang ito ay isinalin sa aming wika. Isa pa sa mga pinaka kumpletong tagapili ng buong listahan ng React at iyon ay ginagawang mahirap para sa amin na magpasya sa isa.

Reaksyon ng DatepickerJS

tagapili ng petsa

Mayroon kang demo tulad ng natitirang malaman sa lugar ng tagapili ng petsa na ito na nailalarawan sa pamamagitan ng isang tool bar na kapag pinindot ay bubukas ang kalendaryo. Mayroon itong isang hover selector at isang tagapili ng de-kalidad na disenyo. Ay minimalist, kaya maaari itong isama sa anumang uri ng website. Nasa iyo ang kanyang Github upang malaman ang natitirang mga detalye at gamitin ang code hangga't gusto mo para sa iyong website.

Iiwan ka namin ng isa pang listahan, bagaman ang oras na ito ng mga form sa CSS upang ang ipatupad mula ngayon at mayroon kang isang mahusay na repertoire upang piliin ang form ng kagandahan para sa iyong website.


Maging una sa komento

Iwanan ang iyong puna

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan ng *

*

*

  1. Responsable para sa data: Miguel Ángel Gatón
  2. Layunin ng data: Kontrolin ang SPAM, pamamahala ng komento.
  3. Legitimation: Ang iyong pahintulot
  4. Komunikasyon ng data: Ang data ay hindi maiparating sa mga third party maliban sa ligal na obligasyon.
  5. Imbakan ng data: Ang database na naka-host ng Occentus Networks (EU)
  6. Mga Karapatan: Sa anumang oras maaari mong limitahan, mabawi at tanggalin ang iyong impormasyon.