Forum d'entraide PHPFrance

Salut à tous,

Pour ceux qui recherche un timepicker en javascript, je vous propose mon plugin qui reste assez simple mais fonctionnel.

Version de Jquery utiliser:
jquery-1.5.1.min.js
jquery-ui-1.8.12.custom.min.js

HTML

<div>
    <form id="frm_test" name="frm_test">
      <table border="0" align="center">
        <tr>
          <td style="padding:2px"><input type="text" name="tpicker1" id="tpicker1" class="timepicker" /></td>
        </tr>
        <tr>
          <td style="padding:2px"><input type="text" name="tpicker2" id="tpicker2" class="timepicker" /></td>
        </tr>
        <tr>
          <td style="padding:2px"><input type="text" name="tpicker3" id="tpicker3" class="timepicker" /></td>
        </tr>
        <tr>
          <td style="padding:2px"><input type="text" name="tpicker4" id="tpicker4" class="timepicker" /></td>
        </tr>
      </table>
    </form>
</div>

CSS

Code : Tout sélectionner

  /* GLOBAL */   
html, body {
   
}   
body {      
   background-color:#FFFFFF;
   color:#666666;
   font-size:0.8em;
   font-family:Verdana, Arial, Sans Serif;
}

input[type=text] {
   border:1px solid #000000;
   display: block;
   font-family: Verdana,Arial,Sans Serif;
   font-size: 90%;
   height: 24px;
   line-height: 24px;
   width: auto;      
}
/* DIVERS */

/* TIMEPICKER */
.ie-timepicker-wrapper {
   display:none;
   margin-top:2px;
   padding:0;      
}
.ie-timepicker-header {}
.ie-timepicker-content {}

.ie-timepicker-wrapper-hour {
   display:block;
   margin:0 0 2px 0;
   padding:0;
   height:25px;
	 list-style:none;
}
.ie-timepicker-item-hour {
   float:left;
   margin-right:2px;
   height:26px;
   width:26px;
   line-height:26px;
   text-align:center;
   vertical-align:middle;
   background-image:url(../../web/img/timepicker/bg_hour.gif);
   background-repeat:repeat-x;
   border:1px solid #6a6a6a;
   cursor:pointer;
	 background-color:#FFF;
}
.ie-timepicker-wrapper-minute {
   position:absolute;
   top:30px;
   display:block;      
   margin:0;
   padding:0;
   height:25px;
	 list-style:none;
}
.ie-timepicker-item-minute {
   float:left;
   margin-right:2px;
   height:26px;
   width:26px;
   line-height:26px;
   text-align:center;
   vertical-align:middle;
   background-image:url(../../web/img/timepicker/bg_minute.gif);
   background-repeat:repeat-x;
   border:1px solid #c7c7c7;
   cursor:pointer;
	 background-color:#FFF;
}
.active {
   display:block;
}

TIMEPICKER.JS

Code : Tout sélectionner

(function($){
   $.fn.timepicker = function(options) {
      
      // default options
      var defaults = {
         classWrapper: 'ie-timepicker-wrapper',
         classHeader: 'ie-timepicker-header',
         classContent: 'ie-timepicker-content',
         classWrapperItemHour: 'ie-timepicker-wrapper-hour',
         classItemHour: 'ie-timepicker-item-hour',
         classWrapperItemMinute: 'ie-timepicker-wrapper-minute',
         classItemMinute: 'ie-timepicker-item-minute',
         itemsHour: ['06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
         itemsMinute: ['00', '15', '30', '45']
      };

      // extend options
      var options = $.extend(defaults, options);
      
      // for each instance
      return this.each(function(options){
         
         // value
         var selectedHour = '';
         var selectedMinute = '';
         
         // clearfix
         var clearfix = '<div style="clear:both"></div>';
         
	 // hours
         var domHour = jQuery.map(defaults.itemsHour, function(value, index){
            return '<li class="'+defaults.classItemHour+'">'+value+'</li>';
         });
         var hours = '<ul class="'+defaults.classWrapperItemHour+'">'+domHour.join('')+'</ul>'+clearfix;
         
         // minutes
         var domMinute = jQuery.map(defaults.itemsMinute, function(value, index){
            return '<li class="'+defaults.classItemMinute+'">'+value+'</li>';
         });
         var minutes = '<ul class="'+defaults.classWrapperItemMinute+'">'+domMinute.join('')+'</ul>'+clearfix;
         
         // header
         //var header = '<div class="'+defaults.classHeader+'"></div>';
         // content
         var content = '<div class="'+defaults.classContent+'">'+hours+minutes+'</div>';         
         // wrapper
         var wrapper = '<div class="'+defaults.classWrapper+'">'+content+'</div>';
         
         // cache vars
         var $self = $(this);
         var $timepicker = $(wrapper);
         //var $header = $('.'+defaults.classHeader, $timepicker);
         var $content = $('.'+defaults.classContent, $timepicker);
         
         var $wrapperHours = $('.'+defaults.classWrapperItemHour, $content);
         var $hours = $('.'+defaults.classItemHour, $content);
         
         var $wrapperMinutes = $('.'+defaults.classWrapperItemMinute, $content);
         var $minutes = $('.'+defaults.classItemMinute, $content);
         
         // hide
         _close();
         
         // add to dom
         $timepicker.insertAfter(this);
         
         // border width
         var borderWidth = parseInt($hours.first().css("border-left-width")) + parseInt($hours.first().css("border-right-width"));
         // margin width
         var marginWidth = parseInt($hours.first().outerWidth(true));
         // item width
         var itemWidth = parseInt($hours.first().outerWidth() + borderWidth + marginWidth);
         // nb items
         var nbItems = (defaults.itemsHour.length+(defaults.itemsMinute.length-1));
         
         // set properties
         $timepicker.css({width: ((itemWidth*nbItems))+'px', position: 'absolute', zIndex: 10001});
         
         // input focus
         $self.focus(function(e) {
            if($timepicker.hasClass('active')) {
               _close();
            } else {
               _open();
            }
            e.preventDefault();            
         });
         
         // hour hover
         $hours.hover(function(e) {   
            selectedHour = $(this).html();
            
            $wrapperMinutes.css({
               'left': $(this).position().left/*,
               'top': ($(this).height()+4)+'px',*/
            });
            
            _update();
         });
         // minute hover
         $minutes.hover(function(e) {   
            selectedMinute = $(this).html();
            _update();
         });
         
         // update input value
         function _update() {
            if(selectedHour == '') {
               selectedHour = defaults.itemsHour[0];
            }
            if(selectedMinute == '') {
               selectedMinute = defaults.itemsMinute[0];
            }
            $self.val([selectedHour, selectedMinute].join(':'));
         }   
         
         // auto-close
         $('body').bind({
            mousedown: function() {
               _close();
            },
            keydown: function() {
               _close();
            }
         });
         
         // open/show picker
         function _open() {      
            $('.'+defaults.classWrapper).css({zIndex: 10000});
            $timepicker.css({zIndex: 10001});            
            $timepicker.addClass('active');
         }
         // close/hide picker
         function _close(){
            $timepicker.removeClass('active');
         }
      });
   };
})(jQuery);

Afin d'activer le plugin dans la page:

Code : Tout sélectionner

<script type="text/javascript">
    $(document).ready(function() {
			$("#tpicker1").timepicker({
			  itemsHour: ['06', '08', '10', '12', '14', '16', '18', '20']	
			});
			$("#tpicker2").timepicker({
			  itemsMinute: ['00', '05', '10', '15', '20', '25', '30']	
			});
			$("#tpicker3").timepicker();
			$("#tpicker4").timepicker({
			  itemsHour: ['06', '08', '10', '12', '14', '16', '18', '20']	
			});
			
			//OU
			
			//config for all picker
      //$(".timepicker").timepicker();
    });
</script>

Test de compatibilité: Firefox 4 & Internet Explorer 8
EDIT: ajout de la propriété list-style:none sur les éléments de liste (ul li)

Bonjour,

Il en existe des tas

As-tu jeté un coup d'oeil sur celui-ci par exemple : http://trentrichardson.com/examples/timepicker/ ?
C'est pas pour critiquer hein? j'ai pas essayé le tiens, mais tant qu'a faire quand les choses existent déjà

Bonjour,

Il en existe des tas As-tu jeté un coup d'oeil sur celui-ci par exemple : http://trentrichardson.com/examples/timepicker/ ?
C'est pas pour critiquer hein? j'ai pas essayé le tiens, mais tant qu'a faire quand les choses existent déjà

Oui je connais, j'avais fait pas mal de recherche mais rien qui me satisfaisait assez.

Et le but était d'apprendre à coder des plugins jquery pour de futur utilisation.

Forum d'entraide PHPFrance

[PLUGIN] jquery-ui-timepicker

[PLUGIN] jquery-ui-timepicker

Re: [PLUGIN] jquery-ui-timepicker

Re: [PLUGIN] jquery-ui-timepicker