Custom Auto-Complete for DevExpress ASPxDateEdit Date Picker

DevExpress’ date picker control ASPxDateEdit already performs some kind of input magic, such as expanding “3.2” into the full “03.02.2011” date value (German date format), and even accepting date separator characters such as “,” or “-“.

My task was to add functionality to interpret a single number in the edit field as day of current month and set the date picker’s value accordingly.

The ClientSideEvents property of ASPxDateEdit allows you to add JavaScript code to certain events, which in our case is the ParseDate event:

<dx:ASPxDateEdit ID="myDateEdit" runat="server">
    <ClientSideEvents ParseDate="my_parsedate" />

The ParseDate event handler receives the object raising the event and the event argument .value, and can set the event parameters .date and .handled when returning.

First, we need to check whether the input string is an integer. If it is, we replace the day of the current date with the parsed integer value, and assign the return parameters:

function my_parsedate(obj, e) {

  if (/^\d+$/.test(e.value)) {
    var d = new Date();

    d.setDate(parseInt(e.value)); = d;
    e.handled = true;

  return true;

The event handler my_parsedate() can be added either directly in the aspx/ascx markup, or in code-behind C# using RegisterClientScriptBlock():

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "clientparsedate",
function my_parsedate(obj, e) { 
}", true);

Script registration will generate the script only once per response.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: