Блог

У меня есть форма, в которой у меня есть текстовое поле даты и два выпадающих поля: время начала и время окончания с 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>
  

Хорошо, я не специалист по 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 соответствующим образом.