CS 601 – JQuery UI Datepicker – Blocking Dates

One of the things I wanted to do is to block certain dates from being enabled in the JQuery UI Datepicker widget. There is built-in functionality for blocking weekends, but not for particular dates, e.g., Christmas. Some web searching led me to a fairly easy solution. The widget has an option for providing a function to call before a date is shown. Here is my widget constructor:

$('#datepicker').datepicker({
                inline: true,
                showOn: "both",
                buttonImage: "/cafemarburg/images/calendar.jpg",
                minDate: +1,
                maxDate: +180,
                beforeShowDay: checkClosedDates
        });

checkClosedDates is a function that returns an array of the form [true/false, a class to add, a tooltip message], the last two being optional. It takes the date (as a Javascript object) as a parameter.
Here is the function call:

var closedFullDates = new Array(); // Used for one-time closures or irregular scheduled holidays
var closedYearlyDates = new Array('12-25','7-4'); // Used to regular holidays (e.g., Christmas)
var closedDaysOfWeek = new Array('0')
function checkClosedDates(date) {
 var blocked = false;
 var ymd = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
 var md = (date.getMonth()+1) + '-' + date.getDate();
 if ($.inArray(ymd,closedFullDates) > -1) {
     blocked = true;
 } else if ($.inArray(md,closedYearlyDates) != -1) {
     blocked = true;
 } else if ($.inArray(String(date.getDay()),closedDaysOfWeek) != -1) {
     blocked = true;             
 }
 if (blocked) {
    return [false,'dpClosedDate','Sorry, we are closed that day.'];
 } else {
     return [true];
 }
}

As can be seen, I use three separate arrays. One is for one-time events or events that change date year to year. Another is for dates that occur on the same date. The third is for days of the week.

CS601 – Tablesorter

I’m a bit behind in blogging for class due to time constraints. I’m spending most of my free time working on my project. I have a bunch of ideas in the queue, but here’s one I just used tonight.

One aspect of the project requires a sortable table. Not easy to implement on my own, but I found the very nifty JQuery UI Tablesort plugin. This is pretty cool and pretty easy to implement. I’ll include some snippets from the page which shows the employees as list of all reservations.

Here is the JS code which creates the object:

<script type="text/javascript">

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: ‘restatus’,
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/made/,0).replace(/arrived/,1).replace(/seated/,2);
},
// set type, either numeric or text
type: ‘numeric’
}); $(document).ready(function()
{
$(“#restable”)
.tablesorter();
}
);
</script>

The first block is simply a function to allow me to sort the reservation status (e.g., has the party arrived, have they been seated) using an ordering index regardless of the text for the status. (E.g., I would want “Made” sorted before “Arrived”.)

The second block actually creates the applies the tablesorter object to the HTML table with the ID of restable. This table is a plain old HTML table with the addition of the class of tablesorter.

You can also download the themes from the site, put them in your CSS directory, and then include that in your header. With all that you get the following (on load):

If you click the Last Name column:

If you click the Date/Time column:

It does the date correctly automatically. (Verified as 11/30/2011 12:00 PM sorts before 11/30/2011 01:30 PM and before 01/20/2012 07:45 PM. If it was a simple text-based sort, this would not be the case as 0 comes before 1.)

It can also do multicolumn sort and a multitude of other things which I have not explored.