As I extend an ASP.Net application with MVC functionality, I also need to replace some of the components that the AjaxControlToolkit provides. Case in point, the CalendarExtender.
The CE is declared in markup like this:
<ajax:CalendarExtender id=”ce” runat=”server” TargetControlID=”edDate” Format=”dd.MM.yyyy”>
edDate being the ASP.Net TextBox control containing the selected date.
The simplest replacement is, of course, the Datepicker widget found in the jQuery UI library.
Integration the Datepicker is a bit more effort as compared to the other controls in this series, but not much.
First we need to reference the required .js and .css files of jQuery and jQuery UI:
<script type="text/javascript" src="@Url.Content("~/script/jquery-1.8.3.js")"></script>
<script type="text/javascript" src="@Url.Content("~/script/jquery-ui-1.9.2.custom.min.js")"></script>
<link href="@Url.Content("~/css/jquery-ui-1.9.2.custom.css")" rel="stylesheet" type="text/css" />
Depending on the options you used for the CalendarExtender, the initialization for the Datepicker may look like this:
$("#edDate").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
$("#edDate").datepicker("option", "dateFormat", "dd.mm.yy");
$("#edDate").datepicker("option", $.datepicker.regional["de"]);
For more options, see the sample page and press View Source, or browse the documentation.
Note that while the CE requires “yyyy” for 4-digit years, the Datepicker interprets “yy” as 4-digit years, and will insert the year twice if you use “yyyy”.
I’m not sure whether the localization files are part of the default jQuery UI downloads – if not, you can find the localized strings for Datepicker in the GitHub repository.
Lastly, the CE provides a “Today” button which sets the current date and closes the calendar, whereas Datepicker just navigates to the current date in the calendar control, but does not select it.
To change the Datepicker behavior, I use the code found in an answers on SO:
$.datepicker._gotoToday = function (id) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
};
See also here for further discussion.
Finally, if the jQuery UI skins do not fit in the design of your application, open the developer tools of your browser (F12) and find out which jQuery UI CSS classes define the look of the Datepicker control. In my case, I added a bit of CSS to adjust the control:
.ui-datepicker table.ui-datepicker-calendar {
font-size: 11px;
}
.ui-datepicker table.ui-datepicker-calendar td
{
width: 17px;
}
.ui-datepicker table.ui-datepicker-calendar td a
{
padding: 0px;
}
.ui-datepicker .ui-datepicker-title select {
font-size: 0.9em;
margin: 1px 0;
}
.ui-widget button {
font-size: 0.8em;
}
Note that the overriding style definition selectors must be more specific than the original jQuery UI declarations.
Aaaand we are done! 😉
devioblog 