Future date picking

I'm trying to implement in my website a feature that allows the user to add records to my database and in one of my forms the user need to pick future date.

For example:

Select box 1 - the day:

<select name="startDay" class="form-control"">
<option value="Today">Today</option>
<option value="Tomorrow">Tomorrow</option>
<option value="In 2 days">In 2 days</option>
</select>

****Select box 2 - the hour: (from 6:00 to 24:30)**** The loop creates option only for an hour which is not already passed! for example, if the hour now is 21:00, the loop will only show 21:00, 21:30, 22:00 and etc..

<select name="startHour" class="form-control">

    <?php
                for ($i = 6; $i <= 24; $i++){ 
                    for ($j=0; $j < 60; $j+=30) {
                        if ($j==0) $show = "00"; else $show="30";
                        if (date('H') < $i)
                echo '<option>'.$i.':'.$show.'</option>';
                }
                } 
                ?>
                </select>

My problem is: When the user pick's "Tomorrrow" in the first select box, It's still show the hours which are not passed today. that means that the user can only pick hours available only today even if he wants to set a new record for tomorrow.

Any ideas how to correct it and allow "Tomorrow" and above users to select any hour of the day?

Answers


Here is a complete solution:

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
});
function startDayChange() {
    // define minimum startHour depending on startDay:
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30,0);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0,0);
        }
    } else {
        minStartHour.setHours(6,0,0);
    }
    // prepare bounds for allowed hours:
    var startHour = minStartHour,
        stopHour = new Date();
    stopHour.setHours(24,30);
    // generate options:
    $('#startHour').empty();
    while (startHour.getTime() < stopHour.getTime()) {
        $('#startHour').append(
            '<option>'
            + startHour.toString().match(/\d{2}:\d{2}/)
            + '<\/option>'
        );
        startHour.setTime(startHour.getTime() + 1800000);
    }
}
</script>

Please note: there are so many ways to achieve this that we can't say this is "the" solution. Many other (and probably better) ones could be found. There is a working example here.

BTW, for any further question here, please don't ask for a totally built solution from scratch: it exceeds bounds of this site mission, which is to help about a particular issue you face while coding, rather than provide the entire code for a given final user need!


Since you posted your question with the "javascript" tag, seems clear that you expect the answer to be javascript too. So I wonder why you created your options with PHP, while you expect to have to change them further with javascript?.

And another important point about that is: creating options with PHP means you're using the server's hour, while your user may have a totally different one!

So it definitly must be all javascript, IMO. I guess you're not really inexperienced with JS, so the suggestion below only shows which structure may be used, and doesn't include all precise stuff about working on hours (but feel free to ask, if needed).

<select id="startDay" name="startDay" class="form-control">
    <option value="Today">Today</option>
    <option value="Tomorrow">Tomorrow</option>
    <option value="In 2 days">In 2 days</option>
</select>
<select id="startHour" name="startHour" class="form-control">
</select>

<script>
$(document).ready(function() {
    $('#startDay').change(startDayChange)
    // prepare startHour from startDay default value when just loaded
    .change();
}
function startDayChange() {
    var minStartHour = new Date();
    if ($('#startDay').val() == "Today") {
        if (minStartHour.getMinutes() < 30) {
            minStartHour.setMinutes(30);
        } else {
            minStartHour.setHours(minStartHour.getHours() + 1);
            minStartHour.setMinutes(0);
        }
    } else {
        minStartHour.setHours(6);
        minStartHour.setMinutes(0);
    }
    // then work using minStartHour...
}
</script>

Note that we had to add an id attribute to <select> tags.


Need Your Help

EF Code First relation 0/1 to 0/1 with various parents

entity-framework ef-code-first code-first code-first-migrations

I have some problems with EF CodeFirst and relations 0/1 to 0/1. I have 3 "tables" that contains another, and this is optional.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.