Question

我有一个表单，其中有一个日期文本字段和两个下拉字段，开始时间和结束时间，时间间隔为30分钟（从8:00:00 - 22:30:00）。此表单在fullcalendar.js插件的月视图上的DayClick事件之后启动。

StartTime和EndTime下拉列表的TimeHelper.cs代码是：

    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字段中选择时间时，如果当天的时间小于现在的时间，我希望有“过去时间”警报。

如何禁用过去的选择时间，以便用户只能选择始终应该等于或大于当前时间的开始时间？

如何指定结束时间始终大于开始时间的条件？

这是C＃中的ASP.NET MVC 1应用程序，我使用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函数，以便它们只返回时间和日期在当前时间之后的有效范围AND中，如下所示。

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的id。 checkTimes函数中的那部分代码应该更改为它们实际上的任何ID。我还假设时间是00:00:00格式，如果不是这种情况，只需根据需要更改setTime函数中的re值。我希望这对你有所帮助。

如何比较同一天的开始和结束时间选择

1 个答案: