select multiple dates in CalendarExtender of AJAX Control Toolkit

CalendarExtender of AJAX Control Toolkit (for now, ver 30390) has not a default feature to pick up multiple dates.  Vince Xu of MSFT gave an answer in asp.net forum. It helps me much. But, there are some issues in his sample code.

1. if clean up the TextBox1 and then add a new date, the old text of TextBox1 will show up again in the textBox1, because the HiddenField1 is not cleaned up at all.
2. The “Done” button seems not reasonal. But, without the “done” button, the opened calendar could not be hidden forever.

I fixed them by making a little change. Here is the code sample:

<ajaxToolkit:ToolkitScriptManager runat=”Server” EnablePartialRendering=”true” ID=”ScriptManager1″ />

<asp:TextBox ID=”TextBox1″ runat=”server”  ></asp:TextBox>

<ajaxToolkit:CalendarExtender ID=”calendar1″ runat=”Server” BehaviorID=”Calendar1″
TargetControlID=”TextBox1″
OnClientDateSelectionChanged=”dateselect” OnClientHidden=”calendarhidden” OnClientShown=”setInitialValue” />

<script type=”text/javascript”>
var tmpDates = “”;

function setInitialValue() {
tmpDates = $get(‘<%=TextBox1.ClientID %>’).value;
}
function dateselect(ev) {
var calendarBehavior1 = $find(“Calendar1″);
var date = calendarBehavior1._selectedDate.format(“M/dd/yyyy”);
if (tmpDates.indexOf(date) < 0) {
if (tmpDates != “”) { $get(‘<%=TextBox1.ClientID %>’).value = tmpDates + “,” + date; }
else { $get(‘<%=TextBox1.ClientID %>’).value = date; }
}
else { $get(‘<%=TextBox1.ClientID %>’).value = tmpDates; }
}
function calendarhidden(obj) {
var tbxValue = $get(‘<%=TextBox1.ClientID %>’).value;
calendarBehavior = $find(“Calendar1″);
if (tmpDates.toString() != tbxValue.toString()) {
calendarBehavior.show();
}
}

</script>