I recently needed to customize the datepicker to only allow selections on specific dates. GrailsUI and YUI make customizing the display of dates in the datepicker super easy. One of the things I love most about YUI is the rich set of examples and the rich API docs for all of the widgets. For your convenience I’m linking them in here:
Here is a short and candid example of customizing the GrailsUI Datepicker:
<%--
Created by IntelliJ IDEA.
User: danielhonig
Date: Mar 25,
< 2009
Time: 8:43:58 AM
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head><title>Simple GSP page</title>
<gui:resources components="['datePicker']"/>
</head>
<body class="yui-skin-sam">
Date:
<gui:datePicker id="bidCloseDate" minDate="3/29/2009" value="${offerInstance?.bidCloseDate}" onclick="doIt()" formatString="MM/dd/yyyy"/>
<script>
customizeCalendar = function() {
GRAILSUI.bidCloseDate.addRenderer("3/23", GRAILSUI.bidCloseDate.renderBodyCellRestricted);
GRAILSUI.bidCloseDate.addRenderer("12/25", GRAILSUI.bidCloseDate.renderBodyCellRestricted);
GRAILSUI.bidCloseDate.addRenderer("6/1/2009-6/7/2009'", GRAILSUI.bidCloseDate.renderBodyCellRestricted);
var myCustomRenderer = function(workingDate, cell) {
cell.innerHTML = "X";
YAHOO.util.Dom.addClass(cell, "sunday");
return YAHOO.widget.Calendar.STOP_RENDER;
}
GRAILSUI.bidCloseDate.addWeekdayRenderer(1, myCustomRenderer);
GRAILSUI.bidCloseDate.render();
}
YAHOO.util.Event.onDOMReady(setTimeout(customizeCalendar, 100));
</script>
</body></html>
