|
|
Rank: Advanced Member
Groups: Member
Joined: 8/21/2008
Posts: 37
|
Hi, We are using the year menu in the date picker control which ranges from 1950 - 2014. When the user wants to select the year for ex: 2004, they have to scroll down as it will take some time. Is there a way to make the current year as selected by default? Also Instead of adding the year in <eo:MenuItem, could you please tell me how to get the year dynamically? Please find my datepicker code given below. Thanks in advance. Regards, Raghav
Code: HTML/ASPX
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<%@ Control AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="DatePicker" Language="C#" %>
<script type="text/javascript">
var g_curCalendar = null;
function ShowMonthPopup(id)
{
g_curCalendar = eo_GetObject(id);
var menuId = id + "_mnuMonth";
var ref = document.getElementById(id);
g_curCalendar.showContextMenu(ref, menuId);
}
function MonthMenuClicked(e, info)
{
var month = info.getItem().getIndex();
var calendar = g_curCalendar;
//Get the current month
var curMonth = calendar.getVisibleDate();
//Change the month
curMonth.setMonth(month);
//Set the new current month
calendar.goTo(curMonth);
}
function ShowYearPopup(id)
{
g_curCalendar = eo_GetObject(id);
var menuId = id + "_mnuYear";
var ref = document.getElementById(id);
g_curCalendar.showContextMenu(ref, menuId);
}
function YearMenuClicked(e, info)
{
var year = info.getItem().getIndex();
var calendar = g_curCalendar;
//Get the current month
var curMonth = calendar.getVisibleDate();
//Set the new year
curMonth.setFullYear(year + 1950);
//Set the new current month
calendar.goTo(curMonth);
}
function ValidateDates(clientID)
{
//Clear the message first
var errorDiv = document.getElementById("errordiv");
errorDiv.innerHTML = "";
//Get the date
var date = eo_GetObject(clientID).getSelectedDate();
//Check if date is provided
if ((date == null))
{
errorDiv.innerHTML = "Please select date";
errordiv.className = "validator_text";
return false;
}
}
function ValidateWithCurrentDate(sender, args)
{
var ctrltova = sender.getAttribute('ControlToValidate');
var givenDate = eo_GetObject(ctrltova).getSelectedDate();
var operator = parseInt(sender.getAttribute('operatorID'), 10);
var currentDateString = sender.getAttribute('CurrentDate');
var Day = currentDateString.split('/')[0];
var Month = currentDateString.split('/')[1];
var Year = currentDateString.split('/')[2];
var iDay = eval(Day);
var iMonth = eval(Month);
var iYear = eval(Year);
var currentDate = new Date(iYear, iMonth - 1, iDay);
switch(operator)
{
case 1:
args.IsValid = givenDate == currentDate;
break;
case 2:
args.IsValid = givenDate != currentDate;
break;
case 3:
args.IsValid = givenDate > currentDate;
break;
case 4:
args.IsValid = givenDate >= currentDate;
break;
case 5:
args.IsValid = givenDate < currentDate;
break;
case 6:
args.IsValid = givenDate <= currentDate;
break;
}
}
eo:DatePicker ID="DatePicker1" runat="server" DayCellHeight="15" DayCellWidth="31" DayHeaderFormat="FirstLetter" GridLineColor="207, 217, 227"
GridLineFrameVisible="False" GridLineVisible="True" PickerFormat="dd/MM/yyyy" TitleFormat="MMM yyyy" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL"
TitleRightArrowImageUrl="DefaultSubMenuIcon" TitleTemplateScope="TextOnly" Width="100px">
<TitleTemplate>
{var:visible_date:MMMM} <a id="month_picker2" href="javascript:ShowMonthPopup({var:this}.getId());">
<img border="0" src="{img:00020012}" /></a> {var:visible_date:yyyy} <a id="year_picker2" href="javascript:ShowYearPopup({var:this}.getId());">
<img border="0" src="{img:00020012}" /></a>
</TitleTemplate>
<SelectedDayStyle CssText="background-color:White;border-bottom-color:Black;bor der-bottom-style:solid;border-bottom-width:1px;border-left-co lor:Black;border-left-style:solid;border-left-width:1px;borde r-right-color:Black;border-right-style:solid;border-right-wid th:1px;border-top-color:Black;border-top-style:solid;border-t op-width:1px;" />
<DisabledDayStyle CssText="border-bottom-color:#CFD9C0;border-bottom-style:soli d;border-bottom-width:1px;border-left-color:#CFD9C0;border-le ft-style:solid;border-left-width:1px;border-right-color:#CFD9 C0;border-right-style:solid;border-right-width:1px;border-top -color:#CFD9C0;border-top-style:solid;border-top-width:1px;co lor:gray;" />
<CalendarStyle CssText="border-right: #555566 1px solid; border-top: #555566 1px solid; border-left: #555566 1px solid; border-bottom: #555566 1px solid; background-color: #ebe9ed" />
<DayHoverStyle CssText="border-right: #bbbbbb 1px solid; border-top: #bbbbbb 1px solid; border-left: #bbbbbb 1px solid; border-bottom: #bbbbbb 1px solid; background-color: #ddeeff" />
<MonthStyle CssText="font-size: 8pt; cursor: hand; font-family: verdana; background-color: #cfd9c0" />
<DayStyle CssText="border-bottom-color:#CFD9C0;border-bottom-style:soli d;border-bottom-width:1px;border-left-color:#CFD9C0;border-le ft-style:solid;border-left-width:1px;border-right-color:#CFD9 C0;border-right-style:solid;border-right-width:1px;border-top -color:#CFD9C0;border-top-style:solid;border-top-width:1px;" />
<DayHeaderStyle CssText="font-weight: bold; font-size: 11px; color: black; border-bottom: #555566 1px solid; font-family: verdana; background-color: #ae9c86" />
<PickerStyle CssText="background-color:pink" />
<TodayStyle CssText="background-image:url('00040401');color:#1176db;" />
<DayHeaderStyle CssText="border-bottom: #f5f5f5 1px solid" />
</eo:DatePicker>
<eo:ContextMenu ID="DatePicker1_mnuMonth" runat="server" ClientSideOnItemClick="MonthMenuClicked" ControlSkinID="None" Width="80px">
<TopGroup OffsetX="0" OffsetY="-100" 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;">
<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 ItemSpacing="5" ShadowDepth="0" 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;">
</SubMenu>
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<eo:ContextMenu ID="DatePicker1_mnuYear" runat="server" ClientSideOnItemClick="YearMenuClicked" ControlSkinID="None" EnableScrolling="True"
ScrollDownLookID="scroll_down" ScrollUpLookID="scroll_up" Width="80px">
<TopGroup Height="150" OffsetX="0" OffsetY="-50" 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;">
<Items>
<eo:MenuItem Text-Html="1950">
</eo:MenuItem>
<eo:MenuItem Text-Html="1951">
</eo:MenuItem>
<eo:MenuItem Text-Html="1952">
</eo:MenuItem>
<eo:MenuItem Text-Html="1953">
</eo:MenuItem>
<eo:MenuItem Text-Html="1954">
</eo:MenuItem>
<eo:MenuItem Text-Html="1955">
</eo:MenuItem>
<eo:MenuItem Text-Html="1956">
</eo:MenuItem>
<eo:MenuItem Text-Html="1957">
</eo:MenuItem>
<eo:MenuItem Text-Html="1958">
</eo:MenuItem>
<eo:MenuItem Text-Html="1959">
</eo:MenuItem>
<eo:MenuItem Text-Html="1960">
</eo:MenuItem>
<eo:MenuItem Text-Html="1961">
</eo:MenuItem>
<eo:MenuItem Text-Html="1962">
</eo:MenuItem>
<eo:MenuItem Text-Html="1963">
</eo:MenuItem>
<eo:MenuItem Text-Html="1964">
</eo:MenuItem>
<eo:MenuItem Text-Html="1965">
</eo:MenuItem>
<eo:MenuItem Text-Html="1966">
</eo:MenuItem>
<eo:MenuItem Text-Html="1967">
</eo:MenuItem>
<eo:MenuItem Text-Html="1968">
</eo:MenuItem>
<eo:MenuItem Text-Html="1969">
</eo:MenuItem>
<eo:MenuItem Text-Html="1970">
</eo:MenuItem>
<eo:MenuItem Text-Html="1971">
</eo:MenuItem>
<eo:MenuItem Text-Html="1972">
</eo:MenuItem>
<eo:MenuItem Text-Html="1973">
</eo:MenuItem>
<eo:MenuItem Text-Html="1974">
</eo:MenuItem>
<eo:MenuItem Text-Html="1975">
</eo:MenuItem>
<eo:MenuItem Text-Html="1976">
</eo:MenuItem>
<eo:MenuItem Text-Html="1977">
</eo:MenuItem>
<eo:MenuItem Text-Html="1978">
</eo:MenuItem>
<eo:MenuItem Text-Html="1979">
</eo:MenuItem>
<eo:MenuItem Text-Html="1980">
</eo:MenuItem>
<eo:MenuItem Text-Html="1981">
</eo:MenuItem>
<eo:MenuItem Text-Html="1982">
</eo:MenuItem>
<eo:MenuItem Text-Html="1983">
</eo:MenuItem>
<eo:MenuItem Text-Html="1984">
</eo:MenuItem>
<eo:MenuItem Text-Html="1985">
</eo:MenuItem>
<eo:MenuItem Text-Html="1986">
</eo:MenuItem>
<eo:MenuItem Text-Html="1987">
</eo:MenuItem>
<eo:MenuItem Text-Html="1988">
</eo:MenuItem>
<eo:MenuItem Text-Html="1989">
</eo:MenuItem>
<eo:MenuItem Text-Html="1990">
</eo:MenuItem>
<eo:MenuItem Text-Html="1991">
</eo:MenuItem>
<eo:MenuItem Text-Html="1992">
</eo:MenuItem>
<eo:MenuItem Text-Html="1993">
</eo:MenuItem>
<eo:MenuItem Text-Html="1994">
</eo:MenuItem>
<eo:MenuItem Text-Html="1995">
</eo:MenuItem>
<eo:MenuItem Text-Html="1996">
</eo:MenuItem>
<eo:MenuItem Text-Html="1997">
</eo:MenuItem>
<eo:MenuItem Text-Html="1998">
</eo:MenuItem>
<eo:MenuItem Text-Html="1999">
</eo:MenuItem>
<eo:MenuItem Text-Html="2000">
</eo:MenuItem>
<eo:MenuItem Text-Html="2001">
</eo:MenuItem>
<eo:MenuItem Text-Html="2002">
</eo:MenuItem>
<eo:MenuItem Text-Html="2003">
</eo:MenuItem>
<eo:MenuItem Text-Html="2004">
</eo:MenuItem>
<eo:MenuItem Text-Html="2005">
</eo:MenuItem>
<eo:MenuItem Text-Html="2006">
</eo:MenuItem>
<eo:MenuItem Text-Html="2007">
</eo:MenuItem>
<eo:MenuItem Text-Html="2008">
</eo:MenuItem>
<eo:MenuItem Selected="true" Text-Html="2009">
</eo:MenuItem>
<eo:MenuItem Text-Html="2010">
</eo:MenuItem>
<eo:MenuItem Text-Html="2011">
</eo:MenuItem>
<eo:MenuItem Text-Html="2012">
</eo:MenuItem>
<eo:MenuItem Text-Html="2013">
</eo:MenuItem>
<eo:MenuItem Text-Html="2014">
</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 ItemSpacing="5" ShadowDepth="0" 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;">
</SubMenu>
</eo:MenuItem>
<eo:MenuItem Height="14" Image-Url="00020001" 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;">
</eo:MenuItem>
<eo:MenuItem Height="14" Image-Url="00020000" 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;">
</eo:MenuItem>
</LookItems>
</eo:ContextMenu>
<input id="hdnMessage" runat="server" type="text" visible="false" />
<asp:RequiredFieldValidator ID="rfvDatePicker" runat="server" CssClass="validator_text" Display="Dynamic" ForeColor=""></asp:RequiredFieldValidator>
<%--<asp:CustomValidator ID="cvDatePickerWithCurrentDate" runat="server" ClientValidationFunction="ValidateWithCurrentDate" ControlToValidate="DatePicker1"
CssClass="validator_text" Display="dynamic" Enabled="false" ForeColor=""> </asp:CustomValidator>
--%><input id="hdnCalendarDate" runat="server" type="hidden" />
<asp:RangeValidator ID="rngValDatePicker" runat="server" ControlToValidate="DatePicker1"
CssClass="validator_text" ForeColor="" Enabled="false" Visible="false" ErrorMessage="Invalid Date" Type="date"></asp:RangeValidator>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, I do not believe there is any way to automatically scroll the menu to a certain position. The easiest approach for you would be using sub menus. You can have sub menus like 1950 - 1959, 1969 - 1969, etc. That way you will only have a small number of menu items on one level. I do not know exactly what you mean by "get the year dynamically". Do you mean creating the menu item dynamically? You can do that using a loop on the server side and create the menu items. See this sample for more details about how to dynamically modify a menu: http://demo.essentialobjects.com/Default.aspx?path=Menu\menu_programming\_i1\_i0Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 8/21/2008
Posts: 37
|
Hi,
I din't mean to scroll the menu automatically. But the current year should be shown as selected by default in the year menu. I tried using <eo:MenuItem Selected="true" Text-Html="2009"></eo:MenuItem>. This is not working.
Thanks,
Raghav
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Selected="true" will work. However marking the item as Selected does not mean it visually looks different unless you specify SelectedStyle. Please see this topic for more details on menu item style: http://doc.essentialobjects.com/library/1/menucommon/styleandappearance/menu_item_styles.aspxThanks!
|
|