Utilizzo di bootstrap-datepicker con angolare xediv

Question

Ho una tabella e vorrei aggiungere la modifica in linea a quella tabella. Ho iniziato con ng-grid, tuttavia, ho deciso che mentre funzionava bene, stavo passando troppo tempo a cercare di sistemare lo stile in modo che corrispondesse al tema generale del mio sito web. Sono partito da zero e ora sto usando un semplice vecchio tavolo html con angularjs dietro le quinte per la sua fantastica proprietà di associazione dei dati bidirezionale.

Tutto è andato liscio, tranne per il fatto che sono bloccato a cercare di ottenere l'editing in linea per funzionare con bootstrap-datepicker: http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter. La ragione per cui sto usando questo datepicker su ui-bootstrap datepicker che xeditable dice che dovresti usare è perché non sembra o sembra giusto nel mio sito web. Ecco come appare l'ui-bootstrap datepicker come http://jsfiddle.net/NfPcH/23/. Mi piace l'aspetto semplice e semplice del datepicker di bootstrap.

Ecco una plunker di una tabella con campi xeditable e data per cercare di modificare PLUNKER

Utilizzando bootstrap-datepicker come un campo di input funziona bene, una direttiva personalizzato viene utilizzato per aggiornare correttamente il modello:

editablegrid.directive('datepicker', function() { 
return { 
    restrict : 'A', 
    require : 'ngModel', 
    link : function(scope, element, attrs, ngModelCtrl) { 
     $(function() { 
      var dp = $(element).datepicker({ 
       format : 'MM dd, yyyy' 
      }); 

      dp.on('changeDate', function(e) { 
       ngModelCtrl.$setViewValue(e.format('MM dd, yyyy')); 
       scope.$apply(); 
      }); 
     }); 
    } 
} 

ho cambiato il codice sorgente xeditable utilizzare bootstrap-datepicker (vedi righe 78-84 di xeditable.js)

/* 
The New directive I've made for xeditable to use with the bootstrap-datepicker 
*/ 
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory', 
    function(editableDirectiveFactory) { 
    return editableDirectiveFactory({ 
     directiveName: 'editableBsdateNew', 
     inputTpl: '<input type="text" class="form-control form-control-inline input-sm" datepicker>' 
    }); 
}]); 

, howeve Il problema si trova da qualche parte con xeditable e in che modo aggiorna il modello della riga selezionata.

xeditable funziona perfettamente per la modifica di testo e menu a discesa in linea, cercando di integrare con bootstrap-datepicker si sta rivelando difficile.

Se esiste un altro modo di utilizzare la modifica in linea con bootstrap-datepicker, non sarei contrario a provarlo. Stavo pensando che se questo non ha funzionato, forse qualcosa con ng-show e ng-hide potrebbe fare il trucco.

Answer 1

1> Assicurarsi di installare due librerie - angolare xeditable - angolare-bootstrap-DatePicker

2> Crea nuova direttiva

/* L' Nuova direttiva che ho creato per xeditable da utilizzare con bootstrap-datepicker */

angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory', function(editableDirectiveFactory) { 
    return editableDirectiveFactory({ 
     directiveName: 'editableBsdateNew', 
     inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>' 
    }); } ]); 

3> In HTML mettere qualcosa di simile:

<span editable-bootstrap-datepicker="yourDateModel" onbeforesave="validateBeforeSaveDate($data)">Date ...</span> 

Answer 2

Prova questo:

dp.on('changeDate', function(e) { 
    ngModelCtrl.$setViewValue(e.format('MM dd, yyyy')); 
    scope.$apply(); 
    scope.row.dueDate = e.format('MM dd, yyyy'); //<--- new line 
});