问题
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!
回答1:
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);
}
}
....
回答2:
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
)
来源:https://stackoverflow.com/questions/14895573/jquery-mobile-datebox-intercepting-the-date-select-click