giriiş
Doğum tarihimizi girmemiz veya herhangi bir nedenle randevu almak için tarih seçmemiz gereken çeşitli forum ve web siteleriyle sık sık karşılaşıyoruz ve gözümüzün önünde takvime benzer bir simge beliriyor. Bu nasıl ve nereden ortaya çıkıyor? Arzu ettiğimiz tarihleri akıllıca tanıyan ve bize sunan, dinamik olarak çalışan, spesifik bir takvim olmalı. React Date Picker'ın devreye girdiği yer burasıdır. Bu eğitimde, bu tür yöntemleri sıfırdan ileri seviyeye kadar, React'te nasıl uygulandığını ve nasıl özelleştirilebileceğini öğreneceğiz. Tartışmaya devam edelim.
Tepki Tarih Seçici, takvim iletişim biçimini kullanarak tarihleri görüntülemek için kullanılan yararlı ve bol miktarda bulunan bir Bileşendir. Bugünlerde genellikle çok sayıda Tarih seçici seçeneği mevcuttur. Hepsinin farklı teknik yönleri ve uygulamaları olabilir. Bu derste özellikle React Date Picker'ı ele alacağız. Bunun için saat ve tarihi gösteren bir pakete ihtiyacımız var. Daha iyi anlaşılması için React Date Picker'ı daha iyi anlamamıza yardımcı olacak bir uygulama yapacağız. Ancak bundan önce aşağıdaki adımlarda gösterildiği gibi kurulumunu yapalım.
Kurulum
React uygulamamıza Date Picker kurulumu yapabilmek için Node.js’nin sistemimizde önceden kurulu olması gerekmektedir. Her zaman düğüm modüllerine sahip olmak önemli olmasa da, tüm bağımlılıkların verimli bir şekilde sunulması için bunların indirilmesi önemle tavsiye edilir. Bu nedenle React Date Picker kurulum komutu aşağıda verilmiştir.
Paket aracılığıyla kurulabilir npm:
'kruskal'ın algoritması'
npm install react-datepicker --save
Veya aracılığıyla İplik:
yarn add react-datepicker
React'ı ve Proptype'larını ayrı ayrı kurma ihtiyacı doğabilir çünkü bu bağımlılıklar olmadan React Tarih Seçici oluşturmak imkansızdır. Ayrıca Tarih Seçicinin görsel olarak harika görünmesi için harici paketlerden CSS kullanmamız gerekebilir. Uygulamamıza başlamak için React Date seçiciyi ana dosyamıza aktarmamız ve React view aracılığıyla kontrol etmeye devam etmemiz gerekiyor.
import React, { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; // CSS Modules, react-datepicker-cssmodules.css // import 'react-datepicker/dist/react-datepicker-cssmodules.css'; const Example = () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; React Datepicker örneği
Sistemimizin tüm kurulum gereksinimleri ve bağımlılıkları ile yapılandırıldığını varsayarak sıfırdan bir React uygulamasının nasıl oluşturulacağını öğreneceğiz. Bu uygulama tamamen React tarih seçicinin uygulanmasına dayanmaktadır.
Yukarıdaki tartışmada, bu bağımlılıklar paketin kendisine dahil edilmediğinden React ve PropTypes'ı bağımsız olarak kurduğumuzu varsayıyoruz. Uygulamamızı oluşturma yöntemlerine devam etmek için aşağıdaki adımları izlememiz gerekiyor.
npx create-react-app react-datepicker-app
Komutu ile proje klasörünün içine taşıyın.
cd react-datepicker-app
React uygulamasını başlatın.
npm start
Node Engine çalıştırıldıktan sonra localhost’un 3000 numaralı port üzerinden uygulamamızı kontrol edebiliriz. Ayrıca React Date Picker için önemli bileşenlerin dosyamıza aktarılması için aşağıda verdiğimiz kod parçasını app.js dosyamıza dahil etmemiz gerekiyor.
// app.js import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; Uygulamamız artık buna benzer bir şeye benzeyecek.
Yukarıdaki örnek kodda öncelikle paketlerimizi import ettik. Tarih seçici Ve Önyükleme React şablonunda. Daha sonra onu bağlamak için tanımladık. kolu değişikliği ve Bileşeni etkinlik takvimine gönderin. Bu olaylar, bir kullanıcı Datepicker'ın giriş değeri değerlerini gönderdiğinde veya değiştirdiğinde otomatik olarak tetiklenecektir. Daha sonra Datepicker form durumunu yeni bir kodla başlattık. Tarih() yapıcının içindeki nesne. Son olarak Datepicker'a bazı özellikler eklemek için aşağıdaki direktifle başlattık.
Çıktıyı takvim merkezli bir tarih seçici formatı biçiminde görselleştirebiliriz. Yukarıda verilen Datepicker, yukarıda gösterilen React uygulama bileşenlerine özelleştirilmiş özellikler ekler. Tarihleri şu şekilde seçmemizi sağlar: aylar, günler, Ve yıllar .
java dizeleri birleştirme
Ayrıca, tarih seçiciyi özelleştirmek için, bileşenleri renklendirmek veya tarihleri almak için işlevleri akıllıca uygulamak gibi çeşitli başka yöntemlerimiz de var. Ayrıca app.js dosyasıyla ilgili HTML ve CSS bileşenlerimiz varsa bunları kolayca özelleştirebiliriz.
Datepicker'ı yerelleştirme
Öğreneceğimiz bir diğer örnek ise Datepicker'ı yerelleştirmek. Yapacağımız Tarih Seçici büyük ölçüde date-fns'nin uluslararasılaştırılmasına bağlıdır. Bunun nedeni, sergilenecek öğeleri yerelleştirmek için kullanılmasıdır. Varsayılan en-US dışında bir yerel ayar kullanmamız gerekirse bunu date-fns.xml dosyasından projeye aktarmamız gerekebilir.
Ayrıca İngilizce, yerel ayarın ayarlanması için 3 yöntemden oluşan varsayılan yerel ayardır.
yerel kayıt ol (dize, nesne): date-fns'den içe aktarılan bir yerel ayar nesnesini yükler.
Varsayılan yerel ayarı ayarla (string): kayıtlı bir yerel ayarı tüm tarih seçici örnekleri için varsayılan olarak ayarlar.
youtube video vlc'yi indir
getDefaultLocale: geçerli olarak ayarlanmış varsayılan yerel ayarı gösteren bir dize döndürür.
Aşağıdaki kod parçasını kullanarak bu hizmetleri takvim görünümünün yerel ayarına aktarabiliriz.
import { registerLocale, setDefaultLocale } from 'react-datepicker'; import es from 'date-fns/locale/es'; registerLocale('es', es) Bu locale servislerini app.js dosyamıza aktarıp kaydettiğimizde uygulamamız şu şekilde görünecektir.
Başka bir örnekte, yerel ayarları değiştirmek için öncelikle yerel ayar kodunu değiştirmemiz veya kod incelemesinin desteklenebilmesi için date-fns'nin uluslararası hale getirilmesini kullanmamız gerekir.
setDefaultLocale('es')
Datepicker'da Takvim tarih aralığını ayarlama.
Aralık işlevselliğini nasıl uygulayacağımızı öğreneceğiz. minTarih Ve maxDate özelliği bu adımda. Bunu yapmak için içe aktarıyoruz addDays AP ben tarih-fns React bileşenimizin en üstüne kütüphaneyi ekleyin. Aralığı ayarlamak için belirlenen tarihe belirli sayıda gün eklenecektir.
import addDays from 'date-fns/addDays'
addDays() yöntem genellikle iki parametre alır:
Tarih: Güncellenmesi gereken tarih.
Miktar: Önemli miktarda günlerin dahil edilmesi gerekiyordu.
React takviminde güncel günden sonraki yedi güne kadar olan tarih aralığını kolaylıkla ayarlayabiliriz. Bunu uyguladığımızda bunu anlayabiliriz. minTarih Ve maxDate Aşağıda gösterilen örnek koddaki yöntemler.
render() { return ( Show Date ); } Yukarıda verilen tüm adımları uyguladıktan sonra uygulamamızın tam kod pasajı aşağıda gösterilmiştir.
import React, { Component } from 'react'; import DatePicker from 'react-datepicker'; import addDays from 'date-fns/addDays' import 'react-datepicker/dist/react-datepicker.css'; import 'bootstrap/dist/css/bootstrap.min.css'; class App extends Component { constructor (props) { super(props) this.state = { startDate: new Date() }; this.handleChange = this.handleChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); } handleChange(date) { this.setState({ startDate: date }) } onFormSubmit(e) { e.preventDefault(); console.log(this.state.startDate) } render() { return ( Show Date ); } } export default App; Yukarıdaki örnek parçada, yaptık minTarih bir check-in bileşeni olarak kullanılır ve kullanıcı yalnızca bugünden önceki tarihi seçebilir. Çıkış Bileşeni için tarih değerini kullandık; bu, kullanıcının giriş tarihinden önce bir tarih seçemeyeceği anlamına gelir.
Bir sonraki adımda durumumuzun değerini kaydedeceğiz ve her bir tanıtıcının nasıl çalıştığını tanımlayacağız. Ana fikir, bunu her biri için bir durum oluşturarak uygulamaktır. giriş Ve Çıkış yapmak Tanımlanan değerlerle tarih ve verilerin buraya kaydedilmesi. Tek fark şu: minTarih yalnızca check-in bileşenine bağlı olduğundan, check-out bileşeninin yöntemi. Böylece her şeyin öncesi ve sonrası değil, değerler üzerinden ayarlanmasını sağlayarak artık tarihleri kolaylıkla seçip çıkış işlemini tanımlayabiliyoruz.
js yüklemesi
Çözüm
Bu eğitimde, yerel sürümün yerine kolayca kullanılabilecek özel bir React Datepicker bileşeni oluşturmaya yönelik basit, adım adım kılavuzu takip edebildik. HTML5 tarih seçici giriş elemanları. React uygulamasını öncelikli olarak nasıl kuracağımızı öğrendik çünkü React bileşenlerini oluşturmak yeni başlayanlar için karmaşık görünebilir, dolayısıyla bağımlılıkları ayarlamak yeni başlayanlar için her zaman tercih edilir. Uygulamamızda Datepicker bileşenlerinin kullanımına ilişkin net bir konsept oluşturmak için çeşitli örneklerle de karşılaştık. Ayrıca, tarih seçicinin takvimde belirli bir süre için seçilmesi durumunda sorun yaratmaması için tarih seçicinin yerelleştirilmesi sürecini de öğrendik.
Bu öğreticide oluşturulan özel tarih seçici beklendiği gibi çalışsa da, tarih seçici öğesinin tüm gelişmiş gereksinimlerine uymuyor. Maksimum ve minimumun aksesuarlar aracılığıyla uygulanması, giriş türünün metinden tarihe değiştirilmesi ve daha iyi erişilebilirlik iyileştirmesi sağlanması gibi daha fazla iyileştirme yapılabilir. Ayrıca, Bootstrap paketlerini içe aktararak ve daha iyi görünmesini sağlamak için özel stil ve gezinme özellikleri ekleyerek, bu eğitimde uyguladığımız tarih seçici için tasarım yöntemleri de geliştirebiliriz.