如何将日期范围选择器仅用于一个日历

Question

我在使用日期范围选择器仅显示一个日历时遇到问题。我不太确定从哪里开始，因为当你想更改月份时，简单地隐藏另一个日历似乎不起作用。

我正在尝试使用日期范围选择器来创建一个简化的、移动友好的日期范围选择器。我可以这样做的一个方法是删除其中一个日历。这将使我在移动版上有更多的空间，并使我可以在我的网站上查看大多数重要内容。

我正试图使用bootstrap 3来实现这一点。我还在后端使用ASP.NET MVC。

DateRangePicker github回购

Answer 1

DateRangePicker(选择具有单个扩展日历的日期范围(。我将附上一个链接，通过一个例子引导您完成整个过程。

using System;
namespace CustomWebControls
{
[Serializable]
public struct DateRange
{
public static readonly DateRange EMPTY = new DateRange();
readonly DateTime from;
readonly DateTime to;

public DateRange(DateTime from, DateTime to)
{
this.from = from;
this.to = to;
}

public DateTime From
{
get { return from; }
}
public DateTime To
{
get { return to; }
}
public TimeSpan TimeSpan
{
get
{
return to - from;
}
}
public bool Contains(DateTime time)
{
return from <= time && time < to;
}
public DateRange Include(DateRange otherRange)
{
return Include(otherRange.From).Include(otherRange.To);
}
public DateRange Include(DateTime date)
{
if (date < from)
return new DateRange(date, to);
else if (date > to)
return new DateRange(from, date);
else 
return this;
}
/// <summary>
/// Creates a one day (24 hr) long DateRange starting at DateTime
/// </summary>
public static DateRange CreateDay(DateTime dateTime){
return new DateRange(dateTime, dateTime.AddDays(1));
}
#region operators and overrides
public override int GetHashCode()
{
return from.GetHashCode() + 29*to.GetHashCode();
}
public override bool Equals(object obj)
{
if (ReferenceEquals(this, obj)) return true;
if (!(obj is DateRange)) return false;
DateRange dateRange = (DateRange) obj;
if (!Equals(from, dateRange.from)) return false;
if (!Equals(to, dateRange.to)) return false;
return true;
}

public static bool operator == (DateRange d1, DateRange d2)
{
return d1.Equals(d2);
}
public static bool operator !=(DateRange d1, DateRange d2)
{
return !d1.Equals(d2);
}
#endregion
}
}

日期范围选取器这是覆盖Calendar的类。它有两个属性，一个用于设置选定DateRange的样式，另一个用于存储选定DateRange。

using System.ComponentModel;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomWebControls
{
/// <summary>
/// An extended Calendar that can select DateRanges as well as Dates
/// </summary>
[DefaultProperty("Text")]
[ToolboxData("<{0}:DateRangePicker runat="server"></{0}:DateRangePicker>")]
public class DateRangePicker : Calendar
{
static readonly TableItemStyle defaultSelectedDateRangeStyle = new TableItemStyle();

static DateRangePicker()
{
//initialise a default colour for defaultSelectedDateRangeStyle
defaultSelectedDateRangeStyle.BackColor = Color.LightSteelBlue;
}
TableItemStyle selectedDateRangeStyle = defaultSelectedDateRangeStyle;
protected override void OnDayRender(TableCell cell, CalendarDay day)
{
if (SelectedDateRange.Contains(day.Date))
{
cell.ApplyStyle(selectedDateRangeStyle);
}
}
protected override void OnSelectionChanged()
{
base.OnSelectionChanged();
bool emptyDateRange = SelectedDateRange == DateRange.EMPTY;
bool dateRangeAlreadyPicked = SelectedDateRange.TimeSpan.TotalDays > 1;
if (emptyDateRange || dateRangeAlreadyPicked)
{
SelectedDateRange = DateRange.CreateDay(SelectedDate);
//save this date as the first date in our date range
}
else
{
SelectedDateRange = 
SelectedDateRange.Include(DateRange.CreateDay(SelectedDate));
//set the end date in our date range
}
}
//DateRange gets stored in the viewstate since
//it's a property that needs to persist across page requests.
<Browsable(false)>
public DateRange SelectedDateRange
{
get { return (DateRange) (ViewState["SelectedDateRange"]??DateRange.EMPTY); }
set { ViewState["SelectedDateRange"] = value; }
}
//SelectedDateRangeStyle goes into a private
//variable since this property is designed.
[Category("Styles")]
[Description("The Style that is aplied to cells within the selected Date Range")]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[NotifyParentProperty(true)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public TableItemStyle SelectedDateRangeStyle
{
get { return selectedDateRangeStyle; }
set { selectedDateRangeStyle = value; }
}
}
}

在此处输入链接描述