Hi,
I have managed to show only month and year using RadDatePicker.
Please help on following items:
1. I need a way to rearrange the months.
Currently months are rendered as shown in the attachment here. But I need to order months to be shown as :
Jan Jul
Feb Aug
Mar Sep
Apr Oct
May Nov
Jun Dec
I tried Orientation property of Calender but it didnt work.
2. I need to hide backward and forward buttons shown for year.
3. All three buttons showing Current Month, OK and Cancel are different, how can I adjust the height to make it all look aligned?
Please help asap.
Thanks.
I have managed to show only month and year using RadDatePicker.
<
telerik:RadDatePicker
ID
=
"radEndDatePicker"
runat
=
"server"
Skin
=
"Hay"
Width
=
"208px"
AutoPostBack
=
"true"
OnSelectedDateChanged
=
"radEndDatePicker_SelectedDateChanged"
>
<
DateInput
ID
=
"DateInput2"
DateFormat
=
"MMMM yyyy"
runat
=
"server"
Enabled
=
"true"
>
</
DateInput
>
<
Calendar
ID
=
"Calendar2"
runat
=
"server"
>
<
FastNavigationSettings
TodayButtonCaption
=
"Current Month"
OkButtonCaption
=
" OK "
/>
</
Calendar
>
<
ClientEvents
OnDateSelected
=
"OnEndDateSelected"
/>
</
telerik:RadDatePicker
>
Please help on following items:
1. I need a way to rearrange the months.
Currently months are rendered as shown in the attachment here. But I need to order months to be shown as :
Jan Jul
Feb Aug
Mar Sep
Apr Oct
May Nov
Jun Dec
I tried Orientation property of Calender but it didnt work.
2. I need to hide backward and forward buttons shown for year.
3. All three buttons showing Current Month, OK and Cancel are different, how can I adjust the height to make it all look aligned?
Please help asap.
Thanks.
7 Answers, 1 is accepted
0
A2H
Top achievements
Rank 1
answered on 12 Aug 2013, 04:32 AM
Hello,
Please use the below code to achieve your 2nd and 3rd Requirement
PS: Adjust the pixel size according to your requirement .
For some reason I am not able to reply to your second post, Hence updating this.
For Date picker control Please use the below css styles
Thanks,
A2H
Please use the below code to achieve your 2nd and 3rd Requirement
protected
void
RadMonthYearPicker1_ViewCellCreated(
object
sender, MonthYearViewCellCreatedEventArgs e)
{
RadMonthYearPicker1.MonthCellsStyle.BorderColor = System.Drawing.Color.FromArgb(255, 190, 60);
if
(e.Cell.CellType == MonthYearViewCellType.NavigationCell)
{
//To hide backward and forward buttons shown for year.
e.Cell.Style[
"display"
] =
"none"
;
}
if
(e.Cell.CellType == MonthYearViewCellType.ButtonCell)
{
//To Adjust the Height and Width of buttons
Button btnToday = (e.Cell.Controls[0]
as
Button);
btnToday.Text =
"Current Month"
;
btnToday.Style[
"width"
] =
"100px"
;
btnToday.Style[
"height"
] =
"30px"
;
Button btnOk = (e.Cell.Controls[1]
as
Button);
btnOk.Style[
"width"
] =
"50px"
;
btnOk.Style[
"height"
] =
"30px"
;
Button btnCancel = (e.Cell.Controls[2]
as
Button);
btnCancel.Style[
"width"
] =
"50px"
;
btnCancel.Style[
"height"
] =
"30px"
;
}
}
PS: Adjust the pixel size according to your requirement .
For some reason I am not able to reply to your second post, Hence updating this.
For Date picker control Please use the below css styles
<style type=
"text/css"
>
.RadCalendarMonthView_Hay #rcMView_Today
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_OK
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_Cancel
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_PrevY
{
display
:
none
;
}
.RadCalendarMonthView_Hay #rcMView_NextY
{
display
:
none
;
}
</style>
Thanks,
A2H
0
Archana
Top achievements
Rank 1
answered on 12 Aug 2013, 05:02 PM
Thanks for the reply.
However as shown in the example code below I'm using RadDatePicker and not RadMonthYearPicker. It is not available in the telerik version(2009.2.826.35) that I'm using currently.
Can you please give sample code for RadDatePicker?
However as shown in the example code below I'm using RadDatePicker and not RadMonthYearPicker. It is not available in the telerik version(2009.2.826.35) that I'm using currently.
Can you please give sample code for RadDatePicker?
0
A2H
Top achievements
Rank 1
answered on 12 Aug 2013, 06:43 PM
Hi,
I apologize for providing you wrong code
Please try the below css styles
Thanks,
A2H
I apologize for providing you wrong code
Please try the below css styles
<style type=
"text/css"
>
.RadCalendarMonthView_Hay #rcMView_Today
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_OK
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_Cancel
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_PrevY
{
display
:
none
;
}
.RadCalendarMonthView_Hay #rcMView_NextY
{
display
:
none
;
}
</style>
Thanks,
A2H
0
Archana
Top achievements
Rank 1
answered on 13 Aug 2013, 05:01 PM
Thanks for the reply.
It takes care of issues 2 and 3.
Can you please help with issue 1?
Archana
It takes care of issues 2 and 3.
Can you please help with issue 1?
Archana
0
Accepted
A2H
Top achievements
Rank 1
answered on 18 Aug 2013, 03:31 PM
Hi,
Please try the below implementation
CSS:
<style type=
"text/css"
>
.RadCalendarMonthView_Hay #rcMView_Today
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_OK
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_Cancel
{
height
:
30px
;
}
.RadCalendarMonthView_Hay #rcMView_PrevY, .RadCalendarMonthView_Hay #rcMView_NextY
{
display
:
none
;
}
.RadCalendarMonthView_Hay #rcMView_Feb,
.RadCalendarMonthView_Hay #rcMView_Apr,
.RadCalendarMonthView_Hay #rcMView_Jun
{
border-right
:
0px
solid
#959485
!important
;
}
.RadCalendarMonthView_Hay #rcMView_Jul,
.RadCalendarMonthView_Hay #rcMView_Aug,
.RadCalendarMonthView_Hay #rcMView_Sep,
.RadCalendarMonthView_Hay #rcMView_Oct,
.RadCalendarMonthView_Hay #rcMView_Nov,
.RadCalendarMonthView_Hay #rcMView_Dec
{
border-right
:
1px
solid
#959485
!important
;
}
</style>
Javascript:
<telerik:RadScriptBlock ID=
"RadScriptBlock1"
runat=
"server"
>
<script type=
"text/javascript"
language=
"javascript"
>
function
setCalendarTable(sender, eventArgs) {
var
picker = $find(
"<%= radEndDatePicker.ClientID %>"
);
var
calendar = picker.get_calendar();
var
fastNavigation = calendar._getFastNavigation();
//Changing the Month Display Order
fastNavigation.MonthNames[0] =
"Jan"
;
fastNavigation.MonthNames[1] =
"Jul"
;
fastNavigation.MonthNames[2] =
"Feb"
;
fastNavigation.MonthNames[3] =
"Aug"
;
fastNavigation.MonthNames[4] =
"Mar"
;
fastNavigation.MonthNames[5] =
"Sep"
;
fastNavigation.MonthNames[6] =
"Apr"
;
fastNavigation.MonthNames[7] =
"Oct"
;
fastNavigation.MonthNames[8] =
"May"
;
fastNavigation.MonthNames[9] =
"Nov"
;
fastNavigation.MonthNames[10] =
"Jun"
;
fastNavigation.MonthNames[11] =
"Dec"
;
$clearHandlers(picker.get_popupButton());
picker.get_popupButton().href =
"javascript:void(0);"
;
$addHandler(picker.get_popupButton(),
"click"
,
function
() {
var
textbox = picker.get_textBox();
//adjust where to show the popup table
var
x, y;
var
adjustElement = textbox;
if
(textbox.style.display ==
"none"
)
adjustElement = picker.get_popupImage();
var
pos = picker.getElementPosition(adjustElement);
x = pos.x;
y = pos.y + adjustElement.offsetHeight;
var
e = {
clientX: x,
clientY: y - document.documentElement.scrollTop
};
var
date = picker.get_selectedDate();
if
(date) {
var
changedMonthNo = date.getChangedMonthNo();
var
changeddate =
new
Date(date.getFullYear(), changedMonthNo, 1);
calendar.get_focusedDate()[0] = changeddate.getFullYear();
calendar.get_focusedDate()[1] = changeddate.getMonth() + 1;
}
$get(calendar._titleID).onclick(e);
return
false
;
});
fastNavigation.OnOK =
function
() {
debugger;
var
number = getSelectedMonthNumber(fastNavigation.SelectedMonthCell.innerText);
var
date =
new
Date(fastNavigation.Year, number, 1);
picker.get_dateInput().set_selectedDate(date);
fastNavigation.Popup.Hide();
}
fastNavigation.OnToday =
function
() {
var
date =
new
Date();
picker.get_dateInput().set_selectedDate(date);
fastNavigation.Popup.Hide();
}
}
//Adding new function Prototypes
Date.prototype.getChangedMonthNo =
function
() {
return
this
.changedmonthNo[
this
.getMonth()];
};
Date.prototype.changedmonthNo = [
0, 2, 4,
6, 8, 10,
1,3, 5,
7, 9, 11
];
function
getSelectedMonthNumber(selectedMonthName) {
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Jan"
) {
MonthValue = 0;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Feb"
) {
MonthValue = 1;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Mar"
) {
MonthValue = 2;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Apr"
) {
MonthValue = 3;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"May"
) {
MonthValue = 4;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Jun"
) {
MonthValue = 5;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Jul"
) {
MonthValue = 6;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Aug"
) {
MonthValue = 7;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Sep"
) {
MonthValue = 8;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Oct"
) {
MonthValue = 9;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Nov"
) {
MonthValue = 10;
}
else
if
(selectedMonthName.replace(/^\s+|\s+$/g,
''
) ==
"Dec"
) {
MonthValue = 11;
}
return
MonthValue;
}
</script>
</telerik:RadScriptBlock>
<
table
>
<
tr
>
<
td
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
script
type
=
"text/javascript"
language
=
"javascript"
>
// Ensure to call this function after the declaration of Script Manager
Sys.Application.add_load(setCalendarTable);
</
script
>
<
telerik:RadDatePicker
ID
=
"radEndDatePicker"
runat
=
"server"
Skin
=
"Hay"
Width
=
"208px"
AutoPostBack
=
"true"
>
<
DateInput
ID
=
"DateInput1"
DateFormat
=
"MMMM yyyy"
Width
=
"208px"
runat
=
"server"
Enabled
=
"true"
>
</
DateInput
>
<
Calendar
ID
=
"Calendar2"
runat
=
"server"
>
<
FastNavigationSettings
TodayButtonCaption
=
"Current Month"
OkButtonCaption
=
" OK "
/>
</
Calendar
>
</
telerik:RadDatePicker
>
</
td
>
</
tr
>
</
table
>
Thanks,
A2H
0
Chris
Top achievements
Rank 1
answered on 24 Jan 2015, 04:37 AM
I realize this is an old post, but I am attempting to do the same thing but cannot get the RadDatePicker to only show Month and Year as you have in the image. Any help would be greatly appreciated.
0
Hello Chris,
In order to achieve the required functionality you can simply use RadMonthYearPicker for your application.
Regards,
Maria Ilieva
Telerik
In order to achieve the required functionality you can simply use RadMonthYearPicker for your application.
Regards,
Maria Ilieva
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.