Hi,

I am trying to create a way where Javascript can do a loop between two Unix Timestamps to print out the dates and some html. I have created a way for this method to work in PHP. However, I need this same method to work in Javascript.

Working PHP:

<?php
// Start date
    $date = '01/09/2013';
    $start_date = date('l, F j, Y', strtotime($date));
    // End date
    $end_date = '01/14/2013';
    //How many days in between dates
    $i = 1;

    while (strtotime($date) <= strtotime($end_date)) {
    if($i==1)
    {
        echo '<h3>Set times for the dates listed below:</h3>';
        echo '<strong>Day: '.$i.': </strong>'.$start_date.'<br />';

    }
    else
    {
        echo '<br /><strong>Day: '.$i.': </strong>'.$date.'<br />';
    }
    ?>
        <select class="input-style sch" name="sch_time" size="1">
        <option value=""></option>
          <?php
            for($n = strtotime("08:00"), $e = strtotime("24:00"); $n <= $e; $n += 900) 
            echo '<option value="'.date("H:i",$n).'">'.date("g:i a",$n).'</option>'."\n";
            ?>
        </select>
          -
          <select class="input-style sch" name="sch_end_time" size="1">
            <option value=""></option>
            <?php
            for($n = strtotime("08:00"), $e = strtotime("24:00"); $n <= $e; $n += 900) 
            echo '<option value="'.date("H:i",$n).'">'.date("g:i a",$n).'</option>'."\n";
            ?>
        </select>
    <?php        

        $date = date ("l, F j, Y", strtotime("+1 day", strtotime($date)));
        $i++;
    }
?>

Javascript:

<script>
$(document).ready(function(){
    var startTime = $('input[name="event_sub_stime1"]').val();//value='2013-01-09'
    var endTime = $('input[name="event_sub_etime1"]').val();//vaule='2013-01-14'
    //Convert Date String into Unix Timestamp
    var date_parse = new Date(startTime);
    date = date_parse.getTime() / 1000;
    var end_parse = new Date(endTime);
    edate = end_parse.getTime() / 1000;

    //Testing
    alert(date+' '+edate);

});
</script>

I would like the Javascript code to print exactly what the PHP is printing out, but of course in Javascript scripting language.
NOTICE: The values will be coming from a form.

Thanks in advance!
-programmer12

Recommended Answers

All 7 Replies

Hi;

In your script, startTime & endTime are not defined ...

And asign these values in your form, like

<input type="hidden" name="event_sub_stime1" value="2013-01-09" />
<input type="hidden" name="event_sub_etime1" value="2013-01-14" />

yes, they are defined. as stated the script for php works with my form. i am just trying to convert my php language into javascript language. but i am not familiar with all the references for javascript yet.

ok what i am trying to acconplish, is making the while loop in javascript through the two ubix times.

To create Date object, you can use...

var date1 = new Date("2013-01-09")
var day = date1.getDay()      // 9
var month = date1.getMonth()  // 0 is Jan
var year = date1.getYear()    // 113 counted from 1900
var timeInMilli = date1.getTime()

Then you can loop through the different time you want to do...

Thanks Taywin!

You are helping me get on the right track.

Next Question: How to use this script into a While or For Loop to print out exactly what I have in the PHP Script? As you can tell, I am not very fluent in Javascript language.

OK, below is an example to use javascript to populate a div element. I didn't use JQuery because I don't use JQuery. Also, I translated it from your PHP code with some modify portion. My doubt about the code is that it has multiple select tags with the same name for all dates. That's kind of odd to me...

<html>
<head>
  <script type="text/javascript">
  /*****
   * Populate given element ID with content of date & select options
   */
  function fillSomeData(fillID) {
    var startTime = '2013-01-09';
    var endTime = '2013-01-14';
    //Convert Date String into Unix Timestamp
    var sdate = new Date(startTime);
    var edate = new Date(endTime);
    var i = 1;
    var outStr = "", timeOpt="", dStr;
    var tmpHr;

    // create time options
    for (var hr=8; hr<24; hr++) {  // start from 8am up to 23
      for (var min=0; min<60; min+=15) {  // start from 00 up to 45
        timeOpt += "<option value=\"";
        timeOpt += hr<10 ? ("0"+hr+":") : (hr+":");  // hour value
        timeOpt += min<10 ? ("0"+min) : min;         // minute value
        timeOpt += "\">"
        if (hr==12) {    // noon time
          timeOpt += hr+":";
          timeOpt += min<10 ? ("0"+min) : min;
          timeOpt += "pm";
        }
        else {
          timeOpt += (hr%12)<10 ? ("0"+(hr%12)) : (hr%12); // 12-hour format
          timeOpt += min<10 ? (":0"+min) : (":"+min);
          timeOpt += hr<12 ? "am" : "pm";  // add am/pm
        }
        timeOpt += "</option>\n";
      }
    }
    timeOpt += "<option value=\"24:00\">12:00am</option>\n"

    while (sdate<=edate) {
      dStr = getDayString(sdate.getDay())+", ";
      dStr += getMonthString(sdate.getMonth())+" "
      dStr += sdate.getDate()+", "+(sdate.getYear()+1900);
      if(i==1) {
        outStr += "<h3>Set times for the dates listed below:</h3>\n";
        outStr += "<strong>Day: "+i+": </strong>"+dStr+"<br />\n";
      }
      else {
        outStr += "<br /><strong>Day: "+i+": </strong>"+dStr+"<br />\n";
      }

      // create schedule start time selection
      outStr += "<select class=\"input-style sch\" name=\"sch_time\" size=\"1\">\n";
      outStr += "<option value=\"\"></option>\n";
      outStr += timeOpt+"</select>\n";

      outStr += " - ";

      // create schedule end time selection
      outStr += "<select class=\"input-style sch\" name=\"sch_end_time\" size=\"1\">\n";
      outStr += "<option value=\"\"></option>\n";
      outStr += timeOpt+"</select>\n";

      sdate = new Date(sdate.getTime()+86400000);  // increase by 1 day
      i += 1;  // increase day count
    }
    document.getElementById(fillID).innerHTML = outStr
  }  // fillSomeData


  /*****
   * Return a date string (Monday, ..., Sunday) regarding the given date number
   * (in JavaScript, 0 is Monday).
   */
  function getDayString(dateNum) {
    if (isNaN(dateNum)) { return ""; }  // not a number, return empty string
    switch(dateNum) {
      case 0: return "Monday";
      case 1: return "Tuesday";
      case 2: return "Wednesday";
      case 3: return "Thursday";
      case 4: return "Friday";
      case 5: return "Saturday";
      case 6: return "Sunday";
      default: return "";
    }
  }  // getDayString


  /*****
   * Return a date string (January, ..., December) regarding the given month number
   * (in JavaScript, 0 is January).
   */
  function getMonthString(monNum) {
    if (isNaN(monNum)) { return ""; }  // not a number, return empty string
    switch(monNum) {
      case 0: return "January";
      case 1: return "February";
      case 2: return "March";
      case 3: return "April";
      case 4: return "May";
      case 5: return "June";
      case 6: return "July";
      case 7: return "August";
      case 8: return "September";
      case 9: return "October";
      case 10: return "November";
      case 11: return "December";
      default: return "";
    }
  }  // getMonthString
  </script>
</head>

<body onload="fillSomeData('fillItIn')">
  <div id="fillItIn">
  </div>
</body>
</html>

PS: The onload in body tag is similar to $(document).ready(function(){...}).

thanks so much taywin, now i can move forward on my project!!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.