Question

我在http://dev.jtsage.com/jQM-DateBox2/demos/fullopt.html使用jquery移动日期框特别是我在http://dev.jtsage.com/cdn/datebox/1.1.0/jqm-datebox-1.1.0.mode.calbox.js

使用了calbox选项

我需要拦截点击一天后触发的点击事件，然后执行自定义操作（例如，更改该日期的背景颜色）。这样做的最佳方式是什么？我试图为元素$（'div.ui-datebox-griddate.ui-corner-all.ui-btn-up-d'）注册一个click事件，但这似乎没有用。

我正在使用backbonejs，coffeescript中类的相关部分看起来像（SimpleView扩展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'

上述方法不起作用，而且这可能不是我想要的最佳方式，因为它依赖于内部类名来创建click事件。

提前致谢！

Answer 1

Datebox会触发一个名为“datebox”的自定义事件（足够创造性）。单击一天时，事件将被触发三次，但更重要的是，它会向事件传递第二个参数，该事件包含有关被点击日期的详细信息。

试一试：

....
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);
    }
}
....

Answer 2

我想我找到了一种方法。而不是在＆＃34;日＆＃34; element - 在日历附加的输入日期字段上创建一个。从那里，您可以获取内容并将其用作过滤器以获取正确的日历日元素，此时您可以使用css样式执行任何操作。相关的代码片段如下......

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
     )

jquery移动日期框拦截日期选择单击

2 个答案: