jquery mobile datebox intercepting the date select

Question

I am using the jquery mobile datebox at http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html In particular I am using the calbox option at http://dev.jtsage.com/cdn/datebox/1.1.0/jqm-datebox-1.1.0.mode.calbox.js

I need to intercept the click event that is triggered when you click on a day and then do something custom (E.g. change the background color of that date). What is the best way of doing this? I tried to register a click event for the element $('div.ui-datebox-griddate.ui-corner-all.ui-btn-up-d') but that does not seem to be working.

I am using backbonejs and the relevant portion of the class in coffeescript looks something like (SimpleView extends Backbone.View):

class A extend SimpleView
  ....
  events: {    
    'click div.ui-datebox-griddate.ui-corner-all.ui-btn-up-d': "clicked"  
  }  

  clicked: (event) ->
    console.log 'clicked'

The above does not work and moreover this perhaps is not the best way to do what I want since it depends on internal class names to create the click event.

Thanks in advance!

Answer 1

I think I figured out one way to do it. Instead of creating a click on the "day" element - create one on the input date field to which the calendar is attached. From there you can get the content and use that as a filter to get to the correct calendar day element at which point you can do whatever you want using css styling. The relevant code piece is given below...

class A extend SimpleView
  ....
   events: {    
     'change #mydate': "clicked"  
   }   
   clicked: (event) ->
     t = $(event.target)
     day = t.data('datebox').theDate.getDate()
     dayFilter= "div.ui-datebox-griddate.ui-corner-all:contains('#{day}')"
     $(dayFilter).filter( ->
       thisDay = parseInt($(@).text())
       if thisDay == day
         # do your css magic here
     )

Answer 2

Datebox triggers a custom event called "datebox" (creatively enough). The event is fired three times when a day is clicked, but more importantly, it passes a second argument to the event that has the details about the day being clicked.

Give this a shot:

....
events: {
    'datebox' : 'clicked'
},

clicked: function(e, eventDetail) {
    // Of the three event triggers, "method" varies, so I checked for "set"
    if (eventDetail.method == "set") {
        var jsDateObj = eventDetail.date;
        console.log(jsDateObj);
    }
}
....