Angular-Kendo Date Format Behavior

Question

Hello All,

I am running into some problems when using the Kendo-UI date picker in my angular application. Any help would be greatly appreciated.

Thanks in Advance,
Drew

Issue

When using the angular-kendo directive for the date picker along with a date format a date object put into the model. The desired behavior is to store a string in the model as formatted by the options.

Javascript Versions

Angular-Kendo 0.5.2 2013-07-26

AngularJS v1.0.5

jQuery jQuery v1.9.1

Snippet from Template

<input type="text" name="publicationDate" ng-model="preview.publicationDate"  kendo-date-picker="dateOptions" k-options="dateOptions" />

Date Options

$scope.dateOptions = {
    format: "yyyy-MM-dd"
};

Output

Date object stored in model: Tue Sep 17 2013 00:00:00 GMT-0400 (EDT)

Desired string to be stored in model: 2013-09-17

Questions

1. Is there any remedy for this issue?
2. Am I using the directive correctly?

Answer 1

In Kendo UI 2014 Q2 (2014.2.625), this is fixed by using k-ng-model instead of ng-model.

Answer 2

I think what is going on is that when you are binding through ng-model, kendo is returning the value of

.value()

In your controller, I believe you can do this:

$scope.$watch('preview.publicationDate'), function (val) {
    if (val) {
       $scope.preview.publicatonDate = kendo.toString(val, "yyyy-MM-dd");
    }
});

Answer 3

This code helps to change the kendo-date-time-picker to the desired format

<input kendo-date-time-picker
             k-options="monthSelectorOptions"
             k-format="'dd/MM/yyyy hh:mm tt'" />

Answer 4

Possible Solution

I was able to do a work around by creating a custom directive. The sample provided by another stack overflow post here demonstrates how to create a custom directive.

I still have some additional testing to do but it seems to be working. I am not sure if this is the most efficent way to get around the problem though.

Snippet from Template

<input type="text" parsedate="yyyy-MM-dd" name="publicationDate" ng-model="preview.publicationDate" kendo-date-picker="" k-options="dateOptions"/>

Custom Directive

module.directive("parsedate", function () {
    return {
        require: "ngModel", link: function (scope, element, attr, ngModel) {

            function parsedate(text, format) {
                return kendo.toString(text, attr.parsedate);
            }

            ngModel.$parsers.push(parsedate);
        }
    };
});