Използване на bootstrap-datepicker с ъглово xeditable - angularjs, angularjs-directive, x-редактируем, bootstrap-datepicker, angularjs-ng-model

Имам една маса и бих искал да добавя в редицаредактиране на тази таблица. Започнах с ng-grid, но реших, че докато работи добре, прекарвах твърде много време, опитвайки се да оправя стила, така че да съответства на общата тема на уебсайта ми. Започнах да се справям и сега използвам обикновена стара html таблица с ъгловати зад кулисите за страхотно двупосочно свързване на данни.

Всичко върви гладко, с изключение на факта, че съм остана да се опитвам да вляза в редакция, за да работя с bootstrap-datepicker: http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter, Причината, поради която използвам този агент за дата надui-bootstrap datepicker, че xeditable казва, че трябва да използвате е, защото тя не изглежда или да се чувстват правилно в моя сайт. Ето какво изглежда изписването на дата за изписване на ui-bootstrap http://jsfiddle.net/NfPcH/23/, Харесва ми простият и ясен поглед на подбора на дати.

Тук е зареден масив с полета за редактиране и дата, за да се опитате да редактирате PLUNKER

Използването на bootstrap-datepicker като поле за въвеждане работи добре, за правилното актуализиране на модела се използва персонализирана директива:

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

Промених xeditable изходния код, за да използвам bootstrap-datepicker (виж линии 78-84 на 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>"
});
}]);

, но проблемът е някъде с изменяемо и как той актуализира модела на избрания ред.

xeditable работи перфектно за редактиране на текст и падащи менюта в реално време, опитвайки се да се интегрира с bootstrap-datepicker се оказва трудно.

Ако има друг начин да използвате редакция в реално времес bootstrap-datepicker, не бих се противопоставил да го изпробвам. Мислех си, че ако това не се случи, може би нещо с ng-show и ng-hide може да направи този трик.

Отговори:

6 за отговор № 1

1> Уверете се, че сте инсталирали две библиотеки - ъглово-изменяемо - ъглова обувка за натоварване

2> Създайте нова директива

/ * Новата директива, която направих, за да може да се използва с фърмуера-datepicker * /

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

3> В HTML поставете нещо като:

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

---

1 за отговор № 2

Опитайте тази:

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

---