|
|
Rank: Advanced Member
Groups: Member
Joined: 7/18/2008
Posts: 76
|
Good Morning,
I have a question concerning date validation for the DatePicker Object. I currently have a date picker that has a minimum date set and if the user trys to pick a date from the calendar that is before the minimum date it will not allow the use to select which is what I would expect. The problem is if the user types in a date within the edit mask and types in a date that is before the minimum date selected it automatically changes the date in the edit mask to the defaulted minimum date. I would like to display an alert to the user saying that they need to pick a date greater than the minimum date and blank out the date mask so they are forced to either type in a date again or pick from the calendar drop down. I have tried to use the ClientSideonSelect and the ClientSideonBlur to handle this logic, but the datepicker defaults to the minimum date before the onBlur fires so I cannot do a valid date comparison.
Is there a way to perform this type of validation?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Unfortunately no. There is no way to perform any additional logic before the DatePicker automatically fills the textbox with minimum date. That behavior is hardcoded and there is no way to change that in the current version. Sorry about it!
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 7/18/2008
Posts: 76
|
Thank you. That would be a nice modification to have on this control to add an event before the auto populate occurs. What I did to get around this for now is to disable the text box to force them to use the calendar and gave intructions in the PickerHint. Here is how the calendar is now configured if people are interested (DisableTextBox="True")
Code: HTML/ASPX
<eo:DatePicker ID="dpSalaryDate" runat="server" ControlSkinID="None" DayCellHeight="16" DayCellWidth="22" DayHeaderFormat="Short" DisabledDates="" LastMonth="2025-12-01" MaxValidDate="2025-12-31" MinValidDate="2000-01-01" MonthColumns="2" MonthSelectorVisible="True"
SelectedDates="" ClientSideOnChange="changePayDate" TitleLeftArrowDownImageUrl="00040103" TitleLeftArrowImageUrl="00040101" TitleRightArrowDownImageUrl="00040104" TitleRightArrowImageUrl="00040102" VisibleDate="0001-01-01" WeekSelectorVisible="False"
AllowMultiSelect="False" PickerHint="Please select date -->" DisableWeekendDays="False" OtherMonthDayVisible="False" WaitMessage="Please wait, loading calendar" DisableTextBox="True">
<TodayStyle CssText="background-image:url('00040106');" />
<SelectedDayStyle CssText="FONT-SIZE: 10pt; FONT-FAMILY: Tahoma; background-image:url('00040105');color:white;" />
<DisabledDayStyle CssText="FONT-SIZE: 10pt; FONT-FAMILY: Tahoma; COLOR: gray" />
<FooterTemplate>
<div style="font-weight: bold; font-size: 11px; font-family: Tahoma"">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom: 2px; padding-right: 2px;">
<img src="Images/green.jpg" alt=""></img>
</td>
<td>
Pay Day
</td>
</tr>
<tr>
<td style="padding-bottom: 2px; padding-right: 2px;">
<img src="Images/orange.jpg" alt=""></img>
</td>
<td>
Paperwork Due Date
</td>
</tr>
<tr>
<td style="padding-bottom: 2px; padding-right: 2px;">
<img src="Images/blue.jpg" alt=""></img>
</td>
<td>
eTime Due Date
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="{img:00040106}"> Today: {var:today:MM/dd/yyyy} </img>
</td>
</tr>
</table>
</div>
</FooterTemplate>
<PickerStyle CssText="font-family:tahoma;font-size:7pt;font-weight:bold;color:blue;" />
<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" />
</eo:DatePicker>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Thanks for sharing!
|
|