jQuery Timepicker Addon from Trent Richardson. Two issues.

jQuery Timepicker Addon from Trent Richardson. Two issues.

Hi,

I'm still a newby when it comes to jQuery so excuse my lack of knowledge.

The story is this:
- I get the time from the webserver (code behind)
- I format the time (code behind)
- I save it to a asp:hiddenfield called start_time (code behind)
- I add an hour and save it as another asp:hiddenfield called end_time (code behind)
- I display the start_time value as my default input value for the start_time_picker time picker <= first issue
- If needed, I click the input box and select another time <= second issue

I do not include the code behind because it's working just fine.

Here is the jQuery code:
  1.     <script type="text/javascript">
  2.         $(document).ready(
  3.             function () {
  4.                 document.getElementById('start_time_picker').value = document.getElementById("start_time").value;
  5.                 var startTimeTextBox = $('#start_time_picker');
  6.                 var endTimeTextBox = $('#end_time_picker');
  7.                 $.timepicker.timeRange(
  8.                     startTimeTextBox,
  9.                     endTimeTextBox,
  10.                     {
  11.                         minInterval: (1000 * 60 * 60), // 1hr
  12.                         timeFormat: 'HH:mm',
  13.                         controlType: 'select',
  14.                         oneLine: true,
  15.                         start: {                       // start picker options
  16.                             onSelect: function (datetimeText, datepickerInstance) {
  17.                                 document.getElementById("start_time").value = datetimeText ;
  18.                                 }
  19.                             },
  20.                         end: {                         // end picker options
  21.                             onSelect: function (datetimeText, datepickerInstance) {
  22.                                 document.getElementById("end_time").value = endtimeText;
  23.                             }
  24.                         }
  25.                     }
  26.                 );
  27.             });
  28.     </script>
As such, everything is working (code wise) but I'm having display issues.

Problem 1: setting the value to start_time input

When the page loads, I have the picker panel visible for some reason:


If I comment line 4, the start_time_picker is obviously blank but the picker panel is not displayed.

No idea why that is!?

Problem 2: When clicking an input to pick a time, the background is transparent

Like this:


Looks to me as if there is a css related issue, no?

Here is the style information:
  1.     <link href="../css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
  2.     <style rel="stylesheet" type="text/css">
  3.         /*-------------------------------*/
  4.         /*Body and HTML supported classes*/
  5.         /*-------------------------------*/
  6.         body {
  7.             font-family: Verdana, Helvetica, sans-serif;
  8.             font-size: 11px;
  9.             height: 100%;
  10.             min-height: 100%;
  11.         }
  12.         html {
  13.             height: 100%;
  14.             min-height: 100%;
  15.             width: 100%; /* Full width and height */
  16.             margin: 0px; /* No space between browser edge and content */
  17.             padding: 0px;
  18.         }
  19.         * {
  20.             margin: 0px;
  21.             padding: 0px;
  22.             font-family: inherit;
  23.             font-style: inherit;
  24.             font-size: 100%;
  25.         }
  26.         #start_time_picker {
  27.             width: 50px;
  28.         }
  29.         #end_time_picker {
  30.             width: 50px;
  31.         }
  32.     </style>

Any help would be MUCH appreciated.