0

Tenho o seguinte código em um componente:

import {Component, ElementRef, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
    selector: 'datepicker',
    templateUrl: './frontend/components/datepicker/datepicker.html',
    styleUrls: ['./frontend/components/datepicker/datepicker.css'],
    directives: [FORM_DIRECTIVES]
})

export class Datepicker {
    public date : Date;
    public callback : Function;

    constructor() {
        $('.datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            showOn: 'button',
            buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                /*
                console.log($(this).parent());
                console.log(callback + '(' + selectedDate + ');');
                //eval(callback + '(' + selectedDate + ');');
                */
                console.log(this.callback);
                //this.callback(selectedDate);
            }
        });
    }

    setCallback(fn : Function){
        this.callback = fn;
    }
}

E no componente:

import {Component, NgIf, FORM_DIRECTIVES, ElementRef} from 'angular2/angular2';
import {Datepicker} from '../datepicker/datepicker';

declare function initMaterial();

@Component({
    selector: 'modal',
    directives: [NgIf, Datepicker, FORM_DIRECTIVES],
    templateUrl: './frontend/components/modal/modal.html',
    styleUrls: ['./frontend/components/modal/modal.css'],
    bindings: [Datepicker]
})

export class Modal {
    public isOpen : boolean = false;
    private dtCompromise : Date;
    private dsCompromise : String;
    private datepicker : Datepicker;

    constructor(datepicker : Datepicker){
        this.datepicker = datepicker;
        this.datepicker.setCallback(function(selectedDate : Date){
            console.log('Date: ' + selectedDate);
        });
    }

    selectDate(date : Date) {
        console.log('Data selecionada: ' + date);
    }
}

Quando seleciono uma data no datepicker o método callback deveria ser invocado no primeiro componente. Porém quando uso o console.log para visualizar o conteúdo do método aparece undefined.

O que posso ter feito de errado?

2
  • tens trabalhado ainda com Angular2 ?
    – Rod
    31/12/2015 às 4:05
  • @Rod tenho sim.. 1/01/2016 às 12:48

1 Resposta 1

0

Após algum tempo implementei um componente datepicker. Esse está disponível aqui: https://github.com/emirdeliz/meus-projetos/tree/master/angular2-schedule/app/frontend/components/datepicker

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .