Welcome Guest Search | Active Topics | Sign In | Register

eo:DatePicker Options
PRO POTSDAM GmbH
Posted: Thursday, October 12, 2023 7:02:02 AM
Rank: Advanced Member
Groups: Member

Joined: 6/17/2010
Posts: 35
I would like to disable a datepicker via javascript.

Disable the picker (input) works.
Disable the button (popupimg) doesn't work.



UserControl aufgabe42.ascx/*.asx.cs


<%@ Control Language="C#" CodeFile="aufgabe42.ascx.cs" AutoEventWireup="true" Inherits="aufgabe42" %>
<%@ Register TagPrefix="eo" Assembly="EO.Web" Namespace="EO.Web" %>

...

<div id="DivPicker1" style="position:absolute;left:185px;top:75px;text-align:left">
<eo:DatePicker ID="DatePicker1" PickerFormat="dd.MM.yyyy" ClientSideOnSelect="picker1Changed" runat="server"
DayCellWidth="20" DayHeaderFormat="FirstLetter" DisabledDates="" OtherMonthDayVisible="True"
SelectedDates="" TitleLeftArrowImageUrl="DefaultSubMenuIconRTL" ControlSkinID="None" DayCellHeight="16"
TitleRightArrowImageUrl="DefaultSubMenuIcon" VisibleDate="2008-08-01" EnableOtherMonthDays="True" MonthSelectorVisible="True" >
<TodayStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; border-right: #bb5503 1px solid; border-top: #bb5503 1px solid; border-left: #bb5503 1px solid; border-bottom: #bb5503 1px solid" />
<SelectedDayStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; background-color: #9ebef5; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DisabledDayStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<PickerStyle CssText="font-family:tahoma; font-size: Small; padding-left:5px; padding-right: 5px; width:70px" />
<CalendarStyle CssText="background-color: white; border-right: #7f9db9 1px solid; padding-right: 4px; border-top: #7f9db9 1px solid; padding-left: 4px; font-family: Tahoma,Verdana,Arial; font-size: Small; padding-bottom: 4px; border-left: #7f9db9 1px solid; padding-top: 4px; border-bottom: #7f9db9 1px solid;" />
<TitleArrowStyle CssText="cursor:hand" />
<DayHoverStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; background-color: #E0EAFF; border-right: #9ebef5 1px solid; border-top: #9ebef5 1px solid; border-left: #9ebef5 1px solid; border-bottom: #9ebef5 1px solid" />
<MonthStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; margin-left: 14px; cursor: hand; margin-right: 14px" />
<TitleStyle CssText="background-color:#9ebef5;font-family:Tahoma;font-size:12px;padding-bottom:2px;padding-left:6px;padding-right:6px;padding-top:2px;" />
<OtherMonthDayStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; color: gray; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
<DayHeaderStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: 12px; border-bottom: #aca899 1px solid" />
<DayStyle CssText="font-family: Tahoma,Verdana,Arial; font-size: Small; border-right: white 1px solid; border-top: white 1px solid; border-left: white 1px solid; border-bottom: white 1px solid" />
</eo:DatePicker>
</div>

...

<script type="text/javascript" language="javascript">

function _tagAscx(_control) {
return document.getElementById(_control);
}

var _TabPanel = 'TabContainer1_TabPanel3_Aufgabe_';

var picker11 = _tagAscx('_eo_' + _TabPanel + 'DatePicker1' + '_picker');
var picker12 = _tagAscx('_eo_' + _TabPanel + 'DatePicker1' + '_popupimg');


UserControl aufgabe42.ascx/*.asx.cs







Information via Dev-Tools Chrome:

Calendar-Field

<input style="font-family: tahoma; font-size: small; padding-left: 5px; padding-right: 5px; width: 70px; margin: 0px; border: 1px solid darkgray;" type="text" id="_eo_TabContainer1_TabPanel3_Aufgabe_DatePicker1_picker" name="_eo_TabContainer1_TabPanel3_Aufgabe_DatePicker1_picker" value="12.10.2023" size="12">

Button with Calendar

<img id="_eo_TabContainer1_TabPanel3_Aufgabe_DatePicker1_popupimg" alt="" title="" src="/tcp/WebResource.axd?d=795KedQiKBqpOqQLyg_OjuJMTz35He2aiSfLnpg0cvjLsjxwi-8jcVbLsHJbXO7N-e0b2F-BRJkkUU9NrWpUI5mNC74LHEOkftefYIBtmkZonfHrLKhWeObZzfkcvY-A0&amp;t=638173658940000000">


Information via Dev-Tools Chrome:




Access to control via JavaScript partially fails:

picker11.disabled=true; // <- work !!
picker12.disabled=true; // <- doesn't work !!
Code: HTML/ASPX
eo_support
Posted: Thursday, October 12, 2023 10:49:35 AM
Rank: Administration
Groups: Administration

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

If you want to disable it through HTML, you can add Enabled="false" on your eo::DatePicker element. For example:

Code: HTML/ASPX
<eo:DatePicker ID="DatePicker1" Enabled="false" ...>
    ....
</eo:DatePicker>


You can also do it through JavaScript like this:

Code: JavaScript
eo_GetObject("DatePicker1").setDisabled(true);


Please feel free to let us know if you still have any more questions.

Thanks!
PRO POTSDAM GmbH
Posted: Thursday, October 12, 2023 11:03:14 AM
Rank: Advanced Member
Groups: Member

Joined: 6/17/2010
Posts: 35
That worked.
Thanks!


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.