Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Date Picker - Year and Month Popup

Date Picker - Year and Month Popup Options
Previous Topic · Next Topic
vic
Posted: Wednesday, October 29, 2008 2:18:45 AM
Rank: Newbie
Groups: Member

Joined: 10/29/2008
Posts: 2
Hello,

We are currently using the Date Picker, and our users would like to have the Month and Year pull-down functions, as demonstrated in your "Title and Footer Template" example.

We have viewed the source code and it is successful if we have only one Date Picker on the webpage.

However, if we use the Date Picker within a Gridview, then it will have problems because of duplicate IDs.

Can you demonstrate an example of how to use multiple Date Picker (with Month and Year pull-down function) within a Gridview, with multiple rows and columns of date data?

Thanks,
Vic
Back to top
 
eo_support
Posted: Wednesday, October 29, 2008 2:32:23 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can do that by:

1. Modify the DatePicker's TitleTemplate to:

Code: HTML/ASPX 
<TitleTemplate>
    {var:visible_date:MMMM}
    <a id="{var:clientId}_month" 
        href="javascript:ShowMonthPopup('{var:clientId}', '{var:clientId}_month')">
        <img src="{img:00020012}" border="0" />
    </a>
    {var:visible_date:yyyy}
    <a id="{var:clientId}_year" 
        href="javascript:ShowYearPopup('{var:clientId}', '{var:clientId}_year')">
        <img src="{img:00020012}" border="0" />
    </a>
</TitleTemplate>


2. Modify ShowMonthPopup and ShowYearPopup to:

Code: JavaScript 
function ShowMonthPopup(calendar, refLink)
{
    g_curCalendar = calendar;
    var monthPicker = document.getElementById(refLink);
    eo_GetObject(g_curCalendar).showContextMenu(monthPicker, "mnuMonth");
}


Code: JavaScript 
function ShowYearPopup(calendar, refLink)
{
    g_curCalendar = calendar;
    var yearPicker = document.getElementById(refLink);
    eo_GetObject(g_curCalendar).showContextMenu(yearPicker, "mnuYear");
}


After that you should be able to use multiple DatePicker controls.

Thanks!
Back to top
 
vic
Posted: Thursday, October 30, 2008 3:38:32 AM
Rank: Newbie
Groups: Member

Joined: 10/29/2008
Posts: 2
Thanks for your prompt reply!

We have copied your scripts but the following problem is encountered,

Microsoft JScript runtime error: 'null' is null or not an object

at

eo_GetObject(g_curCalendar).showContextMenu(monthPicker, "mnuMonth"); << inside ShowMonthPopup

We have run the debugger and obtained the following information

?g_curCalendar
"unknown var:clientId"

?monthPicker
{...}
className: ""
id: "unknown var:clientId_month"
tagName: "A"
parentElement: {...}
style: {...}
onhelp: null
onclick: null
ondblclick: null
onkeydown: null
onkeyup: null
onkeypress: null
onmouseout: null
onmouseover: null
onmousemove: null
onmousedown: null
onmouseup: null
document: {...}
title: ""
language: ""
onselectstart: null
sourceIndex: 54
recordNumber: null
lang: ""
offsetLeft: 58
offsetTop: 2
offsetWidth: 17
offsetHeight: 16
offsetParent: {...}
innerHTML: "<IMG src=\"http://localhost/test/eo_web.ashx?id=92a520a9-71bb-41c1-87ba-5c0cfe39e23e\" border=0> "
innerText: " "
outerHTML: "<A id=\"unknown var:clientId_month\" href=\"javascript:ShowMonthPopup('unknown var:clientId', 'unknown var:clientId_month')\"><IMG src=\"http://localhost/test/eo_web.ashx?id=92a520a9-71bb-41c1-87ba-5c0cfe39e23e\" border=0> </A>"
outerText: " "
parentTextEdit: {...}
isTextEdit: false
filters: {...}
ondragstart: null
onbeforeupdate: null
onafterupdate: null
onerrorupdate: null
onrowexit: null
onrowenter: null
ondatasetchanged: null
ondataavailable: null
ondatasetcomplete: null
onfilterchange: null
children: {...}
all: {...}
scopeName: "HTML"
onlosecapture: null
onscroll: null
ondrag: null
ondragend: null
ondragenter: null
ondragover: null
ondragleave: null
ondrop: null
onbeforecut: null
oncut: null
onbeforecopy: null
oncopy: null
onbeforepaste: null
onpaste: null
currentStyle: {...}
onpropertychange: null
tabIndex: 0
accessKey: ""
onblur: null
onfocus: null
onresize: null
clientHeight: 0
clientWidth: 0
clientTop: 0
clientLeft: 0
readyState: "complete"
onreadystatechange: null
onrowsdelete: null
onrowsinserted: null
oncellchange: null
dir: ""
scrollHeight: 16
scrollWidth: 17
scrollTop: 0
scrollLeft: 0
oncontextmenu: null
canHaveChildren: true
runtimeStyle: {...}
behaviorUrns: {...}
tagUrn: ""
onbeforeeditfocus: null
readyStateValue: 4
isMultiLine: true
canHaveHTML: true
onlayoutcomplete: null
onpage: null
inflateBlock: false
onbeforedeactivate: null
contentEditable: "inherit"
isContentEditable: false
hideFocus: false
disabled: false
< More... (The first 100 of 154 items were displayed.) >

And our code is like this,

<eo:DatePicker ID="dpFirstClosingSchedule" runat="server" ControlSkinID="None" TitleFormat="MMMM, yyyy"
DayCellWidth="22" DayHeaderFormat="Short" DisabledDates="" MonthSelectorVisible="True"
PickerFormat="dd/MMM/yyyy" SelectedDates="" TitleLeftArrowDownImageUrl="00040103"
TitleLeftArrowImageUrl="00040101" TitleRightArrowDownImageUrl="00040104" TitleRightArrowImageUrl="00040102"
WeekSelectorVisible="True">
<TodayStyle CssText="background-image:url('00040106');" />
<FooterTemplate>
<div style="font-weight: bold; font-size: 11px; font-family: Tahoma&quot;">
<img src="{img:00040106}">
Today: {var:today:dd/MMM/yyyy}
</div>
</FooterTemplate>
<SelectedDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; background-image:url('00040105');color:white;" />
<DisabledDayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; COLOR: gray" />
<CalendarStyle CssText="border-bottom-color:Black;border-bottom-style:solid;border-bottom-width:1px;border-left-color:Black;border-left-style:solid;border-left-width:1px;border-right-color:Black;border-right-style:solid;border-right-width:1px;border-top-color:Black;border-top-style:solid;border-top-width:1px;padding-bottom:5px;padding-left:5px;padding-right:5px;padding-top:5px;background-color:white" />
<DayHoverStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:underline" />
<MonthStyle CssText="MARGIN: 0px 4px; cursor:hand" />
<TitleStyle CssText="PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 3px; COLOR: white; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #0054e3" />
<DayHeaderStyle CssText="FONT-SIZE: 11px; COLOR: #0054e3; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: Tahoma" />
<DayStyle CssText="FONT-SIZE: 8pt; FONT-FAMILY: Tahoma; text-decoration:none" />
<TitleTemplate>
{var:visible_date:MMMM}
<a id="{var:clientId}_month"
href="javascript:ShowMonthPopup('{var:clientId}', '{var:clientId}_month')">
<img src="{img:00020012}" border="0" />
</a>
{var:visible_date:yyyy}
<a id="{var:clientId}_year"
href="javascript:ShowYearPopup('{var:clientId}', '{var:clientId}_year')">
<img src="{img:00020012}" border="0" />
</a>
</TitleTemplate>
</eo:DatePicker>

<eo:ContextMenu runat="server" id="mnuMonth" ControlSkinID="None" Width="80px" ClientSideOnItemClick="MonthMenuClicked">
<TopGroup Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;"
OffsetX="0" OffsetY="-100">
<Items>
<eo:MenuItem Text-Html="January"></eo:MenuItem>
<eo:MenuItem Text-Html="February"></eo:MenuItem>
<eo:MenuItem Text-Html="March"></eo:MenuItem>
<eo:MenuItem Text-Html="April"></eo:MenuItem>
<eo:MenuItem Text-Html="May"></eo:MenuItem>
<eo:MenuItem Text-Html="June"></eo:MenuItem>
<eo:MenuItem Text-Html="July"></eo:MenuItem>
<eo:MenuItem Text-Html="August"></eo:MenuItem>
<eo:MenuItem Text-Html="September"></eo:MenuItem>
<eo:MenuItem Text-Html="October"></eo:MenuItem>
<eo:MenuItem Text-Html="November"></eo:MenuItem>
<eo:MenuItem Text-Html="December"></eo:MenuItem>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default"
NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;"
ShadowDepth="0" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<eo:ContextMenu runat="server" id="mnuYear" ControlSkinID="None" Width="80px" ClientSideOnItemClick="YearMenuClicked"
EnableScrolling="True" ScrollUpLookID="scroll_up" ScrollDownLookID="scroll_down">
<TopGroup Style-CssText="border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:10px;padding-right:10px;padding-top:3px;"
OffsetX="0" Height="150" OffsetY="-50">
<Items>
</Items>
</TopGroup>
<LookItems>
<eo:MenuItem HoverStyle-CssText="color:#1C7CDC;padding-left:5px;padding-right:5px;" ItemID="_Default"
NormalStyle-CssText="color:#2C0B1E;padding-left:5px;padding-right:5px;">
<SubMenu Style-CssText="background-color:White;border-bottom-color:#e0e0e0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#e0e0e0;border-left-style:solid;border-left-width:1px;border-right-color:#e0e0e0;border-right-style:solid;border-right-width:1px;border-top-color:#e0e0e0;border-top-style:solid;border-top-width:1px;color:#606060;cursor:hand;font-family:arial;font-size:12px;padding-bottom:3px;padding-left:3px;padding-right:3px;padding-top:3px;"
ShadowDepth="0" ItemSpacing="5"></SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="14" ItemID="scroll_down" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;"
Image-Url="00020001"></eo:MenuItem>
<eo:MenuItem Height="14" ItemID="scroll_up" NormalStyle-CssText="background-image:url('00020005');border-bottom-color:#E0E0E0;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#E0E0E0;border-left-style:solid;border-left-width:1px;border-right-color:#E0E0E0;border-right-style:solid;border-right-width:1px;border-top-color:#E0E0E0;border-top-style:solid;border-top-width:1px;"
Image-Url="00020000"></eo:MenuItem>
</LookItems>
</eo:ContextMenu>

Thanks!
Back to top
 
eo_support
Posted: Thursday, October 30, 2008 5:27:12 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Can you check whether you have the latest version? The code we provided uses {var:clientId}, which was only added not long ago.

Thanks
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.