• Címkék:
  • time
  • picker
  • idő
  • óra
  • perc
  • bevitel
  • calendar

Time Picker

Példa-1

Deklaráció

        $(document).ready(function(){
          $('#pelda-1').timepicker({
            showOn: 'button',
            button: '#button',
            hourText: 'óra',
            minuteText: 'perc',
            amPmText: ['de.', 'du.'],
            onHourShow: callbackHour,
            onMinuteShow: callbackMinute
          });

          function callbackHour (hour) {
            if ((hour > 20) || (hour < 6)) return false
            return true;
          }

          function callbackMinute (hour, minute) {
            if ((hour == 20) && (minute >= 30)) return false
            if ((hour == 6) && (minute < 30)) return false
            return true;
          }
        });
      

HTML kód

        <p>
          <input id="pelda-1" class="inputbox" type="text" name="pelda-1" value="20:00" />
          <span id="button" title="Válassz!"></span>
        </p>
      

Példa-2

Deklaráció

        $(document).ready(function(){
          $('#ora').timepicker({
            hourText: 'óra',
            amPmText: ['de.', 'du.'],
            showMinutes: false
          });

          $('#perc').timepicker({
            minuteText: 'perc',
            showHours: false,
            minutes: {
              starts: 0,
              ends: 30,
              interval: 1
            }
          });
        });
      

HTML kód

        <p>
          <label for="ora">Óra:</label>
          <input id="ora" class="inputbox small" type="text" name="ora" value="16" />
          <label for="perc">Perc:</label>
          <input id="perc" class="inputbox small" type="text" name="perc" value="00" />
        </p>
      

Példa-3

Deklaráció

        $(document).ready(function(){
          $('#pelda-3').timepicker({
            altField: '#altinput',
            defaultTime: '9:20'
          });

          function setNewTime() {
            $('#pelda-3').timepicker('setTime','16:55');
          }

          $('#button-2').click(function () {
            $(this).val('Kiválasztott idő : ' + $('#pelda-3').timepicker('getTime'));
          });

          $('#button-3').click(function () {
            $(this).val('Óra : ' + $('#pelda-3').timepicker('getHour')+ ', ' +'Perc : ' + $('#pelda-3').timepicker('getMinute'));
          });
        });
      

HTML kód

        <input id="altinput" class="inputbox" type="text" name="altinput" value="09:20" disabled="disabled" />
        <div id="pelda-3"></div>
        <p>
          <input id="button-1" type="button" name="button-1" value="Óra átállítása: 16:55" onclick="javascript:$('#pelda-3').timepicker('setTime','16:55');" />
        </p>
        <p>
          <input id="button-2" type="button" name="button-2" value="Beállított idő lekérdezése" />
        </p>
        <p>
          <input id="button-3" type="button" name="button-3" value="Beállított óra/perc lekérdezése" />
        </p>
      

« bezár