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
Uygulamanıza bir tarih seçici eklemek için React kancalarını ve yerel HTML5 tarih giriş türünü kullanabilirsiniz . 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.
import React, { useRef, useState } from ‘react’;
const DatePicker = () => {
const [date, setDate] = useState(”);
const dateInputRef = useRef(null);
const handleChange = (e) => {
setDate(e.target.value);
};
return (
<div>
<input
type=”date”
onChange={handleChange}
ref={dateInputRef}
/>
<p>Selected Date: {date}</p>
</div>
);
};
export default DatePicker;
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 kullanarak tarih seçici ile uygulamaya tepki verin
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.
import React, { useState } from ‘react’;
import DatePicker from ‘react-datepicker’;
const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
/>
);
};
export default DatePickerExample;
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-datapicker kullanarak tarih seçici ile uygulamaya tepki
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.
import React, { useState } from ‘react’;
import DatePicker from ‘react-date-picker’;
const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
value={startDate}
onChange={date => setStartDate(date)}
/>
);
};
export default DatePickerExample;
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. CSS veya Tailwind gibi bir CSS çerçevesi kullanarak da özel stil ekleyebilirsiniz .
tepki-tarih-seçici kullanarak tarih seçici ile uygulama tepki
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.
import React, { useState } from ‘react’;
import DatePicker from ‘react-date-picker’;
const DatePickerExample = () => {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
return (
<div>
<DatePicker
value={startDate}
onChange={date => setStartDate(date)}
/>
<DatePicker
value={endDate}
onChange={date => setEndDate(date)}
/>
</div>
);
};
export default DatePickerExample;
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.