My current project, where I'm using a lot of MonoRail, I needed a simple datepicker control. For my past webforms projects, I've always used the nice Calendar Popup control from eXcentrics world. With the popularity of the prototype ajax library and scriptaculous, I wanted to try and leverage a datepicker control such as the one from Eulerian Technologies. Turned out to be very easy to wrap this into a nice reusable view component for MonoRail (which conveniently already has prototype and scriptaculous support out of the box).
So first I set up a simple page for testing out the datepicker component...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Layout</title>
<link href="${siteRoot}/content/css/datepicker.css" type="text/css" rel="stylesheet" />
${Ajax.InstallScripts()}
${Scriptaculous.InstallScripts()}
<script type="text/javascript" src="${siteRoot}/Scripts/datepicker.js"></script>
</head>
<body>
<?brail component DatePickerComponent, {'textBoxId':'team.StartDate'} ?>
</body>
</html>
Notice, the only line you need in your view to show the datepicker is...
<?brail component DatePickerComponent, {'textBoxId':'team.StartDate'} ?>
Then I just created this simple view component for MonoRail to render the necessary input box and javascript...
public class DatePickerComponent : ViewComponent
{
private string textBoxId;
private string inputBoxHtmlFormat = "<input type='text' id='{0}' name='{0}' />";
private string datePickerJavascriptFormat =
@"/*<[CDATA[*/
var dpck = new DatePicker({{
relative : '{0}',
language : 'en'
}});
/*]]>*/";
public override void Initialize()
{
base.Initialize();
textBoxId = ComponentParams["textBoxId"] as string ?? "dateBox";
}
public override void Render()
{
base.Render();
RenderText(string.Format(inputBoxHtmlFormat, textBoxId));
RenderText(AjaxHelper.ScriptBlock(string.Format(datePickerJavascriptFormat, textBoxId)));
}
}
That's it. I'm sure I'm going to be writing quite a few more of these nifty little components for MonoRail, especially considering how simple they are to create and how fast you can get them going in your MonoRail views. Ayende has some great posts on MonoRail, including ones about creating custom components in MonoRail.
There might be better ways to do this, but for now, this is all I need. And I was literally able to write it in a matter of minutes. Now I need to see if I can find an ajaxy time picker control similar to eXcentrics world's Time Picker. Anybody know of any?