Question

我遇到了Kendo UI datepicker的问题，它没有通过value属性显示已经设置的值。这是标记：

<input data-kendoDatePicker="true" value="9/18/2013 12:00:00 AM"/>

<script>
    $(':input[data-kendoDatePicker=true]').kendoDatePicker({
        format: 'dd MMM yyyy'
    });
</script>

当页面加载时，它不会显示任何值。但是，在DOM中查看为输入设置的值，它只是不需要它！选择新值后，将显示并格式化。如果我删除格式，它按预期工作

Answer 1

@Bobby_D是对的，问题是你没有指定正确的日期格式：MM/dd/yyy。

BTW：你知道你可以把它定义为：

<input data-role="datepicker" value="9/18/2013 12:34:56 AM" data-format="MM/dd/yyyy"/>
<script>
    kendo.init($("input"));
</script>

基本上，如果您可以在HTML input中设置所有属性，则只需调用kendo.init即可初始化元素。所以，你甚至可以做kendo.init($("body"));。这在从HTML初始化大多数组件时非常有用。

编辑：Kendo DatePicker中有两个不同的选项：

format：指定格式，用于格式化输入中显示的DatePicker的值。格式也将用于解析输入。
parseFormats：指定用于使用value（）方法或直接用户输入解析值集的日期格式。如果未设置，将使用格式的值。请注意，格式选项始终使用解析过程。

在我看来，您希望以一种格式接收日期，然后将其显示在另一种格式中。然后，您应该使用parseFormats表示您收到的可能（可能不止一个）和format表示窗口小部件中显示的内容。

你的代码是：

$(':input[data-kendoDatePicker=true]').kendoDatePicker({
    format:        "dd MMM yyyy",
    parseFormats : [ "MM/dd/yyyy" ]
});

此处修改的代码：http://jsfiddle.net/OnaBai/TQnny/1/

或替代格式：

<input id="datapicker" data-role="datepicker" value="9/18/2013 12:00:00 AM" data-format="dd MMM yyyy" data-parse-formats="MM/dd/yyyy"/>

和用于初始化它的JS：

kendo.init($("init"));

此处修改的代码：http://jsfiddle.net/OnaBai/TQnny/2/

Answer 2

您需要提供您在值中提供的日期的正确格式。例如，您提供美国格式的日期，并期望剑道以英国格式阅读，它无法拨打电话，例如。几个月和一天是不明确的。

http://jsfiddle.net/vojtiik/8CCqR/1/

   $(':input[data-kendoDatePicker=true]').kendoDatePicker({
       format: "MM/dd/yyyy"
//     format: "MM/dd/yyyy hh:mm:ss tt"
    });

Date Formatting

Answer 3

如果您使用AngularJS与Kendo UI集成，您可以尝试以下代码段：

HTML：

<input kendo-date-time-picker ng-model="dateStr" k-ng-model="date"/>

JS：

$scope.date = new Date();
$scope.dateStr = $filter('date')($scope.date, "yyyy-MM-ddTHH:mm:ss");

P.S。别忘了在控制器依赖项列表中指定$ filter对象

格式化时，Kendo UI datepicker最初不显示值

3 个答案: