Używanie bootstrap-datepicker z kątowym xeditable - angularjs, angularjs-directive, x-editable, bootstrap-datepicker, angularjs-ng-model

Mam tabelę i chciałbym dodać ją w liniiedycja do tej tabeli. Zacząłem od ng-grid, jednak zdecydowałem, że choć działa dobrze, spędzam zbyt wiele czasu próbując naprawić stylizację, tak aby pasowała do ogólnego tematu mojej strony. Zacząłem od świeżości i teraz używam zwykłej starej tabeli html z angularjs za kulisami dla jej niesamowitej właściwości wiązania dwukierunkowych danych.

Wszystko przebiega gładko, z wyjątkiem faktu, że próbuję uzyskać edycję inline do pracy z bootstrap-datepicker: http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter. Powód, dla którego używam tego datepicker'a nadui-bootstrap datepicker, który według xeditable powinien być używany, ponieważ nie wygląda ani nie czuje się dobrze na mojej stronie. Oto jak wygląda datepicker ui-bootstrap http://jsfiddle.net/NfPcH/23/. Podoba mi się prosty i prosty wygląd datepicker bootstrap.

Oto zagrywka stołu z polami xeditable i datami do wypróbowania i edycji PLUNKER

Używanie bootstrap-datepicker jako pola wejściowego działa poprawnie, do poprawnej aktualizacji modelu używana jest dyrektywa niestandardowa:

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

Zmieniłem kod źródłowy xeditable, aby użyć bootstrap-datepicker (zobacz wiersze 78-84 z 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>"
});
}]);

jednak problem leży gdzieś w xeditable i jak aktualizuje model wybranego wiersza.

xeditable działa doskonale do edycji tekstu i rozwijanych list, a integracja z bootstrap-datepicker okazuje się trudna.

Jeśli istnieje inny sposób korzystania z edycji bezpośredniejz bootstrap-datepicker, nie byłbym przeciwny wypróbowaniu go. Myślałem, że jeśli to nie zadziała, może coś z ng-show i ng-hide może załatwić sprawę.

Odpowiedzi:

6 dla odpowiedzi № 1

1> Upewnij się, że zainstalowałeś dwie biblioteki - kątowe-xeditable - angiot-bootstrap-datepicker

2> Utwórz nową dyrektywę

/ * Nowa dyrektywa, którą stworzyłem dla xeditable do użycia z bootstrap-datepicker * /

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

3> W HTML umieść coś w stylu:

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

---

1 dla odpowiedzi nr 2

Spróbuj tego:

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

---