如何比较同一天的开始和结束时间选择 [英] How to compare start and end time selections of the same day
问题描述
我有一个表单，其中有一个日期"文本字段和两个下拉字段，即开始时间"和结束时间"，间隔时间为30分钟(从8:00:00-22:30:00).此表单在fullcalendar.js插件的月份视图上发生DayClick事件后启动.
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.
StartTime和EndTime下拉列表的TimeHelper.cs代码为:
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?
这是C#中的ASP.NET MVC 1应用程序，我在其中使用fullcalendar.js插件和jQuery.
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>
推荐答案
好的，我不是C#或ASP.NET管理员，但假设您的模板代码如下所示，那么第一步将是编辑StartTimes，EndTimes和Date函数，以便它们仅返回有效范围内和当前时间之后的时间和日期，如下所示.
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", "")%>
对于问题的第二部分(不允许无效的结束时间)，我们将添加一些javascript和标记.现在我不知道，但我将假设您有一个提交输入项，以提交带有时间日期的表单.如下所示:
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" />
我们将用一个按钮和一些javascript代码替换该输入项.
We're going to replace that input item with a button and some javascript code.
HTML
<button onclick="checkTimes" />
JavaScript
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的值即可.希望对您有帮助.
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. I hope this is helpful to you.
这篇关于如何比较同一天的开始和结束时间选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
