Bruce Gust
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?
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?
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>
Working sample
try using keyup.
On the current date have your date pull up.and on previous date just calculate the time before an hour and append it.
<!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>
On the current date have your date pull up.and on previous date just calculate the time before an hour and append it.
ASKER
I think we're poised on the threshold of great things!
Here's the code for my start time:
...and then here's the code for the end time:
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?
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>
...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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.