Как сравнить выбор времени начала и окончания того же дня

Question

У меня есть форма, в которой у меня есть текстовое поле Дата и два раскрывающихся поля: Время начала и Время окончания с 30-минутным интервалом времени (с 8:00:00 до 22:30:00).Эта форма инициируется после события DayClick в представлении месяца плагина fullcalendar.js.

Код TimeHelper.cs для раскрывающихся списков StartTime и EndTime:

    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));
    }

Когда пользователь выбирает времяиз выпадающего поля StartTime я хотел бы получать оповещение «в прошлое», если время дня меньше, чем сейчас.

Как можно отключить прошедшие времена для выбора, чтобы пользователь мог выбрать только время начала, которое всегда должно быть равно или больше, чем текущее время?

Как мне указать условие, что Время окончания всегда больше, чем Время начала?

Это приложение ASP.NET MVC 1 в C #, где я использую плагин fullcalendar.js иjQuery.

Буду признателен за ваши советы!

Это код в форме, который имеет функцию «Отправить»:

$(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

ОК, я не мастер C # или ASP.NET, но если предположить, что код вашего шаблона выглядит примерно так, то первым шагом будет редактирование функций StartTimes, EndTimes и Date, чтобы они возвращали только время и даты которые находятся в допустимом диапазоне И после текущего времени, как показано ниже.

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));
    }
}

Это должно решить первую часть вашего вопроса.

<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", "")%>

Для второй части вопроса (запрет недопустимого времени окончания) мы собираемся добавить немного javascript и разметки. Теперь я не знаю, но я собираюсь предположить, что у вас есть элемент ввода для отправки формы с датой времени. Как следует:

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

Мы собираемся заменить этот элемент ввода кнопкой и кодом JavaScript.

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;
}

Теперь этот код делает некоторые предположения, а именно, что поля выбора начала и конца и форма имеют идентификаторы start_id, end_id и form_id соответственно. Эта часть кода в функции checkTimes должна быть заменена на то, что их идентификаторы на самом деле. Я также предполагаю, что время указано в формате 00:00:00, если это не так, просто измените значение re в функции setTime соответствующим образом. Я надеюсь, что это полезно для вас.