React.js uygulamanıza bir tarih seçici eklemek, kullanım kolaylığını artırmanın harika bir yoludur. Bir tarih seçici, kullanıcıların tarihi manuel olarak yazmak yerine doğrudan bir form alanında bir takvimden bir tarih seçmesine olanak tanır. Bu, uygulamanızın kullanıcı deneyimini büyük ölçüde iyileştirerek kullanıcıların ihtiyaç duydukları tarihleri seçmelerini kolaylaştırabilir.
Yerel özellikleri veya harici bir kitaplığı kullanarak React.js uygulamanıza bir tarih seçici ekleyebilirsiniz.
Tarih Seçici Nedir?
Tarih seçici, kullanıcının bir takvimden tarih seçmesine izin veren bir arayüz öğesidir.
Genellikle, yanında tıklandığında kullanıcının bir tarih seçmesine izin veren bir takvim açan bir takvim simgesi bulunan bir metin kutusu olarak görünür. Kullanıcı daha sonra uygulamanın yapılandırmasına bağlı olarak tarihi yazabilir veya takvimden seçebilir.
React.js Uygulamanıza Tarih Seçici Nasıl Eklenir?
React.js uygulamanıza bir tarih seçici eklemenin birkaç yolu vardır. Bunlar, yerel özellikleri kullanmayı ve üçüncü taraf kitaplıklarını entegre etmeyi içerir. Tarih seçicinize ek özellikler de ekleyebilirsiniz.
Yerleşik Özellikleri Kullanma
Yapabilirsiniz React kancalarını kullan ve uygulamanıza bir tarih seçici eklemek için yerel HTML5 tarih giriş türü. Bu, ek kitaplık veya kod gerektirmediği için tarih seçici eklemenin basit bir yoludur. Ancak, varsayılan stil sınırlamaları ve temel özellikler gibi bazı dezavantajları vardır.
içe aktarmak Tepki, { useRef, useState } itibaren 'tepki';sabit Tarih Seçici = () => {
const [tarih, setDate] = useState('');
sabit tarihGirişRef = kullanımRef(hükümsüz);
sabit handChange = (e) => {
tarih ayarla(e.hedef.değer);
};
geri dönmek (
<div>
<giriş
tür="tarih"
onChange={handleChange}
ref={dateInputRef}
/>
<P>Seçilmiş Tarih: {tarih}</P>
</div>
);
};
ihracatvarsayılan Tarih Seçici;
Yukarıdaki kod, bir tarih seçici oluşturmak için yerel HTML5 tarih giriş türünü kullanır. Seçilen tarihi takip etmek için useState kancasını ve tarih giriş alanına bir referans almak için useRef kancasını kullanır. Ardından, kullanıcı bir tarih seçtiğinde tarih durumunu güncelleyen bir onChange işleyicisi oluşturur.
Yerleşik Özellikleri Kullanmanın Dezavantajları
Yerel HTML5 tarih giriş türünü kullanmanın ana dezavantajı, herhangi bir ek özellik veya özelleştirme sunmamasıdır. Küçük bir varsayılan özellikler grubuyla sınırlıdır ve bir tarih aralığı seçmek gibi herhangi bir ek seçenek sunmaz.
Giriş alanına stil ekleyebilseniz de herhangi bir ek özellik eklemek mümkün değildir.
tepki-datapicker Kitaplığını kullanma
tepki-datapicker kitaplığı, React.js uygulamanıza bir tarih seçici eklemek için popüler ve yaygın olarak kullanılan bir kitaplıktır. Bir tarih aralığı seçme, stili özelleştirme ve ek özellikler ekleme gibi çok çeşitli seçenekler ve özellikler sunar.
içe aktarmak Tepki, { useState } itibaren 'tepki';
içe aktarmak Tarih Seçici itibaren 'react-datepicker';sabit DatePickerÖrnek = () => {
sabit [startDate, setStartDate] = useState(yeniTarih());
geri dönmek (
<Tarih Seçici
seçili={startDate}
onChange={tarih => setStartDate (tarih)}
/>
);
};
ihracatvarsayılan Tarih SeçiciÖrnek;
Bu kod, bir tarih seçici oluşturmak için tepki-datapicker kitaplığını kullanır. Seçilen tarihi takip etmek için useState kancasını kullanın ve ardından bunu DatePicker bileşenine iletin. Bu, seçilen tarihe sahip bir tarih seçici oluşturacaktır.
tepki-tarih-seçici kitaplığını kullanma
React-date-picker kitaplığı, React.js uygulamanıza bir tarih seçici eklemek için kullanılan başka bir popüler kitaplıktır. Bir tarih aralığı seçme, stili özelleştirme ve ek özellikler ekleme gibi tepki veri seçici kitaplığına benzer özellikler ve seçenekler sunar. Ek özelliklere sahip daha sağlam bir tarih seçici arıyorsanız, iyi bir seçimdir.
içe aktarmak Tepki, { useState } itibaren 'tepki';
içe aktarmak Tarih Seçici itibaren 'tepki tarihi seçici';sabit DatePickerÖrnek = () => {
sabit [startDate, setStartDate] = useState(yeniTarih());
geri dönmek (
<Tarih Seçici
değer={startDate}
onChange={tarih => setStartDate (tarih)}
/>
);
};
ihracatvarsayılan Tarih SeçiciÖrnek;
Bu kod, bir tarih seçici oluşturmak için tepki-tarih-seçici kitaplığını kullanır. Önceki koda benzer, ancak tepki-tarih seçici yerine tepki-tarih-seçici kitaplığını kullanır. Bu kitaplık, tarih seçici takviminde farklı stil ve özellikler sağlar. Ayrıca CSS kullanarak özel stil ekleyebilirsiniz veya Tailwind gibi bir CSS çerçevesi.
Ek Özellikler Ekleme
React.js uygulamanıza bir tarih seçici ekledikten sonra, onu daha kullanıcı dostu ve sezgisel hale getirmek için ek özellikler ve seçenekler ekleyebilirsiniz. Örneğin, bir tarih aralığı seçme, stili özelleştirme ve zaman seçimi gibi ek özellikler ekleme yeteneği ekleyebilirsiniz. Kullanıcının geçerli bir tarih seçmesini sağlamak için özel doğrulama da ekleyebilirsiniz.
içe aktarmak Tepki, { useState } itibaren 'tepki';
içe aktarmak Tarih Seçici itibaren 'tepki tarihi seçici';sabit DatePickerÖrnek = () => {
sabit [startDate, setStartDate] = useState(yeniTarih());
sabit [bitişTarihi, setEndDate] = kullanımDevlet(yeniTarih());
geri dönmek (
<div>
<Tarih Seçici
değer={startDate}
onChange={tarih => setStartDate (tarih)}
/>
<Tarih Seçici
değer={bitişTarihi}
onChange={tarih => setEndDate (tarih)}
/>
</div>
);
};
ihracatvarsayılan Tarih SeçiciÖrnek;
Bu kod, bir tarih seçici oluşturmak için tepki-tarih-seçici kitaplığını kullanır. Başlangıç tarihini ve bitiş tarihini takip etmek için useState kancasını kullanır ve bunları DatePicker bileşenlerine iletir. Bu, biri başlangıç tarihini seçmek için, diğeri bitiş tarihini seçmek için olmak üzere iki tarih seçiciyi işleyecektir.
Kullanıcının geçerli bir tarih seçmesini sağlamak için özel doğrulama da ekleyebilirsiniz. Geçerli tarihleri kontrol etmek ve kullanıcı geçersiz bir tarih seçerse bir hata mesajı görüntülemek için onChange olay işleyicisini kullanarak bunu yapabilirsiniz.
Tarih Seçicilerle Kullanıcı Etkileşimini Artırın
Bir tarih seçiciyle, kullanıcılar daha fazla güvenilirlikle tarihleri daha hızlı seçebilir. Bu, kullanıcıların ihtiyaç duydukları tarihleri seçmelerini kolaylaştırarak uygulamanızı kullanma olasılıklarını artırır. Ek olarak, bir tarih seçiciyi uygulamanızın görünümüne ve verdiği hisse uyacak şekilde özelleştirerek onu daha kullanıcı dostu ve sezgisel hale getirebilirsiniz.
Kullanıcıların geçerli tarihler girmesini sağlamak için tarih seçicilerinize ve formlarınıza doğrulamalar da ekleyebilirsiniz. Bu, kullanıcıların uygulamanızda hatalara neden olabilecek geçersiz tarihler girmesini önlemeye yardımcı olur.
