web api IsoDateTimeConverter k-ng-model ng-model

[leblancmeneses]

what is the recommendation for datepicker or datetimepicker to bind from webapi

I would have expected the view to display 8/20/2014

<input id="DateGiven" placeholder="" ng-model="model.DateGiven" k-ng-model="model.DateGivenObj" name="fDateGiven" ng-required="true" kendo-date-picker k-animation='false' class='form-control' />

[lijuenc]

I had to wrap the kendo datepicker directive with my own to get around this and several other frustrating issues related to using kendo with angular's (ng-model) validation.

For this use case, the gist of it is to watch the value provided in k-ng-model, and then set the value of whatever is bound to ng-model manually, as that is what will be shown in the text box.

<input kendo-date-picker 
    k-ng-model="boundModel"
    ng-model="boundModelText">

scope.$watch('boundModel', function (newVal, oldVal) {
    if (!angular.isDate(newVal)) {
        scope.boundModelText = null;
        return;
    }

    resyncKendoModelToNgModel(newVal);
});

function resyncKendoModelToNgModel (date) {
    // format however you like it to appear in the view:
    var dt = moment(date);
    scope.boundModelText = dt.format('DD/MM/YYYY');
}

[leblancmeneses]

@Durz thanks for the help - angular.isDate(newVal) was the key.

I was trying to do similar but through ngModel.$setViewValue .

Here is the working version I am using.

angular.module('Core')
//extKendoConverter='kendoDatePicker'
.directive('extKendoConverter', ['$timeout', '$parse', 'waitForService', function ($timeout, $parse, waitForService) {
    return {
        restrict: 'A',
        scope: false,
        link: function ($scope, element, attr) {
            waitForService.until($scope, function () {
                return element.data(attr.extKendoConverter) != null;
            }, function () {
                var getter = $parse(attr.kNgModel);
                if (attr.extKendoConverter == 'kendoDatePicker') {
                    $scope.$watch(attr.kNgModel, function (newValue) {
                        if (newValue == null) return;

                        if (!angular.isDate(newValue)) {
                            var received = new Date(newValue);
                            $timeout(function () {
                                getter.assign($scope, received);
                            }, 1);
                        }

                    }); 
                }
            });

        }
    };
}]);

[leblancmeneses]

I just noticed a bug when ng-required="true" and rebinding with web api . In my case model.DateGivenTxt doesn't exist. ng-model="model.DateGivenTxt" k-ng-model="model.DateGiven" - so on edit it is initially in an invalid state with the directive I've provided. In my case it is optional. But I am reopening since it is not 100% fixed.