Kendo UI datepicker 在格式化时最初不显示值答案

【问题标题】：Kendo UI datepicker doesn't display value initially when formattedKendo UI datepicker 在格式化时最初不显示值
【发布时间】：2013-09-30 12:05:48
【问题描述】：

我对 Kendo UI 日期选择器有疑问，它不会通过 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 中查看为输入设置的值，它就是不接受它！选择新值时，将显示并格式化。如果我删除格式，它会按预期工作

【问题讨论】：

标签： jquery datepicker kendo-ui kendo-datetimepicker

【解决方案1】：

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

顺便说一句：你知道你可以将它定义为：

<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/

【讨论】：

有趣的是，日期的不正确格式在 2.918 中的处理方式有所不同。以前的版本根本没有显示日期，这个版本确实显示了 value 属性中输入的任何内容，但是 datepicker 没有正确填充。如果您在示例中打开 dp，则无论值如何，日期都设置为今天。请参阅此处设置为“xx”的月份仍显示值jsfiddle.net/vojtiik/dxZV3/1
OnaBai，我指定的格式是我想要得到的格式。这不是用于解析的格式。检查这个小提琴jsfiddle.net/TQnny 选择一个日期并查看格式是否正确显示。问题是最初加载页面时它不会处理和显示日期。
所以您想以一种格式 (MM/dd/yyy) 接收日期，然后以另一种格式 (dd MMM yyyy ) 显示/处理它们，对吗？
请看我的编辑

【解决方案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

【讨论】：

这就是我认为格式的原因，因此您可以更改日期的显示方式。您建议的格式不会以我想要的格式返回日期，例如 2013 年 9 月 18 日。

【解决方案3】：

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

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

附：不要忘记在控制器依赖项列表中指定 $filter 对象

【讨论】：