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?
brucegustPHP DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
could you show your current code?
0
Julian HansenCommented:
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
0
ramyajanarthananCommented:
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.
0
brucegustPHP DeveloperAuthor Commented:
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?
0
Julian HansenCommented:
Try this
<!doctype html>
<html>
<head>
<title>EE Q28228329</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('select.start_time').change(function(){
	
	// Work out next time in 24 hour format
        var t = (parseInt($('#start_hour').val()) + parseInt($('#start_ampm').val()) + 1);
		
        // Set am / pm depending on whether we clocked over or not
        $('#end_ampm').val( ((t % 24 > 12) ? 12 : 0));
		
        // Convert back to 12 hour time
        t = ((t%12) == 0) ? 12 : t%12;
		
        // Update the select boxes
        $('#end_hour').val(t);
        $('#end_minutes').val($('#start_minutes').val());
    });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table border="1">
    <tr>
        <td colspan="3" class="admin_body">
            Time
        </td>
    </tr>
    <tr>
        <td>
            <select name="start_hour" id="start_hour" class="start_time">
                <option value="-1">hour</option>
                <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>
            </select>
        </td>
        <td>
            <select name="start_minutes" id="start_minutes" class="start_time">
                <option value="-1">minutes</option>
                <option value="0">00</option>
                <option value="5">05</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
                <option value="35">35</option>
                <option value="40">40</option>
                <option value="45">45</option>
                <option value="50">50</option>
                <option value="55">55</option>
            </select>
        </td>
        <td>
            <select name="start_morning_evening" id="start_ampm" class="start_time">
                <option value="0">am</option>
                <option value="12">pm</option>
            </select>
        </td>
    </tr>
</table>
<table border="1">
    <tr>
        <td colspan="3" class="admin_body">
            Time
        </td>
    </tr>
    <tr>
        <td>
            <select name="end_hour" id="end_hour">
                <option value="-1">hour</option>
                <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>
            </select>
        </td>
        <td>
            <select name="end_minutes" id="end_minutes">
                <option value="-1">minutes</option>
                <option value="0">00</option>
                <option value="5">05</option>
                <option value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="25">25</option>
                <option value="30">30</option>
                <option value="35">35</option>
                <option value="40">40</option>
                <option value="45">45</option>
                <option value="50">50</option>
                <option value="55">55</option>
            </select>
        </td>
        <td>
            <select name="end_morning_evening" id="end_ampm">
                <option value="0">am</option>
                <option value="12">pm</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>

Open in new window

Working Sample
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.