html - Increasing the size of the field generated from jquery -
the following tag :
<input type="text" class="timepicker" name="selectedtime" id="timepicker" /> with of jquery :
/* jquery timepicker * replaces single text input set of pulldowns select hour, minute, , am/pm * * copyright (c) 2007 jason huck/core 5 creative (http://www.corefive.com/) * dual licensed under mit (http://www.opensource.org/licenses/mit-license.php) * , gpl (http://www.opensource.org/licenses/gpl-license.php) licenses. * * version 1.0 */ (function($){ jquery.fn.timepicker = function(){ this.each(function(){ // id , value of current element var = this.id; var v = $(this).val(); // options need generate var hrs = new array('01','02','03','04','05','06','07','08','09','10','11','12'); var mins = new array('00','15','30','45'); var ap = new array('am','pm'); // default current time var d = new date; var h = d.gethours(); var m = d.getminutes(); var p = (h >= 12 ? 'pm' : 'am'); // adjust hour 12-hour format if(h > 12) h = h - 12; // round minutes nearest quarter hour for(mn in mins){ if(m <= parseint(mins[mn])){ m = parseint(mins[mn]); break; } } // increment hour if push minutes next 00 if(m > 45){ m = 0; switch(h){ case(11): h += 1; p = (p == 'am' ? 'pm' : 'am'); break; case(12): h = 1; break; default: h += 1; break; } } // override current values if applicable if(v.length == 7){ h = parseint(v.substr(0,2)); m = parseint(v.substr(3,2)); p = v.substr(5); } // build new dom objects var output = ''; output += '<select id="h_' + + '" class="h timepicker">'; for(hr in hrs){ output += '<option value="' + hrs[hr] + '"'; if(parseint(hrs[hr]) == h) output += ' selected'; output += '>' + hrs[hr] + '</option>'; } output += '</select>'; output += '<select id="m_' + + '" class="m timepicker">'; for(mn in mins){ output += '<option value="' + mins[mn] + '"'; if(parseint(mins[mn]) == m) output += ' selected'; output += '>' + mins[mn] + '</option>'; } output += '</select>'; output += '<select id="p_' + + '" class="p timepicker">'; for(pp in ap){ output += '<option value="' + ap[pp] + '"'; if(ap[pp] == p) output += ' selected'; output += '>' + ap[pp] + '</option>'; } output += '</select>'; // hide original input , append new replacement inputs $(this).attr('type','hidden').after(output); }); $('select.timepicker').change(function(){ var = this.id.substr(2); var h = $('#h_' + i).val(); var m = $('#m_' + i).val(); var p = $('#p_' + i).val(); var v = h + ':' + m + p; $('#' + i).val(v); }); return this; }; })(jquery); $(document).ready(function() { $('.timepicker').timepicker(); }); /* svn: $id: jquery.timepicker.js 456 2007-07-16 19:09:57z jason huck $ */ gives out :
how can increase size input fields ? tried doing :
<input type="text" class="timepicker" name="selectedtime" id="timepicker" style="height:40px; font-size:20px" /> but output same.
your jquery code hides actual input fields , replaces them select, class name "timepicker" can use control styling.
apply following css in code:
.timepicker{ height: 40px; font-size: 20px; } 
Comments
Post a Comment