| RadControls版本<道明>2010, 1, 519, 35 |
<道明>net版本<道明>3.5 SP1
<道明风格="width: 120px;">Visual Studio版本<道明>2008
<道明风格="width: 120px;">编程语言<道明>c#, Javascript
<道明>浏览器支持<道明>所有的浏览器RadControls支持
项目描述
该项目演示了如何使用RadCalendar和RadCombobox控件来选择日期范围，这与DatePicker接口非常相似。这是通过在RadComboBox ItemTemplate部分中放置两个RadCalendar(用于开始日期和结束日期)和两个按钮(一个用于获取日期范围，另一个用于关闭下拉菜单)来实现的。在每个日历的OnDateSelected客户端事件中，通过设置MaxDate/MinDate值来设置另一个日历中的可选择日期。在OK按钮的OnClientClick事件中，从两个日历中获取所选日期(日期范围)。
在主页中获取选定的日期范围:
用户控件标记- RangeSelector.ascx:
<%@控制语言=" c# " AutoEventWireup="true" CodeFile=" rangeselector . asx .cs"
继承= " RangeSelector " % >
<%@ Register Assembly="Telerik.Web。UI Telerik.Web“Namespace =”。UI" TagPrefix="telerik" %>
<telerik: RadComboBoxID=“RadComboBox1”runat=“服务器”DropDownWidth=“390”文本=“选择一个日期”
OnClientDropDownClosing=“OnClientDropDownClosing”AllowCustomText=“真正的”ShowToggleImage=“假”
runat=“服务器”>
<ItemTemplate>
<表格风格=宽度:100%;“>
<tr>
<道明>
开始日期
<telerik: RadCalendarShowRowHeaders=“假”ShowColumnHeaders=“真正的”高度=“70”
宽度=“180”ID=“RadCalendar1”EnableMultiSelect=“假”runat=“服务器”>
<ClientEventsOnLoad=“OnLoadCalendar1”OnDateSelected=“Calendar1OnDateSelected”/>
telerik: RadCalendar>
道明>
<道明>
结束日期
<telerik: RadCalendarShowRowHeaders=“假”ShowColumnHeaders=“真正的”高度=“70”
宽度=“180”ID=“RadCalendar2”EnableMultiSelect=“假”runat=“服务器”>
<ClientEventsOnLoad=“OnLoadCalendar2”OnDateSelected=“Calendar2OnDateSelected”/>
telerik: RadCalendar>
道明>
tr>
表格>
ItemTemplate>
<项目>
<telerik: RadComboBoxItem/>
项目>
<FooterTemplate>
<div风格=“text-align:中心;”>
<输入id=“Button2”类型=“按钮”价值=“完成”onclick=“获取当前日期();“/>
<输入id=“Button1”类型=“按钮”价值=“关闭”onclick=“Close();“/>
div>
FooterTemplate>
telerik: RadComboBox>
<脚本类型=“text / javascript”>
Var x = 0;
OnClientDropDownClosing(sender, args) {
If (x == 0) {
args.set_cancel(真正的);
}
}
函数getDates() {
var combo = $find("<%=RadComboBox1. "ClientID % > ");
Var item = combo.get_items();
var startDate = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0];
var endDate = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0];
如果(startDate !=未定义&& endDate !=未定义){
var startDateYear = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][0];
var startdatemonmonth = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][1];
var startDate = item.getItem(0).findControl("RadCalendar1").GetSelectedDates()[0][2];
var endDateYear = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][0];
var enddatemonmonth = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][1];
var endDate = item.getItem(0).findControl("RadCalendar2").GetSelectedDates()[0][2];
组合。set_text(startDateMonth + '/' + startDate + '/' + startDateYear + '-' + endDateMonth + '/' + endDate + '/' + endDateYear);
X = 1;
combo.hideDropDown ();
}
如果(startDate ==未定义&& endDate !=未定义){
alert("请选择开始日期");
}
如果(startDate !=未定义&& endDate ==未定义){
alert("请选择结束日期");
}
其他{
alert(“请选择开始和结束日期”);
}
}
Close() {
var combo = $find("<%=RadComboBox1. "ClientID % > ");
组合。set_text("选择日期");
X = 1;
combo.hideDropDown ();
}
var firstCalendar;
OnLoadCalendar1(sender, args) {
firstCalendar = sender;
}
var secondCalendar;
OnLoadCalendar2(sender, args) {
secondCalendar = sender;
}
函数Calendar1OnDateSelected(sender, args) {
Var calendar1 = sender;
var calendar2 =第二个日历;
if (calendar1.get_selectedDates()[0] != undefined) {
var dates = calendar1.get_selectedDates();
Var date =日期[0];
日期[2]=日期[2];
calendar2.set_rangeMinDate(日期);//设置Calendar2的最小日期范围
}
X = 0;
}
函数Calendar2OnDateSelected(sender, args) {
Var calendar2 = sender;
var calendar1 = firstCalendar;
if (calendar2.get_selectedDates()[0] != undefined) {
var日期= calendar2.get_selectedDates();
Var date =日期[0];
日期[2]=日期[2];
calendar1.set_rangeMaxDate(日期);//设置Calendar1的最大日期范围
}
X = 0;
}
脚本>
用户控制代码文件- rangeselector . asx .cs
：
谢谢,
Princy。