Custom Date of Birth User control .net

DotNetTips

Here is a nice solution for a user control for Date of Birth verification, from a user interface perspective its better than a date time popup control as its much quicker to select a day then month then year rather than moving through a popup calendar to find the correct year.

Popup calendars are great when used in the correct place for example booking of a future date like a flight or hotel booking

See live Example

Examaning the Code

This is our content for the Date of Birth control three dropdown lists and customValidator.
[sourcecode language=”vb”]
<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”controlDOB.ascx.vb” Inherits=”controlDOB” %>
<div class=”dobPicker”>
<div class=”dateDay”><asp:DropDownList ID=”ddlDay” CausesValidation=”true” runat=”server”></asp:DropDownList></div>
<div class=”dateMonth”><asp:DropDownList ID=”ddlMonth” runat=”server”></asp:DropDownList></div>
<div class=”dateYear”><asp:DropDownList ID=”ddlYear” runat=”server”></asp:DropDownList></div>
<asp:CustomValidator id=”cv1″ runat=”server” Text=”Please enter Date of Birth” EnableClientScript=”true” CssClass=”error” ValidateEmptyText=”true” ></asp:CustomValidator>
</div>
[/sourcecode]
Now in the code behind we need to bind our selectable dates to these dropdownlists
[sourcecode language=”vb”]
Partial Class controlDOB
Inherits System.Web.UI.UserControl</code>

Public theDate As String
Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
‘ If Not IsPostBack Then
ddlDay.Items.Add(“DD”)
For i As Integer = 1 To 31
ddlDay.Items.Add(i)
Next i
ddlYear.Items.Add(“YYYY”)
For j As Integer = 1920 To 2010
ddlYear.Items.Add(j)
Next j
ddlMonth.Items.Add(“-Month-“)
ddlMonth.Items.Add(“January”)
ddlMonth.Items.Add(“February”)
ddlMonth.Items.Add(“March”)
ddlMonth.Items.Add(“April”)
ddlMonth.Items.Add(“May”)
ddlMonth.Items.Add(“June”)
ddlMonth.Items.Add(“July”)
ddlMonth.Items.Add(“August”)
ddlMonth.Items.Add(“September”)
ddlMonth.Items.Add(“October”)
ddlMonth.Items.Add(“November”)
ddlMonth.Items.Add(“December”)

End Sub
End Class
[/sourcecode]
Next we need to create the client side validation for the Date of Birth check
[sourcecode language=”vb”]

Dim cstext As New StringBuilder()
‘custom client side validation for DOB checks each drop down returns flase if no value</code>

cstext.Append(“<script type=”text/javascript”>// <![CDATA[
function ShowValue” + ClientID + ” (sender, args) {“)
cstext.Append(” var dropDay = document.getElementById(‘” + ddlDay.ClientID + “‘);”)
cstext.Append(” var dropMonth = document.getElementById(‘” + ddlMonth.ClientID + “‘);”)
cstext.Append(” var dropYear = document.getElementById(‘” + ddlYear.ClientID + “‘);”)
cstext.Append(“if (dropDay.value==’DD’){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else if (dropMonth.value==’-Month-‘){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else if (dropYear.value==’YYYY’){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else {“)
cstext.Append(“args.IsValid =true;} “)
cstext.Append(“}</”) cstext.Append(“script>”)
Page.ClientScript.RegisterClientScriptBlock(GetType(String), ClientID, cstext.ToString(), False)
cv1.ClientValidationFunction = “ShowValue” & ClientID</code>
[/sourcecode]
and finally the server side validate function
[sourcecode language=”vb”]

Protected Sub cv1_ServerValidate(source As Object, args As ServerValidateEventArgs) Handles cv1.ServerValidate
If ddlDay.SelectedIndex = 0 Then
args.IsValid = False
End If
If ddlMonth.SelectedIndex = 0 Then
args.IsValid = False
End If
If ddlYear.SelectedIndex = 0 Then
args.IsValid = False
End If
End Sub
[/sourcecode]

This control can then be added to the page at design time or dynamically

Passing flash variables between flash files using jquery and fancybox

Solve The Web

How to use an embeded pass variables between flash files using the jquery pluging fancy box.

In this example we need to select a continent of the world to then load a larger flash file which is then zoomed into this area.

continent

worldselected

View example

The first part is to send your variable(s) to the containing page

[sourcecode language=”ActionScript3″]
function raiseClick(e:MouseEvent):void
{
var stClicked:String;
stClicked=e.currentTarget.name.toString()
if(ExternalInterface.available) {
ExternalInterface.call("showFancyBox", stClicked);
}
}
[/sourcecode]
The above code then passes the string stClicked to the page calling the fancyBox overlay

[sourcecode language=”js”]
<script type="text/javascript">
// showFancyBox function called by flash
function showFancyBox(my_href)
{
// instantiate fancybox
$(document).ready(function() {
$("a.flashOver").fancybox({
‘padding’ : 3,
‘overlayOpacity’ : 0.8,
‘overlayColor’ : ‘#000’,
‘width’ : 700,
‘height’ : 365,
‘content’ : ‘<div id="flashOverlay">Add Alt content for overlay.swf here.</div>’,
‘autoDimensions’ : false,
‘scrolling’ : ‘no’,
‘hideOnContentClick’: false
});
});

// trigger click
$(‘#inline’).trigger(‘click’);
alert("toast")
// embed swf on flashOverlay div
var flashvars = {
path: my_href
}
swfobject.embedSWF("worldmap.swf", "flashOverlay", "700", "365", "10", "./swf/expressInstall.swf", flashvars, params, {id:"swfOverlay"});
}

</script>
[/sourcecode]

In the called flash file you can then access the passed variable by using the flashVarData, in the example below i fiurst check if there is a value and then assign a default value if nothing was passed

[sourcecode language=”ActionScript3″]
if(flashVarData["path"] == undefined) {
flashVarData = {
path: "conEurope"
};
}
stContinent=flashVarData.path;
[/sourcecode]