Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

Auto populating a time and date

I've got a form where a user can enter a date and a time much like an iphone calendar.

I want to duplicate the Apple approach so when the user defines a "start time" using one the pulldown menus, the "end time" is automatically populated with a time that is one hour past the "starting time."

It's something the user can easily override by manually putting a time in, but, for the sake of convenience, an end time is automatically entered into the appropriate fields.

I'm thinking I could do this with Javascript, but have no clue as to how.

Thoughts?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

could you show your current code?
You mean something like this
<!doctype html>
<html>
<head>
<title>EE Q28228329</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#time1').change(function(){
        $('#time2').val((parseInt($(this).val())+1)%24);
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
Time 1 <select id="time1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
    </select>
Time 2 <select id="time2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
    </select>
</body>
</html>

Open in new window

Working sample
try using keyup.


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
  var currentsource = $("#currentdate"),
      finaldate = $("#previousdate");
  currentsource .on("keyup", function() {
    finaldate .val(currentsource .val());
  });
});

</script>


<meta charset=utf-8 />
</head>
<body>
  <input type = "text" id = "currentdate" > 
<br>
<input type = "text" id = "previousdate">
<br>
<button>Click me</button>
  
</body>
</html>

Open in new window


On the current date have your date pull up.and on previous date just calculate the time before an hour and append it.
Avatar of Bruce Gust

ASKER

I think we're poised on the threshold of great things!

Here's the code for my start time:

<table border="1">
<tr>
<td colspan="3" class="admin_body">
Time
</td>
</tr>
<tr>
<td>
<select name="start_hour">
<option selected>hour</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
<td>
<select name="start_minutes">
<option selected>minutes</option>
<option></option>
<option>00</option>
<option>05</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
</select>
</td>
<td>
<select name="start_morning_evening">
<option selected>am</option>
<option>am</option>
<option>pm</option>
</select>
</td>
</tr>
</table>

Open in new window


...and then here's the code for the end time:

<table border="1">
<tr>
<td colspan="3" class="admin_body">
Time
</td>
</tr>
<tr>
<td>
<select name="end_hour">
<option selected>hour</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
<td>
<select name="end_minutes">
<option selected>minutes</option>
<option></option>
<option>00</option>
<option>05</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
</select>
</td>
<td>
<select name="end_morning_evening">
<option selected>am</option>
<option>am</option>
<option>pm</option>
</select>
</td>
</tr>
</table>

Open in new window


My only question based on the suggestions that have been made thus far, is how do I ensure the am / pm field gets appropriately altered if, in fact, it needs to be? So if a user hits 11:59 PM, the next hour would be 12:59 AM. How do I accommodate that?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial