jQuery plugins - Time picker
marc 06

Time picker

Időpont bevitel jQuery-vel

Verzió: 0.2.9
Kiadás dátuma: 2011
Fejlesztő: Francois Gelinas
Liszensz: MIT, GPL v2

Bevezető

A Datepicker plugin-hoz hasonló megoldás, csak nem dátumok, hanem időpontok bevitelét hivatott megkönnyíteni. További hasonlóság a már említett plugin-nal, hogy a Time picker is támogatja a jQuery UI-t, így a ThemeRoller segítségével pikk-pakk saját stílust definiálhatunk, de akár az előre definiált témák közül is választhatunk egyet.

Követelmények

  • jQuery keretrendszer (1.5.1 +)
  • jQuery UI Core
  • jQuery UI Position utility
  • jQuery UI Theme (CSS)

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/jquery.ui.timepicker.css" />
            <link rel="stylesheet" type="text/css" href="css/sunny/jquery-ui-1.8.18.custom.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
            <script type="text/javascript" src="js/jquery.ui.timepicker.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').timepicker();
            });
          

Teljes paraméterlista

  • timeSeparator: az órák és percek közti elválasztó karakter (alapértelmezett: ':')
  • showLeadingZero: az egyszámjegyű órák esetén (0-9) a 0 engedélyezése/tiltása a szám elején (true | false) (alapértelmezett: true)
  • showMinutesLeadingZero: az egyszámjegyű percek esetén (0-9) a 0 engedélyezése/tiltása a szám elején (true | false) (alapértelmezett: true)
  • showPeriod: a beviteli mezőben az AM/PM (délelőtt/délután) jelzésének engedélyezése/tiltása az időpont mögött (true | false) (alapértelmezett: false)
  • showPeriodLabels: az időkiválasztó panelen az AM/PM (délelőtt/délután) jelzésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • periodSeparator: az időpontok közti elválasztó karakter (alapértelmezett: ' ')
  • altField: egy tetszőleges alternatív beviteli mező CSS szelektora (alapértelmezett: '#alternate_input')
  • defaultTime: alapértelmezett idő beállítása - az aktuális idő beállítása a 'now' értékkel lehetséges (alapértelmezett: 'now')
  • showOn: az időkiválasztó panel megjelenítését kiváltó esemény ('focus' | 'button' | 'both') (alapértelmezett: 'focus')
  • button: gomb használata az időkiválasztó panel előhívásához (gomb CSS szelektora) (alapértelmezett: '#alternate_input')
  • hourText: az időkiválasztó panelen az Hour (óra) felirat szövege (alapértelmezett: 'Hour')
  • minuteText: az időkiválasztó panelen a Minute (perc) felirat szövege (alapértelmezett: 'Minute')
  • amPmText: az időkiválasztó panelen (valamint ha engedélyezve van, akkor a beviteli mezőben) az AM/PM (délelőtt/délután) feliratok szövege tömbként (alapértelmezett: ['AM', 'PM'])
  • myPosition: az időkiválasztó panel pozícionálása - viszonyítási alap az időkiválasztó panel (alapértelmezett: 'left top')
  • atPosition: az időkiválasztó panel pozícionálása - viszonyítási alap a beviteli mező
    (alapértelmezett: 'left bottom')
  • beforeShow: függvény meghívása az időkiválasztó panel megjelenítését megelőzően
  • onSelect: függvény meghívása, ha egy órát, vagy percet kiválasztunk
  • onClose: függvény meghívása az időkiválasztó panel bezárását követően
  • onHourShow: függvény meghívása tetszőleges órák engedélyezésére/tiltására
    (példa a bemutató oldalon!)
  • onMinuteShow: függvény meghívása tetszőleges percek engedélyezésére/tiltására
    (példa a bemutató oldalon!)
  • hours: az időkiválasztó panelen a megjelenített órák testreszabása
    * starts - az első mutatott óra (alapértelmezett: 0)
    * ends - az utolsó mutatott óra (alapértelmezett: 23)
    Példa: a választható időtartam délelőtt 8-tól délután 4-ig
                    hours: {
                      starts: 8,
                      ends: 16
                    }
                  
  • minutes: az időkiválasztó panelen a megjelenített percek testreszabása
    * starts - az első mutatott perc (alapértelmezett: 0)
    * ends - az utolsó mutatott perc (alapértelmezett: 55)
    * interval - lépték mértéke (alapértelmezett: 5)
    Példa: a választható percek 0 - 30 percig, 10 perces léptékkel
                    minutes: {
                      starts: 0,
                      ends: 30,
                      interval: 10
                    }
                  
  • rows: a sorok száma az időkiválasztó panelen az órák/percek megjelenítésére
    (minimum érték: 2) (alapértelmezett: 4)
  • showHours: az 'órák' szekció megjelenítésének engedélyezése/tiltása az időkiválasztó panelen
    (true | false) (alapértelmezett: true)
  • showMinutes: a 'percek' szekció megjelenítésének engedélyezése/tiltása az időkiválasztó panelen
    (true | false) (alapértelmezett: true)
  • showCloseButton: 'jóváhagyás' gomb (Done) engedélyezése/tiltása az időkiválasztó panel alján (true | false) (alapértelmezett: false)
  • closeButtonText: a 'jóváhagyás' gomb felirata (alapértelmezett: 'Done')
  • showNowButton: 'most' gomb (Now) engedélyezése/tiltása az időkiválasztó panel alján (true | false) (alapértelmezett: false)
  • nowButtonText: a 'most' gomb felirata (alapértelmezett: 'now')
  • showDeselectButton: 'kiválasztás törlése' gomb (Deselect) engedélyezése/tiltása az időkiválasztó panel alján (true | false) (alapértelmezett: false)
  • deselectButtonText: a 'kiválasztás törlése' gomb felirata (alapértelmezett: 'Deselect')