Curseur de l'interface utilisateur JQuery pour l'heure

Bonjour, je dois implémenter un curseur pour une plage horaire de 24 heures. J'aime utiliser le curseur jquery ui pour ça. Je l'ai écrit ci-dessous le codeCurseur de l'interface utilisateur JQuery pour l'heure

<script type="text/javascript"> 
$(function() { 
    $(".slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 23.59, 
     step: 0.15 
    }); 
}); 
</script>

J'aime la plage est comme 01h00 ---- 01:59

Comment j'ai donné deux points (:) au lieu de point (.) . Aussi la gamme était allé au-delà de 59 comme 05:85. S'il vous plaît aidez-moi à créer un curseur de temps

Source

2010-02-17 Nisanth Kumar

Ne pas utiliser les heures comme une unité, utilisez plutôt les minutes. Ensuite, appliquez un événement slide qui convertit les minutes en heures:

$(function() { 
    $(".slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 1440, 
     step: 15, 
     slide: function(e, ui) { 
      var hours = Math.floor(ui.value/60); 
      var minutes = ui.value - (hours * 60); 

      if(hours.toString().length == 1) hours = '0' + hours; 
      if(minutes.toString().length == 1) minutes = '0' + minutes; 

      $('#something').html(hours+':'+minutes); 
     } 
    }); 
});

Source

2010-02-17 10:24:47

Salut son fonctionnement bien .. merci beaucoup .. Note: heures.length ne fonctionnait pas 4 moi. J'utilise hours.toString(). Longueur –

très utile .... Merci – RajeshKdev

Excellent, merci – Kevin

Amélioration de la réponse de Tatu, pour obtenir la plage de temps en « temps civil » avec une désignation horloge de 12 heures et AM et PM. * Mise à jour - J'ai légèrement modifié le code pour que la valeur min s'affiche sous la forme "12:00 AM" et la valeur maximale s'affiche sous "23:59 PM". Le violon est également mis à jour ...

$("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 1440, 
      step: 15, 
      values: [ 600, 720 ], //or whatever default time you want 
      slide: function(e, ui) { 
       var hours1 = Math.floor(ui.values[0]/60); 
       var minutes1 = ui.values[0] - (hours1 * 60); 

       if(hours1.length == 1) hours1 = '0' + hours1; 
       if(minutes1.length == 1) minutes1 = '0' + minutes1; 
       if(minutes1 == 0) minutes1 = '00'; 

       if(hours1 >= 12){ 

        if (hours1 == 12){ 
         hours1 = hours1; 
         minutes1 = minutes1 + " PM"; 
        } 
        else{ 
         hours1 = hours1 - 12; 
         minutes1 = minutes1 + " PM"; 
        } 
       } 

       else{ 

        hours1 = hours1; 
        minutes1 = minutes1 + " AM"; 
       } 
       if (hours1 == 0){ 
        hours1 = 12; 
        minutes1 = minutes1; 
       } 

       $('.slider-time').html(hours1+':'+minutes1); 

       var hours2 = Math.floor(ui.values[1]/60); 
       var minutes2 = ui.values[1] - (hours2 * 60); 

       if(hours2.length == 1) hours2 = '0' + hours2; 
       if(minutes2.length == 1) minutes2 = '0' + minutes2; 
       if(minutes2 == 0) minutes2 = '00'; 
       if(hours2 >= 12){ 
        if (hours2 == 12){ 
         hours2 = hours2; 
         minutes2 = minutes2 + " PM"; 
        } 
        else if (hours2 == 24){ 
         hours2 = 11; 
         minutes2 = "59 PM"; 
        } 
        else{ 
         hours2 = hours2 - 12; 
         minutes2 = minutes2 + " PM"; 
        } 
       } 
       else{ 
        hours2 = hours2; 
        minutes2 = minutes2 + " AM"; 
       } 

       $('.slider-time2').html(hours2+':'+minutes2); 
      } 
    });

Source

2013-06-20 21:12:32

J'ai essayé ceci et cela a fonctionné, bien que j'ai quelques commentaires. Le Javascript contient du code comme 'hours1 = hours1' et 'minutes1 = minutes1' que mon environnement de développement appelle de façon amusante 'wierd assignment'. Le CSS dans le JSfiddle contient également quelques URL longues, cassées et plutôt suspectes. – paulo62

@ paulo62 - Les urls du css sont appelés URI de données (https://css-tricks.com/data-uris/) et les "affectations étranges" sont définitivement bizarres, je pense que je les avais mises en place comme dispositifs d'enseignement, pour illustrer que dans ces cas les valeurs restent les mêmes. –

Voici ma version 24 heures basée sur les deux réponses pour les champs de saisie

Javascript

jQuery(function() { 
    jQuery('#slider-time').slider({ 
     range: true, 
     min: 0, 
     max: 1440, 
     step: 15, 
     values: [ 600, 1200 ], 
     slide: function(event, ui) { 
      var hours1 = Math.floor(ui.values[0]/60); 
      var minutes1 = ui.values[0] - (hours1 * 60); 

      if(hours1.length < 10) hours1= '0' + hours; 
      if(minutes1.length < 10) minutes1 = '0' + minutes; 

      if(minutes1 == 0) minutes1 = '00'; 

      var hours2 = Math.floor(ui.values[1]/60); 
      var minutes2 = ui.values[1] - (hours2 * 60); 

      if(hours2.length < 10) hours2= '0' + hours; 
      if(minutes2.length < 10) minutes2 = '0' + minutes; 

      if(minutes2 == 0) minutes2 = '00'; 

      jQuery('#amount-time').val(hours1+':'+minutes1+' - '+hours2+':'+minutes2); 
     } 
    }); 
});

HTML

<label for="amount-time">Time</label> 
<input type="text" name="amount-time" id="amount-time" style="border: 0; color: #666666; font-weight: bold;" value="10:00 - 20:00"/> 
<div id="slider-time"></div><br>

Voici un exemple:

upplex - webdesign

Source

2013-08-04 01:56:54 upplex

Comment puis-je transformer cela en un sélecteur de temps (VS un sélecteur de plage de temps)? En d'autres termes, comment pourrais-je me débarrasser de la limite de temps supérieure? – Greg

Il devrait juste être heures2 < 10 et 10 minutes2 <, non hours2.length < 10 et minutes2.length < 10. Ceci est l'évaluation de la valeur numérique non de longueur de la chaîne.

Source

2015-03-02 08:08:17 Gilman

Curseur de l'interface utilisateur JQuery pour l'heure

Répondre

Questions connexes