Ajax Calendar - <b>Control with topright:</b> - <asp:TextBox ID ...

bubblemessengerSecurity

Nov 5, 2013 (3 years and 9 months ago)

205 views

-

Ajax Calendar

-

<
b
>
Control with topright:
</
b
>

-

<
asp:TextBox

ID
="txtDate3"

runat
="server"

Width
="70">

</
asp:TextBox
>

-

<
ajax
toolkit:
calendar
extender

ID
="calExtender3"

runat
="server"

-


PopupButtonID
="btnDate3"

PopupPosition
="TopRight"

-


TargetControlID
="txtDa
te3"

>

-

</
ajax
toolkit:
calendar
extender
>

-

<
asp:ImageButton

ID
="btnDate3"

ImageUrl
="~/images/
Calendar
Icon.jpg"

-


Width
="20px"

runat
="server"

/>

-

S


ki

n trong asp.net

-

<
b
>
Control with no date earlier than today:
</
b
>

-

<
asp:TextBox

ID
="txtDate4"

runat
="server"

Width
="70"></
asp:TextBox
>

-

<
ajax
toolkit:
calendar
extender

ID
="calExtender4"

runat
="server"

-


PopupButtonID
="btnDate4"

PopupPosition
="TopRight"

-



TargetControlID
="txtDate4"

OnClientDateSelectionChanged
="CheckDateEalier">

-

</
ajax
toolkit:
calendar
extender
>

-

<
asp:ImageButton

ID
="btnDate4"

ImageUrl
="~/images/
Calendar
Icon.jpg"

-


Width
="20px"

runat
="server"

/>


-

Javascript kiểm tra ngày chọn trong Ajax C
alendar

-

<title>
Ajax

Calendar

Control
</
title
>

-

<
script

type
="text/javascript">

-

function CheckDateEalier(sender,args) {

-


if

(sender._selectedDate <
new

Date()) {

-


alert(
"You cannot select a day before today!"
);

-


sender._selectedDate =
new

D
ate();

-


// set the date back to the today

-


sender._textbox.set_Value(sender._selectedDate.format(sender._format))

-


}

-

}

-

</script>



Link tài li

u

http://demos.telerik.com/aspnet
-
ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx


<
%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true"
Inherits="Telerik.Web.Examples.Calendar.DateTimePicker.Overview.Defaul
tCS" %
>


<
%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %
>

<
%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %
>

<
%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %
>

<
%@ Register TagP
refix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI"
%
>

<
%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %
>

<!
DOCTYPE

html PUBLIC "
-
//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

<
html

xmlns="http://www
.w3.org/1999/xhtml"
>

<
head

runat="server"
>


<
qsf:HeadTag

runat="server" ID="Headtag1"
></
qsf:HeadTag
>

</
head
>

<
body

class="BODY"
>


<
form

id="Form1" method="post" runat="server"
>


<
qsf:Header

ID="Header1" runat="server" NavigationLanguage="CS"
></
qsf
:Header
>


<
telerik:RadScriptManager

ID="RadScriptManager1" runat="server"

/>


<
telerik:RadFormDecorator

ID="RadFormDecorator1" runat="server"

/>


<
telerik:RadAjaxManager

ID="RadAjaxManager1" runat="server"
UpdatePanelsRenderMode="Inline"
>


<
AjaxSettings
>


<
telerik:AjaxSetting

AjaxControlID="chkShowHideTimePopUp"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
Up
datedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="chkShowPopUpOnFocus"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoad
ingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="chkEnableShadows"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicke
r1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="btnToolTip"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedContro
l

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="btnApplyStartEndTime"
>


<
UpdatedControls
>



<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="ddlTimeInterval"
>



<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="ddl
Format"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSe
tting

AjaxControlID="ddlTimeViewLayout"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSett
ing
>


<
telerik:AjaxSetting

AjaxControlID="ddlPopupDirection"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


<
telerik:AjaxSetting

AjaxControlID="rblRenderDirection"
>


<
UpdatedControls
>


<
telerik:AjaxUpdatedControl

ControlID="rblRenderDirection"

/>


<
telerik:AjaxU
pdatedControl

ControlID="RadTimePicker1"
LoadingPanelID="RadAjaxLoadingPanel1"

/>


</
UpdatedControls
>


</
telerik:AjaxSetting
>


</
AjaxSettings
>


</
telerik:RadAjaxManager
>


<
telerik:RadAjaxLoadingPanel

ID="RadAjaxLoadin
gPanel1" runat="server"

/>


<
div

style="height: 50px"
>


</
div
>


<
span

style="margin
-
right: 5px;"
>
Select time:
</
span
>


<
telerik:RadTimePicker

ID="RadTimePicker1" runat="server" ZIndex="30001"

/>


<
div

style="height: 50px"
>


</
div
>


<
qsf
:ConfiguratorPanel

runat="server" ID="ConfigurationPanel1" Title="Configurator"


Expanded="true"
>


<
table
>


<
tr
>


<
td
>

<asp:CheckBox runat="server" ID="chkShowHideTimePopUp" Text="Show/hide time popup
button"

AutoPos
tBack="True"
OnCheckedChanged="chkShowHideTimePopUp_CheckedChanged"></asp:CheckBox>


<
br

/>

<asp:CheckBox runat="server" ID="chkShowPopUpOnFocus" Text="Show popup on focus"

AutoPostBack="True"
OnCheckedChanged="chkShowPopUpOnFocus_Checke
dChanged"></asp:CheckBox>


<
br

/>

<asp:CheckBox runat="server" ID="chkEnableShadows" Text="Enable shadows"
AutoPostBack="True"

OnCheckedChanged="chkEnableShadows_CheckedChanged"></asp:CheckBox>


<
table
>



<
tr
>


<
td
>


</
td
>


<
td

style="width: 150px;"
>

<asp:CompareValidator ID="StartEndTimeCompareValidator" runat="server"
ControlToValidate="txtBoxEndTime"

ControlToCompar
e="txtBoxStartTime" Type="Integer" Operator="GreaterThan"
ErrorMessage="End time must be greater than start time" />


</
td
>


</
tr
>


<
tr
>


<
td
>



Start time:


</
td
>


<
td
>


<
telerik:RadNumericTextBox

ID="txtBoxStartTime"
runat="server" MinValue="0" MaxValue="23"


NumberFormat
-
AllowRounding="false" NumberFormat
-
KeepNotRoundedValue="true"

/>


</
td
>


<
td

rowspan="3"
>

<asp:Button ID="btnApplyStartEndTime" runat="server" Text="Apply start/end time"

OnClick="btnApplyS
tartEndTime_Click" Width="100%" />


</
td
>


</
tr
>


<
tr
>


<
td
>


End time:


</
td
>



<
td
>


<
telerik:RadNumericTextBox

ID="txtBoxEndTime"
runat="server" MinValue="0" MaxValue="23"


NumberFormat
-
AllowRounding="false" NumberFormat
-
KeepNotRoundedValue="true"

/>



</
td
>


</
tr
>


<
tr
>


<
td
>


Interval:


</
td
>


<
td
>

<asp:DropDownList ID="ddlTime
Interval" runat="server" Width="130px" AutoPostBack="True"

OnSelectedIndexChanged="ddlTimeInterval_SelectedIndexChanged">


<
asp:ListItem

Value="10"
>
10 min
</
asp:ListItem
>


<
asp:ListItem

V
alue="15"
>
15 min
</
asp:ListItem
>


<
asp:ListItem

Value="30"
>
30 min
</
asp:ListItem
>


<
asp:ListItem

Value="1"
>
60 min
(default)
</
asp:ListItem
>


</
asp:DropDownLis
t
>


</
td
>


</
tr
>


</
table
>


<
br

/>


<
table
>


<
tr
>


<
td
>


Set tooltip
:


</
td
>


<
td
>


<
asp:TextBox

ID="tooltipBox" runat="server"
Width="200px"

/>


</
td
>


<
td
>



<
asp:Button

ID="btnToolTip" runat="server" Text="Apply
tooltip" OnClick="btnToolTip_Click"

/>


</
td
>


</
tr
>


</
table
>


</
td
>


<
td
>


C
hoose format for TimeView and DateInput:


<
br

/>


<
asp:DropDownList

ID="ddlFormat" runat="server" Width="80%"
AutoPostBack="True" OnSelectedIndexChanged="ddlFormat_SelectedIndexChanged"
>


<
asp:Li
stItem

Value="t"
>
t (default)
</
asp:ListItem
>


<
asp:ListItem

Value="HH:mm"
>
HH:mm
</
asp:ListItem
>


<
asp:ListItem

Value="HH:mm:ss"
>
HH:mm:ss
</
asp:ListItem
>


</
asp:DropDownList
>


<
br

/>


<
br

/>


Number of columns in TimeView:

<asp:DropDownList runat="server" ID="ddlTimeViewLayout" Width="80%" AutoPostBack="True"

OnSelectedIndexChanged="ddlTimeViewLayout_SelectedIndexChanged">



<
asp:ListItem

Value="2"
>
2 columns
</
asp:ListItem
>


<
asp:ListItem

Value="3"
>
3 columns (default)
</
asp:ListItem
>


<
asp:ListItem

Value="4"
>
4 columns
</
asp:ListItem
>


<
asp:ListItem

Value="
5"
>
5 columns
</
asp:ListItem
>


</
asp:DropDownList
>


<
br

/>


<
br

/>


Select popup expand direction:

<asp:DropDownList runat="server" ID="ddlPopupDirection" Width="80%" AutoPostBack="T
rue"

OnSelectedIndexChanged="ddlPopupDirection_SelectedIndexChanged">


<
asp:ListItem

Value="BottomRight"
>
BottomRight(default)
</
asp:Lis
tItem
>


<
asp:ListItem

Value="BottomLeft"
>
BottomLeft
</
asp:ListItem
>



<
asp:ListItem

Value="TopRight"
>
TopRight
</
asp:ListItem
>


<
asp:ListItem

Value="TopLeft"
>
TopLeft
</
asp:ListItem
>


</
asp:DropDownList
>


</
td
>


<
td

style="width: 150px;"
>



Select rendering direction:


<
br

/>


<
asp:RadioButtonList

ID="rblRenderDirection" runat="server"
AutoPostBack="True" OnSelectedIndexChanged="rblRenderDirection_SelectedIndexChanged"
>



<
asp:ListItem

Value="1"
>
Render in Rows
</
asp:ListItem
>


<
asp:ListItem

Value="2"
>
Render in Columns
</
asp:ListItem
>


</
asp:RadioButtonList
>


</
td
>


</
tr
>


</
table
>


</
qsf:Config
uratorPanel
>


<
qsf:Footer

ID="Footer2" runat="server"
></
qsf:Footer
>


</
form
>

</
body
>

</
html
>



Calendar Extender


If you want to popup a Calendar on the click of a button, you can use set the
PopupButtonID of the CalendarExtender to the ID of the bu
tton. In this case, we will be
using an ImageButton as shown below:



<
asp
:
ImageButton

runat
="Server"

ID
="ImageButton1"

ImageUrl
="~/Images/I
con1.jpg"
AlternateText
="Click

here to

display calendar"

/>



<
asp
:
TextBox

ID
="TextBox1"

runat
="server">
</
asp
:
TextBox
>





<
cc1
:
CalendarExtender

ID
="CalendarExtender1"

runat
="server"



TargetControlID
="TextBox1"

PopupButtonID
="ImageButton1"/>

If you are using an earlier version of the toolkit, you may observe that the ImageButton
causes

a postback when you click on it again, to close the Calendar. To avoid the postback,
use a HTML Image Control instead of the Server side Image Control as shown below:



<
img

alt
="Icon"

src
="/Images/Icon1.jpg"

id
="Image1"

/>



<
asp
:
TextBox

ID
="
TextBox1"

runat
="server"></
asp
:
TextBox
>





<
cc1
:
CalendarExtender

ID
="CalendarExtender1"

runat
="server"



TargetControlID
="TextBox1"

PopupButtonID
="Image1"/>



Note:

In case you are clicking on the textbox to open the calendar, then
in earlier versions
of the toolkit, the calendar would not hide automatically when the user clicked anywhere
outside the Calendar control. However this was fixed in the later versions. In fact, in the
latest version, the Calendar hides automatically when a

date is selected.

If for some reason you are facing issues with the Calendar not hiding automatically, make
sure that you have the latest version of the AJAX Control Toolkit.



Tip 2: How to Add a CalendarExtender to a GridView

If you want to add a Ca
lendarExtender to a GridView, use a template field with a TextBox
and CalendarExtender as shown below:



<
form

id
="form1"

runat
="server">



<
asp
:
ScriptManager

ID
="ScriptManager1"

runat
="server"

/>



<
div
>



<
asp
:
GridView

ID
="GridVie
w1"

runat
="server"

AutoGenerateColumns
="Fals
e"
DataKeyNames
="CategoryID"



DataSourceID
="SqlDataSource1"

ShowFooter
="true"

AllowPaging
="True
"
AllowSorting
="True">



<
Columns
>




<
asp
:
BoundField

DataField
="Categor
yID"

HeaderText
="CategoryID"



SortExpression
="CategoryID"

/>



<
asp
:
BoundField

DataField
="CategoryName"

HeaderText
="Catego
ryName"




SortExpression
="CategoryName"

/>



<
asp
:
TemplateField
>




<
ItemTemplate
>



<
asp
:
TextBox

ID
="TextBox1"

runat
="server"></
asp
:
TextBox
>



<
cc1
:
CalendarExtender

ID
="CalendarExtender1"

runat
="serve
r"
TargetControlID
="TextBox1"/>



</
ItemTemplate
>




</
asp
:
TemplateField
>




</
Columns
>



</
asp
:
GridView
>



<
asp
:
SqlDataSource

ID
="SqlDataSource1"

runat
="server"

ConnectionStrin
g
="Data Source=SUPROTIM;Initial Catalog=Northwind;Integrated Security=True"



S
electCommand
="SELECT [CategoryID], [CategoryName] FROM
[Categories]"

>



</
asp
:
SqlDataSource
>





</
div
>



</
form
>

Tip 3: Enable Year Navigation in CalendarExtender

When the calendar appears, click on the title of the calendar to change

the view to Months
in the current year. Clicking it again, switches the view to Years, showing 10 years at a
time.

If you plan to do this programmatically, here’s some code for you. Use the OnClientShown
event and switch the mode using javascript. This t
ip was shared by one of the Microsoft®
support person at the asp.net forums.

<
asp
:
TextBox

ID
="TextBox1"

runat
="server"></
asp
:
TextBox
>


<
cc1
:
CalendarExtender

ID
="CalendarExtender1"

runat
="server"

TargetControlID
="TextBox1"

OnClientShown
="ChangeCalendarVi
ew"

/>

Then add this to the <head> section

<
head

runat
="server">

<
title
>
CalendarExtender
</
title
>



<
script

type
="text/javascript">

function

ChangeCalendarView(sender,args)

{



sender._switchMode(
"years"
,

true
);


}

</
script
>

</
head
>

T
ip 4: Display only the day and month in the CalendarExtender

To select only the day and month without the year, use the Format property of the
CalendarExtender and set it to “dd/MM” as shown below:

<
cc1
:
CalendarExtender

ID
="CalendarExtender1"

runat
="serv
er"

Format
="dd/MM"
Tar
getControlID
="TextBox1"

/
>



Tip 5: How to Set Culture to work with CalendarExtender

Make sure that the ScriptManager has EnableScriptGlobalization="true" and
EnableScriptLocalization="true".



<
asp
:
ScriptManager

ID
="ScriptManager
1"

runat
="server"



EnableScriptGlobalization
="true"

EnableScriptLocalization
="true"

/>

Tip 6: How to make sure user does not select a date earlier than today or greater
than today

There could be instances where you do not want the user to select

a day earlier than the
current date. For example: when you are providing the user a form to book tickets, you
would not like him to choose an earlier date. To achieve this requirement, use the following
javascript code.

Prevent the User from selecting a
Date Earlier than today

<
head

runat
="server">



<
title
>
Calendar Extender
</
title
>



<
script

type
="text/javascript">



function

checkDate(sender,args)

{


if

(sender._selectedDate <

new

Date())



{



alert(
"You cannot sel
ect a day earlier than today!"
);



sender._selectedDate =

new

Date();




// set the date back to the current date

sender._textbox.set_Value(sender._selectedDate.format(sender._format))



}

}



</
script
>

</
head
>

Call the code:



<
form

id
="form1"

runat
="server">



<
asp
:
ScriptManager

ID
="ScriptManager1"

runat
="server"

/>



<
div
>





<
asp
:
TextBox

ID
="TextBox1"

runat
="server"></
asp
:
TextBox
>



<
cc1
:
CalendarExtender

ID
=
"CalendarExtender1"



runat
="server"
OnClientDateSelectionChanged
="checkDate"

TargetCont
rolID
="TextBox1"

/>





</
div
>



</
form
>

Select Date Greater than today

In the javascript, just change this line

sender._selectedDate

>

new

Date
()

Note:

You may argue that the user can still change the date by typing into the textbox or
entering an invalid date. Well that can be easily handled using a ValidationControl and is
covered in the next tip.

Tip 7: Add validation to the CalendarExtender

Control

A simple way to add validation to the Calendar is to add a ValidationControl to the textbox
associated with a CalendarExtender. You have two choices:

A.


Add an ‘Extender’ to the ValidationControl. To do so, drag and drop a ValidationControl
>

click on the smart tag of the ValidationControl > choose ‘Add Extender’. From the
Extender Wizard, choose ValidatorCalloutExtender. Using this approach makes it extremely
easy to discover and attach control extenders to your controls. In VS 2005, you had
to do
this process manually, by wiring up control extenders.

B.


You can choose not to add the Extender.

We will go ahead with option A. We will be adding two ValidationControls to the textbox.
The first, a CompareValidator to check if the user does no
t enter an invalid date (Eg: May
32) and second, a RangeValidator to keep the date range as desired.

Adding CompareValidator

<
asp
:
CompareValidator

ID
="CompareValidator1"

runat
="server"



ControlToValidate
="TextBox1"

Display
="Dynamic"

Error
Message
="
Invalid Date"



Operator
="DataTypeCheck"

Type
="Date">

</
asp
:
CompareValidator
>

<
cc1
:
ValidatorCalloutExtender

ID
="CompareValidator1_ValidatorCalloutExtender"



runat
="server"

Enabled
="True"

TargetControlID
="CompareVal
idat
or1">

</
cc1
:
ValidatorCalloutExtender
>

Adding RangeValidator



We will restrict the user to select a date range starting from today
to 15 days from now.

<
asp
:
RangeValidator

ID
="RangeValidator1"

runat
="server"



ControlToValidate
="TextB
ox1"

ErrorMessage
="RangeValidator"



Type
="Date">

</
asp
:
RangeValidator
>

<
cc1
:
ValidatorCalloutExtender

ID
="RangeValidator1_ValidatorCalloutExtender"



runat
="server"

Enabled
="True"

TargetControlID
="RangeValidator
1">

</
cc1
:
ValidatorCalloutExtender
>



In the code behind of your page, add this code

C#



protected

void

Page_Load(
object

sender,

EventArgs

e)



{



RangeValidator1.MinimumValue =
System.
DateTime
.Now.ToShortDateString();



RangeValidator1.Maxi
mumValue =
System.
DateTime
.Now.AddDays(15).ToShortDateString();



}

VB.NET



Protected

Sub

Page_Load(
ByVal

sender

As

Object
,

ByVal

e

As

EventArgs)



RangeValidator1.MinimumValue =
System.DateTime.Now.ToShortDateString()



Ran
geValidator1.MaximumValue =
System.DateTime.Now.AddDays(15).ToShortDateString()



End

Sub

Well those were some tips associated with the CalendarExtender. As future versions of the
toolkit are released, we should be hopeful that there will exist easie
r ways, of achieving the
functionality discussed in this article.

I hope this article was useful and I thank you for
viewing it.