По нажатию на иконку откройте jQuery UI Datepicker

Question

По нажатию на иконку откройте jQuery UI Datepicker

0

В режиме позвоночника у меня есть следующий код в html

<input type="text" id="fromDate" name="fromDate"/><a id="cal">
<img src="img/calendar.gif"></a>

В представлении js файла у меня есть следующий код:

define(['jquery', 'underscore', 'backbone', 'text!views/page1/page1.tpl'], function($, _, Backbone, tmpl_page1View) {

var page1View = Backbone.View.extend({
    // Setting the view template property using the Underscore template method        
    template: _.template(tmpl_page1View),
    // View constructor
    initialize: function() {
        self = this;

    },
    // View Event Handlers
    events: {
        "click #page2": "clickedPage2",
        "click #cal":"calClicked"
    },
    // Renders the view template to the UI
    render: function() {
        this.$el.html(this.template({data: this.templateData}));           
        // Maintains chainability
        return this;
    },
    clickedPage2:function(){
        window.location.href = "#page2"
    },
    calClicked:function(){
       $("#fromDate").datepicker({
          showOn: "button",
          buttonImage: "img/calendar.gif",
          buttonImageOnly: true
        });

    }

});
return page1View;
});

При щелчке события календаря, я хочу открыть datepicker, но он не работает. Можете ли вы помочь мне в этом. Спасибо.

Priya 05 май 2014, в 09:17

Источник

Теги:

javascript

jquery

jquery-ui-datepicker

backbone.js

1 ответ

Ещё вопросы

paulitto · Accepted Answer · 2014-05-05T04-49-00.000Z

Вы должны инициализировать datepicker, например, в методе render, и datepicker будет автоматически открываться при нажатии кнопки, так что вам вообще не понадобится calClicked.

var page1View = Backbone.View.extend({
// Setting the view template property using the Underscore template method        
template: _.template(tmpl_page1View),
// View constructor
initialize: function() {
    self = this;

},
// View Event Handlers
events: {
    "click #page2": "clickedPage2",
    "click #cal":"calClicked"
},
// Renders the view template to the UI
render: function() {
    this.$el.html(this.template({data: this.templateData}));  

    // init datepicker
    this.$("#fromDate").datepicker({
      showOn: "button",
      buttonImage: "img/calendar.gif",
      buttonImageOnly: true
    });


    // Maintains chainability
    return this;
},
clickedPage2:function(){
    window.location.href = "#page2"
}    

});
return page1View;
});