Datuma atlasītāji ar jQuery lietotāja saskarni

Satura rādītājs
Daži no tiem ar sarežģītāku programmēšanu nekā citi vai vienkārši to ieviešana var būt diezgan darbietilpīga, bet jQuery un tā bibliotēkas pakotne sniedz mums metodes, kā veidot Datuma atlasītāji ātri un efektīvi, izmantojot vismodernāko dizainu un darbību.
Datepicker () metode
Metode datuma atlasītājs () mainīt HTML izskatu, pievienojot jaunu CSS klasi, ar šo modifikāciju tiek pievienots kalendārs, kas tiek parādīts ievades tipa elementā, kas iepriekš norādīts funkcijā Javascript.
Metode datuma atlasītājs () var izmantot divos dažādos veidos:
 $ (atlasītājs, konteksts). datuma atlasītājs (opcijas) $ (atlasītājs, konteksts). datuma atlasītājs ("darbība", parametri) 

Apskatīsim vienkāršu piemēru, kā tas darbojas:
  • Mēs pievienojam bibliotēkas jQuery un CSS mūsu dokumentam.
 
  • Mēs izveidojam savu funkciju Javascript un mēs parādām metodi datumu atlasītājs un piešķirot tam atlasītāju, kurā tas tiks parādīts.
 
  • Un visbeidzot HTML mēs pievienojam id = datuma atlasītājs uz ievadi, kas norāda, ka tā darbība, noklikšķinot uz tās, maina css un parāda kalendāru.
Datums: 

Un mūsu pārlūkprogrammā tas izskatītos šādi:

Šeit ir pilns kods:
 jQuery UI Datepicker - noklusējuma funkcionalitāte

Datums:


Apskatīsim sarežģītāku piemēru, kurā izmantosim vairākas metodes īpašības datumu atlasītājs ar kuru mēs apstiprināsim datumu diapazonus, kā arī parādāmo kalendāru skaitu.
  • 1 - Vispirms mēs iekļaujam nepieciešamos failus:

 

  • 2 - Mēs divreiz paraugām metodi diviem laukiem ar atšķirīgu ievades veidu, kuriem pievienojam opcijas, lai pārbaudītu, vai otrajā laukā ievadītais datums nav lielāks par otro, kā arī parādāmo kalendāru skaits.

 

  • 3 - Visbeidzot mēs izveidojam savu ieguldījumu HTML ar dažām etiķetēm, lai tos identificētu.
[/ atkāpe] No līdz 

Apskatīsim, kā tas izskatītos mūsu pārlūkprogrammā:

Šeit es atstāju jums pilnu kodu, lai to pārbaudītu un veiktu izmaiņas pēc jūsu vēlmēm:
 jQuery UI Datepicker - izvēlieties datumu diapazonu no līdz 
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu

Jums palīdzēs attīstību vietā, daloties lapu ar draugiem

wave wave wave wave wave