Home/ Questions/Q 8958837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T15:18:26+00:00

Hello, how can I add an HH:MM time to a li tag based on

  • 0

Hello, how can I add an HH:MM time to a li tag based on a predefined start time?

Background: I have a dance scheduling program that lists dance entries in an unordered list. Through jQuery UI, the user can rearrange the dance routines and when finished, they can display the timing of each routine in the day’s dance schedule. Each dance routine is either 3, 6 or 30 mins in length and I’m storing this length in an attribute on the li tag (incorrectly, I know). The start of day is 8:00:00 AM, and I’d like to add the time to each routine based on their length, the dance routines before it, and the start of day.

Here is an example of the PHP li code from my loop that prints out all of the entries. I’d like to store the time of the routine in the span id=’etimeXXX’. So for example, the following code in my loop:

<ul id="sortable2">
...

$step2 .= "<li id='e".$e[entry_id]."' class='cat entry' lang='$length'>\n"
. "<span class='entry_time' id='etime".$e[entry_id]."'></span>"
. strtoupper($performance_title)]
. "</li>\n";

...
</ul>

…would output something like:

  • 8:03:00 AM Twinkle Twinkle
  • 8:06:00 AM Pie in the Sky
  • 8:09:00 AM Challenge

    • I am trying to use something like the following to display the time, but it isn’t working:

    function createDanceTimes() {   
    var start_time = new Date("March 1, 2013 08:00:00");

    var h = start_time.getHours();
    var m = start_time.getMinutes();

    var entry_length = 0;
    var cur_time = m;

    $("#sortable2 li[id]").each(function(index) {           
        entry_length = $(this).children('span[id^="etime"]').attr('lang');

        m=m+entry_length;

        $(this).children('span[id^="etime"]').text(m);
    });
}

    Any help would be much appreciated!

    Share

    Leave an answer

    You must login to add an answer.

    Need An Account,

    1 Answer

    1. Editorial Team

      using data-* attributes (HTML5 godsend goodness), it can keep it simpler:

      <ul id="sortable2">
//...
<?php
$performance_title = strtoupper($performance_title);
$step2 .= <<<HTML
  <li data-time='{$e['entry_id']}' data-length='{$length}' class='cat entry'>
    <span class='entry_time'></span>
    $performance_title
  </li>
HTML;
?>
//...
</ul>

      function createDanceTimes() {   
  var start_time = new Date();

  start_time.setHour(8);
  start_time.setMinute(0);

  $("#sortable2 li[data-time]").each(function(index) {           
    var 
      $this = $this;

    start_time.setMinute(start_time.getMinute() + parseInt($this.data('length'), 10));

    $(this).find('span.entry_time').text((start_time.getHour()) + ':' + (start_time.getMinute())); // this will deal with minutes that get past 60, and will convert to a new hour automatically
  });
}

      Since I don’t know what is the current format you are using for your times, I’m just trying my best guess

      • 0