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>
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;
}
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);
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>
EDIT: ajout de la propriété list-style:none sur les éléments de liste (ul li)
As-tu jeté un coup d'oeil sur celui-ci par exemple : 