Multiple Date Selector

I am currently working on a project using ApEx that requires the user to have the ability to select multiple dates. So I came up with this pretty cool modified monthly calendar to accomplish that task. And I thought I’d share it with everyone else.

First create a new page. On that page create a calendar based on the following query.

For the Calendar Attributes, the date column will be based on sysdate, and the display column will be based on dummy. This is just for sample purposes. In a real implementation, you would want to based this on a table with some meaningful dates.

Next we need a MultiSelect list box to store all the selections. Create a new region in the second column of the page and then create a MultiSelect Item in that region. I based my LOV on another query that returns no rows since this is just a demo with no initial date to populate. The query I used was

select dummy a, dummy b from dual where 1=0

I called my element P2_DATES and set the height to 25. When you are done, your page will look something like this…

null

.

Ok, now for the magic. We want to be able to select a day, have it populate the list on the right and also give a visual indication that we have selected it. We will need to slightly modify the calendar template so we can locate each individual calendar cell. ( Or if you want to, copy the existing template and then use and modify that. Just remember, if you do do that, you need to set the calendar on the page to use the new copied template. ) From the ApEx development you will see a list of all the templates being used on the page

null

Click on the calendar template and then select the monthly template. We need a way for the javascript that we will write to locate the specific <TD></TD> that is the individual date we click on. We will give each date cell a unique ID.

In the Weekday format section, modify the Day Open Format to include the following ID attribute:

<td class=”t13Day” valign=”top” id=”CELL#YYYY##MM##DD#”>

And add the same ID attribute to both the Today Open Format:

<td valign=”top” class=”t13Today” id=”CELL#YYYY##MM##DD#”>

and the Weekend Open Format.

<td valign=”top” class=”t13WeekendDay” id=”CELL#YYYY##MM##DD#”>

Note: I am using the default template #13. If you chose a different default template, then your class attribute will be different. The important thing is that you add the correct ID attribute to the <TD> tag.

Now all that is left is to add the javascript that does the real magic. Go back edit the page and in the page section, add the following javascript to the Header Text

<script>
var selectedColor = '#CC3333';

function addToSelectList( pList, pDisplay, pValue )
{
  var s = document.getElementById( pList );
  s.length++;
  s.options[s.length-1].text = pDisplay;
  s.options[s.length-1].value = pValue;
}

function removeFromSelectList( pList, pValue )
{
  var s = document.getElementById( pList );
  for ( i=0; i<s.length; i++ )
  {
    if ( s.options&#91;i&#93;.value == pValue )
    {
      s.remove(i);
      return;
    }
  }
}

function toggleEvent( pCell, pList, pDisplay, pValue )
{
  var cell = document.getElementById( pCell );
  if ( cell.style.backgroundColor == "" )
  {
    addToSelectList( pList, pDisplay, pValue );
    cell.style.backgroundColor = selectedColor;
  }
  else
  {
    removeFromSelectList( pList, pValue );
    cell.style.backgroundColor = null;
  }
}

</script>

 

Last step. We need a way to trigger the toggleEvent function. We will attach that to the calendar dates. For that, you will need to edit the Calendar Attributes and define the Day Link like this:

Click to get the full size image.

You are passing 4 parameters to the toggleEvent function. The first is the ID that we set up in the template, the second is the ApEx name of the multiselect list, the third is the display value in the list and the forth is the actual value that will be submitted from the list.

Now we are ready to test. Run the page and select any day

Now as you select the days, they turn red and the date is populated in the multiselect list. Select it again and it will toggle off.

I have set up a quick working demo here ( http://apex.oracle.com/pls/otn/f?p=19903:2 )

There is still much work to be done to make this a functional page. The submit processess need to be written to take the the dates from the select list and do something with them. You may also want to modify the query that the calendar is based on and prepopulate the calendar selected dates. But I will leave those exercises to the reader at home. (Boy did I hate it when my college professors said that in class.) I have actually done all of that but its a bit more than I wanted to blog about in my first post ( well second, my iPhone post was my first ). But if people are interested in enhancing this and have questions, just ask. And if enough people are interested, I will do a part 2.

Well I hope you found this useful. Check back as I will be adding more cool tips and tricks like this in the future.