Додавање бирача датума вашој Реацт.јс апликацији је одличан начин да побољшате њену прилагођеност кориснику. Бирач датума омогућава корисницима да изаберу датум из календара директно у пољу обрасца, уместо да морају ручно да уносе датум. Ово може знатно побољшати корисничко искуство ваше апликације, олакшавајући корисницима да изаберу датуме који су им потребни.
Можете да додате бирач датума у своју Реацт.јс апликацију користећи изворне функције или екстерну библиотеку.
Шта је бирач датума?
Бирач датума је елемент интерфејса који омогућава кориснику да изабере датум из календара.
Обично се појављује као оквир за текст са иконом календара поред којег се, када се кликне, отвара календар који омогућава кориснику да изабере датум. Корисник затим може да унесе датум или да га изабере из календара, у зависности од конфигурације апликације.
Како додати бирач датума у вашу Реацт.јс апликацију
Постоји неколико начина да додате бирач датума вашој Реацт.јс апликацији. То укључује коришћење изворних функција и интеграцију библиотека трећих страна. Такође можете да додате додатне функције свом бирачу датума.
Коришћење уграђених функција
Можете користите Реацт куке и изворни ХТМЛ5 тип уноса датума да бисте својој апликацији додали бирач датума. Ово је једноставан начин додавања бирача датума, јер не захтева додатне библиотеке или код. Међутим, он има неке недостатке, као што су ограничења подразумеваног стила и основних карактеристика.
увоз Реагујте, { усеРеф, усеСтате } из 'реаговати';конст ДатеПицкер = () => {
цонст [датум, сетДате] = усеСтате('');
конст датеИнпутРеф = усеРеф(нула);
конст хандлеЦханге = (е) => {
подесити датум(е.таргет.вредност);
};
повратак (
<див>
<улазни
типе="датум"
онЦханге={хандлеЦханге}
реф={датеИнпутРеф}
/>
<стр>Одабрани датум: {дате}</п>
</div>
);
};
извозУобичајено ДатеПицкер;
Горњи код користи изворни ХТМЛ5 тип уноса датума за креирање бирача датума. Користи закачицу усеСтате да прати изабрани датум и усеРеф закачицу да добије референцу на поље за унос датума. Затим креира онЦханге руковалац који ажурира стање датума када корисник одабере датум.
Недостаци коришћења уграђених функција
Главни недостатак коришћења изворног ХТМЛ5 типа уноса датума је тај што не нуди никакве додатне функције или прилагођавање. Ограничен је на мали скуп подразумеваних функција и не нуди никакве додатне опције, као што је избор распона датума.
Иако можете додати стил у поље за унос, није могуће додати никакве додатне функције.
Коришћење библиотеке реацт-датепицкер
Библиотека реацт-датепицкер је популарна и широко коришћена библиотека за додавање бирача датума у вашу апликацију Реацт.јс. Пружа широк спектар опција и функција, као што је могућност избора низа датума, прилагођавања стила и додавања додатних функција.
увоз Реагујте, { усеСтате } из 'реаговати';
увоз ДатеПицкер из 'реацт-датепицкер';конст ДатеПицкерЕкампле = () => {
конст [стартДате, сетСтартДате] = усеСтате(НоваДатум());
повратак (
<ДатеПицкер
селецтед={стартДате}
онЦханге={датум => сетСтартДате (датум)}
/>
);
};
извозУобичајено ДатеПицкерЕкампле;
Овај код користи библиотеку реацт-датепицкер за креирање бирача датума. Користите куку усеСтате да бисте пратили изабрани датум, а затим га проследили компоненти ДатеПицкер. Ово ће приказати бирач датума са изабраним датумом.
Коришћење библиотеке за бирање датума реакције
Библиотека реацт-дате-пицкер је још једна популарна библиотека за додавање бирача датума у вашу апликацију Реацт.јс. Нуди сличне функције и опције као библиотеку реацт-датепицкер, као што је могућност избора распона датума, прилагођавања стила и додавања додатних функција. Добар је избор ако тражите робуснији бирач датума са додатним функцијама.
увоз Реагујте, { усеСтате } из 'реаговати';
увоз ДатеПицкер из 'реацт-дате-пицкер';конст ДатеПицкерЕкампле = () => {
конст [стартДате, сетСтартДате] = усеСтате(НоваДатум());
повратак (
<ДатеПицкер
валуе={стартДате}
онЦханге={датум => сетСтартДате (датум)}
/>
);
};
извозУобичајено ДатеПицкерЕкампле;
Овај код користи библиотеку реацт-дате-пицкер за креирање бирача датума. Сличан је претходном коду, али користи библиотеку реацт-дате-пицкер уместо реацт-датепицкер. Ова библиотека пружа различите стилове и функције у календару за бирање датума. Такође можете додати прилагођени стил користећи ЦСС или ЦСС оквир као што је Таилвинд.
Додавање додатних функција
Када додате бирач датума у своју апликацију Реацт.јс, можете додати додатне функције и опције како бисте је учинили лакшим за употребу и интуитивнијом. На пример, можете додати могућност избора распона датума, прилагођавања стила и додавања додатних функција као што је избор времена. Такође можете додати прилагођену валидацију да бисте били сигурни да корисник одабере важећи датум.
увоз Реагујте, { усеСтате } из 'реаговати';
увоз ДатеПицкер из 'реацт-дате-пицкер';конст ДатеПицкерЕкампле = () => {
конст [стартДате, сетСтартДате] = усеСтате(НоваДатум());
конст [ендДате, сетЕндДате] = усеСтате(НоваДатум());
повратак (
<див>
<ДатеПицкер
валуе={стартДате}
онЦханге={датум => сетСтартДате (датум)}
/>
<ДатеПицкер
валуе={ендДате}
онЦханге={датум => сетЕндДате (датум)}
/>
</div>
);
};
извозУобичајено ДатеПицкерЕкампле;
Овај код користи библиотеку реацт-дате-пицкер за креирање бирача датума. Користи усеСтате куку за праћење датума почетка и датума завршетка, прослеђујући их компонентама ДатеПицкер. Ово ће приказати два бирача датума, један за избор датума почетка и један за избор датума завршетка.
Такође можете додати прилагођену валидацију да бисте били сигурни да корисник одабере важећи датум. То можете да урадите коришћењем руковаоца догађаја онЦханге да проверите важеће датуме и прикажете поруку о грешци ако корисник изабере неважећи датум.
Побољшајте ангажовање корисника помоћу бирача датума
Са бирачем датума, корисници могу да бирају датуме брже, са већом поузданошћу. Ово олакшава корисницима да одаберу датуме који су им потребни, што повећава вероватноћу да ће користити вашу апликацију. Поред тога, можете да прилагодите бирач датума тако да одговара изгледу и осећају ваше апликације, чинећи га лакшим за коришћење и интуитивнијим.
Такође можете додати валидације у бираче датума и обрасце како бисте били сигурни да корисници уносе важеће датуме. Ово помаже у спречавању корисника да уносе неважеће датуме који могу изазвати грешке у вашој апликацији.
