Реакциядагы 13 мыкты иштелип чыккан күн тандоочулар

Реакциянын даталары

бар жакшы уюштурулган даты теримчи мааниге ээ келүүчү туулган күнүн тандоодо же биздин электрондук соодада жаңы эле сатып алган өнүмдүн буйрутмасын алгысы келгенде, бир секундду да текке кетирбеши үчүн. Ушул себептен, биз сизге React сайтында 13 дата жана убакыт тандоочуларды сунуштайбыз, алардын дизайны жана колдонуучунун мыкты тажрыйбасы менен айырмаланат.

Бул селекторлор React.js сайтынан, the ачык булактуу Javascript китепканасы Бул биз барган веб-сайтта иш-чаранын датасын жана конкреттүү күнүн тандоодо, алардын айрым сонун тажрыйбаларын кайра жаратууга мүмкүнчүлүк берет. Сизде бар экендигин эсиңизге салууну унутпастан жасай берели башка табулатура тизмеси дагы Javascript React.js.

Бир нече селектордун реакциясы

Бир нече селектордун реакциясы

Мындан тышкары, React'теги бул маалымат аныктагыч жакшы дизайнга ээ, Бул бизге берген календардагы бир нече датаны тандоого мүмкүнчүлүк берүү менен мүнөздөлөт. Бул React селекторунун кандай иштээрин жеринен билүү үчүн демону таба аласыз. Бул жерде сиздин ордуңуз бар Github.

Жергиликтүү диапазондо реакция жасаңыз

өз

Un дата тандагыч React.js аны колдонуунун оңойлугу менен мүнөздөлөт жана ал канчалык ыңгайлаштырылат. Концепциясы жөнөкөй, бул сиздин веб-сайтыңыздын датасы жана убактысын тандап алуучу максималдуу ийгилиги.

Native React Dates

Native React

Бул React дата тандагыч мурунку үлгүлөргө айлантуу үчүн ушундай эле схема боюнча жүрөт ушул тизмеде көрсөтүлгөндөрдүн дагы биринде. Жылнаама сыяктуу эле, чыпка катары колдонула турган күндөрдүн аралыгын тандай аласыз. Сиздин карамагында болгон дагы бир кызыктуу React дата терүүчү.

RC дата тандагыч

Дата убакыт реакциясы

Сизде ушул RC дата тергичинин демосу бар, ал башкалар сыяктуу эле мыкты сапатын көрсөтө берет. Анын деталдарынын бири ушул убакытты тандоо мүмкүнчүлүгүн сунуш кылат, демек, бул жагынан башкалардан айырмаланып турат. Колдонуучунун мыкты тажрыйбасы React.js сайтында күн жана убакыт тандоочу катары мыкты интерфейс. Сизде бул жерде сиздин Github.

Жылнаамага реакция жасаңыз

Жылнаамага реакция жасаңыз

React.js сайтында күндөрдү тандаганда болуу үчүн, убакытты толугу менен жасайбыз. Бул мурункуга окшош так тема менен, бирок ал биз каалаган күндү тандоо үчүн ачыла турган тилке катары көрүнүшү менен айырмаланат. Мына сага сиздин Github демонун ордуна баштапкы кодго өтүү.

Mobile React күндү тандагыч

Мобилдик реакция

React.js сайтынан мобилдик телефонго арналган бул дата тандагыч башкаларынан айырмаланып турат өтө аз салмак үчүн. Санарип дөңгөлөк аркылуу датанын ар кандай элементтерин тандап, анын дизайны менен айырмаланат. Сенде бар сиздин Github ошентип, анын баштапкы кодуна жакындап, аны веб-сайтыңызга киргизе аласыз.

Infinite React Calendar

Чексиз календарь

React менен курулган бул чексиз датаны тандоочу темалар менен мүнөздөлөт, баскычтопту колдоо, диапазонду тандоо жана жайгашкан жери. Бүткүл тизмедеги эң кеңири курма тандоочулардын бири. Мына сага сиздин Github демо көрсөткөндөн кийин калган бардык маалыматтар үчүн. Панелде сиз ар бирин сынап көрүү жана анын мүмкүнчүлүктөрү жөнүндө жакшыраак түшүнүк алуу үчүн бир катар варианттарга ээ болосуз.

React Dates

Реакциянын даталары

Менен айырмаланган React шаарында курма тандагыч уюлдук үчүн оптималдаштырылган жана бул абдан жакшы адеп менен берилген. Ошондой эле бар сиздин Github ошондо анын ар бир деталын билип, ошону менен веб-сайтыңызга алып кетсеңиз болот. Демонун жардамы менен, сиз аны өзүңүздүн каалагандай конфигурациялап, андан көбүрөөк пайда табуу үчүн сизде ар кандай варианттар бар.

Жергиликтүү селекторду кабыл алыңыз

Мобилдик реакция

Өтүүңүздү сунуштайбыз анын Github тарабынан ушул датаны тандагандын дизайнын React ичинде билүү үчүн. Биз аны айырмалай алабыз, анткени DataPickerAndroid, TimePickerAndroid API'лерин колдонуңуз жана DatePicker iOS. Демек, анын интерфейси сизге тааныш угулат, эгерде сиз мобилдик шаймандар үчүн ушул ОСлардын бирине да көнүп калсаңыз. Аны Android жана iOS сыяктуу эки операциялык тутумдун каалаган колдонмосу үчүн колдонууга болот.

Simple React селектору

Simple React

React.js сайтындагы күндү тандагыч, анын демо веб-сайтынан бир нече колдонуу мисалдарын таба аласыз. Бизде дагы бар сиздин Github ушул жөнөкөй селектордун калган маалыматтарын Reactтен билүү. Жөнөкөйлүгү менен гана эмес, анын дагы бир кызыктуусу ар кандай настройка параметрлери биздин веб-сайтка абдан жарашыктуу жана жөнөкөй сайтты берүү.

Киргизүү учуру

Киргизүү учуру

Дагы бир күндү тандагыч, ага убакыт тандоо мүмкүнчүлүгү кошулгандыктан, ал толугу менен аяктайт. Momentjs менен иштейт жана дизайны ошол эле Dribbble веб-сайтынан алынган. Сиз, албетте, анын дизайны жана орнотулган веб-сайтка берген көркөмдүгү үчүн жагат. Бул сиздин Github Дата жана убакыт тандоочу деген дагы бир сонун мисал менен эч нерседен кем болбошуңуз керек.

React day picker

React selector

React'тогу бул даты терүүчү, анын 9KB gzipper менен мүнөздөлөт, болуудан тышкары жакшы настройкаланган, жайгашкан жери, ARIA колдойт жана тышкы эч нерседен көз каранды эмес. Локалдаштырууга болот, биз календардын тилин тандап алсак болот, ошондо ал биздин тилге которулат. Ушул React тизмесиндеги эң толук тандоочулардын дагы бири, ошондуктан бирөөсүн тандоо биз үчүн кыйынга турат.

Datepicker ReactJS

Дата тандагыч

Башкаларга окшоп демо бар, бул күндү тандоону жеринде билүү керек, ал басылып чыкканда календарь ачылат. Бул учкуч селектору бар жана дизайны боюнча жогорку сапаттагы селектор болуп саналат. Is минимализм, ошондуктан аны интеграциялоого болот веб-сайттын каалаган түрүндө. Сизде анын Github бар калган маалыматтарды табуу жана кодду веб-сайтыңызга каалаганыңызча колдонуу.

Биз сизге дагы бир тизме калтырабыз, бирок CSSдеги формалардын ушул убакытка чейин ошентип азыртан баштап ишке ашыруу жана сизде жакшы репертуар бар, бул веб-сайтыңызга жарашыктуу түрүн тандап алсаңыз болот.


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

Комментарий биринчи болуп

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт.

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

bool(чын)