javascript - jQuery UI datetimepicker 中的自定义分隔符添加

Question

我使用the datetimepicker add on for the jQuery UI datepicker (基于 jQuery UI datepicker )在我的网页上使用日历小部件实现输入字段。根据文档(请参阅上面链接页面上的Options选项卡)，有一个可选参数separator可以指定日期和日期之间的字符时间值，默认为空格。

但是，当我使用不包含空格的自定义分隔符时，例如 T (如 ISO 8601 时间字符串，例如 2016-01-15T15:13:20Z )，我可以在小部件中选择一个时间并且它显示正确，但是当我再次单击输入字段以选择下一个时间时，浏览器控制台会显示:

Error parsing the date string: Extra/unparsed characters found in date: T12:00:00
date string = 2016-01-13T12:00:00
date format = yy-mm-dd

我是否误解了该参数，或者是否有其他方法来实现我的自定义日期时间格式？

郑重声明，我使用 jQuery 2.2.0、jQuery UI 1.11.4 和 jQuery UI datetimepicker add on 1.6.1 进行了尝试。

请参阅下面的代码和片段以供自己尝试。

HTML 和 JS:

// Without custom separator
$("#datetime_input_1").datetimepicker({dateFormat: "yy-mm-dd",
                                       timeFormat: "hh:mm:ss"
                                      });

// With custom separator
$("#datetime_input_2").datetimepicker({dateFormat: "yy-mm-dd",
                                       timeFormat: "hh:mm:ss",
                                       separator: "T"
                                      });

<!-- Imports -->
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.css" rel="stylesheet"/>


<!-- Input forms -->
<input type="text" class="form-control" id="datetime_input_1" >
<br><br>
<input type="text" class="form-control" id="datetime_input_2" >

Answer 1

尝试使用

$("#datetime_input_2").datetimepicker({dateFormat: "yy-mm-dd",
                                   timeFormat: "hh:mm:ss",
                                   separator: ' T '
                                  });

或

$("#datetime_input_2").datetimepicker({dateFormat: "yy-mm-dd",
                                   timeFormat: "hh:mm:ss",
                                   separator: " T "
                                  });

代替你的

$("#datetime_input_2").datetimepicker({dateFormat: "yy-mm-dd",
                                   timeFormat: "hh:mm:ss",
                                   separator: "T"
                                  });

它应该给你等待的结果。例如，它的意思是2016-01-22 T 12:25:25。这应该可以正确运行。

我阅读了该附加组件的页面以及 Examples 部分我发现了这个

var ex13 = $('#utility_example_1');

ex13.datetimepicker({
    timeFormat: 'hh:mm tt z',
    separator: ' @ ',
    showTimezone: true
});

但我仍然不能向您保证字母 T 会被接受，即使它两侧各有一个空格。

编辑:

我发现(在附加组件的代码中)这个

/*
    * override parseDate() because UI 1.8.14 throws an error about "Extra characters"
    * An option in datapicker to ignore extra format characters would be nicer.
    */

它似乎运行不正确。