Question

I have a form where I have a Date text field and two dropdown fields, Start Time and End Time with 30-minutes time interval (from 8:00:00 – 22:30:00). This form initiates after a DayClick event on a fullcalendar.js plugin’s month view.

The TimeHelper.cs code for the StartTime and EndTime dropdown list is:

    public class TimeHelper
{
    public DateTime Start { get; private set; }
    public DateTime End { get; private set; }

public static List<TimeSpan> TimeSpansInRange(TimeSpan start, TimeSpan end, TimeSpan interval)
    {
        List<TimeSpan> timeSpans = new List<TimeSpan>();
        while (start.Add(interval) <= end)
        {
            timeSpans.Add(start);
            start = start.Add(interval);
        }
        return timeSpans;
    }

    public static List<TimeSpan> PossibleTimeSpansInDay()
    {
        return TimeSpansInRange(new TimeSpan(8, 0, 0), new TimeSpan(22, 30, 0), new TimeSpan(0, 30, 0));
    }

When a user selects time from a dropdown StartTime field I’d like to have a "past time" alert if a time of the day is less than the time is now.

How is it possible to disable the past times for selection, so a user can select only Start time that is always should be equal or bigger than the current time?

How can I specify a condition that the End Time is always bigger than the Start Time?

This is an ASP.NET MVC 1 application in C# where I use a fullcalendar.js plugin and jQuery.

This is a code in a Form that has a ‘Submit’ function:

$(document).ready(function() {

$("#Session").click(function () {
     if ($(this).is(':checked'))  {
        if($('#Course').val().length < 1)
        {
            alert('Session is required if you select a Course');
            return false;
        } 
    } 
 
});

// WARN: Calendar won't display an event without a title
    $("#calendar").fullCalendar({
        events: "<%= Url.Action("GetRoomCalendar", "Calendar", new { id = Model.Request.Room.ID }, null) %>",
        header: { left: "prev,next today", center: "title", right: "" },
        editable: true,
        aspectRatio: .9,
        weekends: false,
        weekMode: 'variable',
        timeFormat: 'h:mm tt{ - h:mm tt}',
        firstHour: 8,
        slotMinutes: 15,
        dayClick: function (date, allDay, jsEvent, view) {
         
        //Do Not allow scheduling past date reservations
        var today=new Date();
        today.setHours(0,0,0,0);
        if (date<today){
            $("#pastdate").dialog("open").text('You may not create past reservations. Consider scheduling a new reservation.'); 
            return false;

        }
        
            $("#new-event-dialog #Date").val($.fullCalendar.formatDate(date, "MM/dd/yyyy"));
            $("#new-event-dialog").dialog("open");
   
            var myDate = new Date();
                    
                    //How many days to add from today?
                    var daysToAdd = 21;
                    
                    myDate.setDate(myDate.getDate() + daysToAdd);
                
                    if (date < myDate) {
                        //TRUE Clicked date smaller than today + daysToadd
                        
                    $("#disclaimer").dialog("open").text('TBD');    
                    }
                    
        },
   

        loading: function (isLoading) {
            if (isLoading) {
                $('.loading').show();
            }
            if (!isLoading) {
                $('.loading').fadeOut('slow');
            }
        }
    });
                   
    $("#request-form").validate({ 
        showErrors: function(errorMap, errorList) {
            $("#error-summary").html("Your form contains " + this.numberOfInvalids() + " errors, check each tab.");
            this.defaultShowErrors();
        }
    });
    
    $("#new-event-dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        width: 850,
        buttons: {
            "Submit": function () {
                if ($("#request-form").validate().form() == true) {
                    $.ajax({
                        url: "<%= Url.Action("CreateAjax", "ReservationRequests", new { id = Model.Request.Room.ID }, null) %>",
                        data: $("#request-form").serialize(),
                        type: "POST",
                        datatype: "HTML",
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                        },
                        success: function(data, textStatus) {
                            $("#new-event-dialog").dialog("close");
                            $("#calendar").fullCalendar("refetchEvents");
                            $("#new-event-message").append(data).dialog("open");
                        }
                    });
                }
            },
            
            "Hide": function () {
                $(this).dialog("close");
            }
        },
        
        close: function () {
        }
    });

});
</script>
</asp:Content>

Answer 1

OK, I’m not a C# or ASP.NET master but assuming that your template code looks something like following then the first step is going to be editing the StartTimes, EndTimes and Date functions so that they return only times and dates that are in the valid range AND after the current time like the following.

public class TimeHelper
{
    public DateTime Start { get; private set; }
    public DateTime End { get; private set; }

    public static List<TimeSpan> TimeSpansInRange(TimeSpan start, TimeSpan end, TimeSpan interval)
    {
        List<TimeSpan> timeSpans = new List<TimeSpan>();
        TimeSpan now = DateTime.Now.TimeOfDay;
        while (start.Add(interval) <= end)
        {
            if(start.Add(interval) > now){
                timeSpans.Add(start);
            }
            start = start.Add(interval);
        }
        return timeSpans;
    }

    public static List<TimeSpan> PossibleTimeSpansInDay()
    {
        return TimeSpansInRange(new TimeSpan(8, 0, 0), new TimeSpan(22, 30, 0), new TimeSpan(0, 30, 0));
    }
}

That should take care of the first part of your question.

<label for="Date">Date</label> 
<%= Html.TextBox("Date", Model.Request.Date, new { @class="required" })%> 
<label for="Start">StartTime</label> 
<%=Html.DropDownList("Start",Model.Request.StartTimes, { new{@class="required"})%> 
<%= Html.ValidationMessage("Start", "")%> 
<label for="End">EndTime</label> 
<%=Html.DropDownList("End",Model.Request.EndTimes, { new{@class="required"})%> 
<%= Html.ValidationMessage("End", "")%>

For the second part of the question (disallowing invalid end times) we’re going to add some javascript and markup. Now I don’t know, but I’m going to assume that you have a submit input item to submit the form with the time date. Like follows:

<input type="submit" value="Submit" />

We’re going to replace that input item with a button and some javascript code.

HTML

<button onclick="checkTimes" />

Javascript

function checkTimes(){
    start = setTime(new Date(), $('#start_id'));
    end = setTime(new Date(), $('#end_id'));
    if(end > start){
        $('form_id').submit();
    } else {
        alert("End time must be greater then start time");
    }
}

function setTime(time, field){
    re = /^(\d{1,2}):(\d{2})(:00)$/;
    if(regs = field.value.match(re)) {
        time.setHours(regs[1], regs[2], 0, 0);
    }
    return time;
}

Now this code make some assumptions, namely that the start and end select fields and the form have ids named start_id, end_id and form_id respectively. That part of the code in the checkTimes function should be changed to whatever their ids actually are. I also assume that the time is in 00:00:00 format, if that’s not the case just change the value of re in the setTime function as appropriate.