Page 1 sur 1

[PLUGIN] jquery-ui-timepicker

Posté : 11 mai 2011, 17:14
par Yosh
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)

Re: [PLUGIN] jquery-ui-timepicker

Posté : 11 mai 2011, 17:19
par jojolapine
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à :)

Re: [PLUGIN] jquery-ui-timepicker

Posté : 11 mai 2011, 18:03
par Yosh
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.