Ryan Day

Maybe it’s that my company’s current framework is just that awful. Or maybe its just I’m not good enough to use it right… I dunno. But I do know that I’m pretty excited about adding jQuery functionality into Recess. The structure of layouts and views make it really easy to separate code and understand whats going on. Well, I tried to use the jQuery datepicker with Recess and I hit a small snag. Recess uses brackets in form inputs, and jQuery doesn’t like it. So here is what I did to get around that.

When you get form input in your view, you probably have code that looks like

 PHP (brief) | 
 copy code |
?
 
1
$form->input('fieldName');

And that translates into HTML that looks like

 PHP (brief) | 
 copy code |
?
 
1
<input type="text" name="yourModel[fieldName]" id="yourModel[fieldName]" />

This makes it easy to keep track of what inputs belong to what models. But it also makes jQuery get annoyed with the ‘[ ]‘ in the ID attribute. This, fortunately, is not hard to work around. So let’s look at whats required to make the Date inputs nice.

You Scaffolding generated code will give you date fields that look like:

Very straight forward. But we want a nice jQuery datePicker to handle our input. So first, what does this HTML look like? How do we pass the proper variables back to Recess!?

 PHP (brief) | 
 copy code |
?
 
1
<label for="mainModel[datetime]">Datetime</label>
2
<select name="mainModel[datetime][month]">
3
    <option value="1">Jan</option>
4
 
5
<select name="mainModel[datetime][day]">
6
    <option value="1" selected="selected">1</option>
7
 
8
<input class="text short" name="mainModel[datetime][year]" value="2009" />
9

I’ve stripped all of the tags out for the months and days for ease of readability. The main point here is our format for input is “modelName[fieldName][datePart]“. The problem I ran into here is that jQuery doesn’t like ‘[ ]‘ in the ID attribute! So we must escape the brackets when jQuery tries to access them. We will remember this for later. First, lets setup our view to handle the jQuery datepicker.

In your view file, change your date inputs from the standard $form->input() to look like:

 PHP (brief) | 
 copy code |
?
 
01
02
   <label for="<?php echo $form->datetime->getName(); ?>">Datetime</label>
03
<span style="font-weight: bold;">
04
   <div id="<?php echo $form->datetime->getName(); ?>"></div></span>
05
 
06
 
07
   <label for="<?php echo $form->anotherdate->getName(); ?>">AnotherDate</label>
08
<span style="font-weight: bold;">   <div id="<?php echo $form->anotherdate->getName(); ?>"></div></span>
09
 
10

This gives us the DIV tags we need for the date fields. At this point we could just call the $.datepicker on those divs, and we’d get a calendar. But we need another step to make sure Recess gets the correct date information from that calendar. More specifically we need those correctly formatted INPUT tags to be created. To do this I’ve extended a function called “enableDatePicker” in jQuery. So in the view, add the following code to the beginning of the page:

 PHP (brief) | 
 copy code |
?
 
01
<?php
02
echo Html::js('calendar.js');
03
$escapeArray = array('['=>'\\\[',']'=>'\\\]');?>
04
 
05
<script>
06
   $(document).ready(function() {
07
      $('#<?php echo strtr($form->datetime->getName(), $escapeArray); ?>').enableDatePicker();
08
      $('#<?php echo strtr($form->anotherdate->getName(), $escapeArray); ?>').enableDatePicker();
09
   });
10
</script>

First we include our “calendar.js” file, which stores our custom javascript functions. Our $escapeArray variable is to escape the ‘[ ]‘ in the ID attribute tags to let jQuery modify the fields correctly. Then we call $.enableDatePicker on the DIV tags that we want to use as calendars. At this point we can jump over to the calendar.js file to see what we do next.

 PHP (brief) | 
 copy code |
?
 
01
// public/js/calendar.js
02
 
03
$.fn.extend({enableDatePicker:function() {
04
 
05
   // First we create input fields that match the format Recess expects for Date inputs
06
   var target = $(this).attr('id');
07
   $('<input id="'+target+'[year]" name="'+target+'[year]" type="hidden">').appendTo($(this));
08
   $('<input id="'+target+'[month]" name="'+target+'[month]" type="hidden">').appendTo($(this));
09
   $('<input id="'+target+'[day]" name="'+target+'[day]" type="hidden">').appendTo($(this));
10
 
11
   // We have to escape the brackets again for jQuery to work correctly
12
   var escapedTarget = $(this).attr('id').replace('\[', '\\\[').replace('\]','\\\]');
13
 
14
   // Create the calendar, and every time a new date is selected we should update our input fields
15
   $(this).datepicker({onSelect: function(dateText, inst) {
16
      var dateArray = dateText.split(/\//);
17
      $('#'+escapedTarget+'\\\[year\\\]').attr('value', dateArray[2]);
18
      $('#'+escapedTarget+'\\\[month\\\]').attr('value', dateArray[0]);
19
      $('#'+escapedTarget+'\\\[day\\\]').attr('value', dateArray[1]);
20
   }
21
});
22

Now when we load our view, we see nice calendar inputs for our Date fields!

This is, like most Recess stuff, a pretty easy process. We have only modified two files, and have followed these brief steps:

1. Create DIV tags, instead of the default Recess $form->input() tags
2. Manually create the input tags for date fields(through .enableDatePicker)
3. Update those input tags when a new date is selected