Angular-Kendo日期格式行为

时间:2013-09-17 15:24:21

标签: angularjs kendo-ui

大家好,

我在角度应用程序中使用Kendo-UI日期选择器时遇到了一些问题。任何帮助将不胜感激。

先谢谢,提德

问题

对日期选择器使用angular-kendo指令以及日期格式时,将日期对象放入模型中。所需的行为是将模型中的字符串存储为由选项格式化。

Javascript版本

Angular-Kendo 0.5.2 2013-07-26

AngularJS v1.0.5

jQuery jQuery v1.9.1

模板片段

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

日期选项

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

输出

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

问题

  1. 这个问题有什么补救措施吗?
  2. 我是否正确使用该指令?

4 个答案:

答案 0 :(得分:4)

在Kendo UI 2014 Q2(2014.2.625)中,这是通过使用k-ng-model而不是ng-model来解决的。

答案 1 :(得分:3)

我认为当你通过ng-model绑定时,kendo正在返回

的值
.value()

在你的控制器中,我相信你可以这样做:

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

答案 2 :(得分:3)

此代码有助于将kendo-date-time-picker更改为所需的格式

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

答案 3 :(得分:2)

可能的解决方案

我能够通过创建自定义指令来解决问题。 另一个堆栈溢出帖here提供的示例演示了如何创建自定义指令。

我还有一些额外的测试要做,但似乎有效。我不确定这是否是解决这个问题最有效的方法。

模板片段

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

自定义指令

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