JQuery UI ile veri seçiciler

İçindekiler
Bunlardan bazıları diğerlerinden daha karmaşık bir programlamaya sahip veya basitçe uygulanması oldukça zahmetli olabilir, ancak jQuery ve kütüphane paketi bize inşa etmek için yöntemler veriyor Tarih seçiciler son teknoloji tasarım ve işletim ile hızlı ve verimli.
Datepicker () yöntemi
yöntemi tarih seçici () yeni bir CSS sınıfı ekleyerek HTML'nin görünümünü değiştirin; bu değişiklikle, daha önce işlevde belirtilen giriş türündeki bir öğede görüntülenen bir takvim eklenir Javascript.
yöntem tarih seçici () iki farklı şekilde kullanılabilir:
 $ (seçici, bağlam) .datepicker (seçenekler) $ (seçici, bağlam) .datepicker ("eylem", parametreler) 

Nasıl çalıştığına dair basit bir örnek görelim:
  • kütüphanelerini ekliyoruz jQuery ve CSS belgemiz için.
 
  • içinde fonksiyonumuzu oluşturuyoruz. Javascript ve yöntemini somutlaştırıyoruz tarih seçici ve görüntüleneceği seçiciyi atamak.
 
  • Ve nihayet içinde HTML ekliyoruz id = tarih seçici Üzerine tıklandığında css'i değiştirdiğini ve takvimi gösterdiğini belirten girişe.
Tarih: 

Ve tarayıcımızda şöyle görünür:

İşte tam kod:
 jQuery UI Datepicker - Varsayılan işlevsellik

Tarih:


Yöntemin birkaç özelliğini kullanacağımız daha gelişmiş bir örnek görelim tarih seçici tarih aralıklarının yanı sıra görüntülenecek takvimlerin sayısını da doğrulayacağız.
  • 1 - İlk önce gerekli dosyaları ekliyoruz:

 

  • 2 - İkinci alana girilen tarihin saniyeden büyük olmadığını doğrulamak için seçenekleri ve görüntülenecek takvim sayısını eklediğimiz, farklı giriş türündeki iki alan için yöntemi iki kez başlatıyoruz.

 

  • 3 - Son olarak girdimizi HTML onları tanımlamak için bazı etiketlerle.
[/ girinti] Başlangıç ​​noktası 

Tarayıcımızda nasıl görüneceğini görelim:

Test etmeniz ve beğeninize göre değişiklik yapmanız için kodun tamamını buraya bırakıyorum:
 jQuery UI Datepicker - Başlangıç ​​Tarihi Aralığı Seçin 
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.

Arkadaşlarınızla sayfasını paylaşan sitenin gelişimine yardımcı olacak

wave wave wave wave wave