Arayüz JavaScript

Flatpickr ile Minimalist Datetime Oluşturun

Web geliştiricilerin çok seveceği tarih/saat inputları için kullanabilecekleri Flatpickr JavaScript eklentsinden bahsettik.

Oluşturulması gereken en zorlu alanlardan biri, tarih / saat seçmektir. Geliştiriciler genellikle ay / gün / yıl için basit seçimli menülere başvurur veya işi yapmak için çeşitli eklentilere güvenirler.

Alanları seçmek iyi işler, ancak biraz kullanımı zordur. Bunun yerine, Flatpickr eklentisiyle formunuzu hazırlayabilirsiniz. Sıfır bağımlılığı olan, ücretsiz ve açık kaynak kodlu bir JavaScript takvim seçici.

Minimalizm düşünülerek tasarlanmıştır, bu nedenle herhangi bir web sitesi düzenine, herhangi bir web formuna uyabilir ve herhangi bir modern cihazdan kullanılabilir olmalıdır.

Bu eklenti birçok özel seçeneğe sahiptir. Metin alanındaki tarihlerin nasıl göründüğünü ve takvimin başlayacağı yeri değiştirebilirsiniz (varsayılan olarak “bugün”).

Ancak, zaman seçimine ihtiyaç duymuyorsanız, bunu kesinlikle bir tarih seçici olarak da kullanabilirsiniz. Bu, yalnızca bir seçici ile form üzerinden daha fazla veri aktarmanıza olanak tanıyan isteğe bağlı bir özelliktir.

Flatpickr’in nasıl olduğunu görmek istiyorsanız örnek sayfalara göz atın.

Tarih seçicinin davranışını sınırlamak için hedeflenen seçenekleri de belirleyebilirsiniz:

  • Belirli tarihlerin / aralıkların yasaklanması
  • Yalnızca belirli tarihlere / aralıklara izin vermek
  • Birden fazla tarih seçimine izin veriliyor
  • Bir başlangıç ​​ve bitiş tarihi seçmek için “Aralık modu”
  • Sadece bir tarih seçici, sadece zaman veya her ikisi de tarih ve saat birlikte
  • Seçenekler pratik olarak sonsuzdur ve hepsi bu bir vanilla JavaScript eklentisi aracılığıyla çalışır.

Mobil kullanıcılar genellikle yerel tarih seçiciyi tercih eder ancak bunu JavaScript’deki bir mobil ayarı kullanarak geçersiz kılabilirsiniz. Bu şekilde tüm aygıtlarda aynı arayüze sahip olursunuz.

Ayrıca, IE9 desteğini, en iyi desteklenen tarih seçici eklentilerinden biri olan bir polifle ile ekleyebilirsiniz.

Kurulum, npm, Bower ve yarn için komutlarla basittir. Veya, bu rotayı tercih ederseniz kaynak dosyaları doğrudan GitHub‘dan indirebilirsiniz.

Bilmeniz gereken her şey, dosyalarınızı header ‘e nasıl ekleyeceğinizi ve bu tarih seçiciyi herhangi bir alanda nasıl arayacağınızı gösteren kurulum sayfasında bulabilirsiniz. Kolayca en iyi tarih seçici eklentilerinden biri, herhangi bir tasarıma uyacak kadar basitçe tasarlanmıştır.

Bu makalede web geliştiricilerin çok seveceği tarih/saat inputları için kullanabilecekleri Flatpickr JavaScript eklentsinden bahsettik. Siz de düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.



Yazar hakkında

Bilal UÇAR

Web Developer @Webmaster.Kitchen.
Wordpress üzerinde çalışmalar yapıyorum. Bu konuda öğrendiklerimi mutfakta paylaşıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz.
Yorum alanı ile mutfağa katkıda bulunun.

Yorumlar

Bir yorum yaz