javascript - 如何让 Bootstrap DateTimePicker 显示正确的年份？

Question

我维护的网站的功能之一是创建/更新即将举行的事件。用户需要能够选择事件的日期和时间，但我发现如果选择的日期是在一年的最后一周，并且该周有几天是在明年，那么年自动设置为下一年。

例如，如果选择 2019 年 12 月 29 日，则插入数据库的日期为 2020 年 12 月 29 日。
此外，如果我打开一个包含事件数据的模块，它会显示日期为 2021 年 12 月 29 日，即使数据库将其记录为 2020 年。

由于 2019 年 12 月 28 日是星期六，与 2020 年不在同一周，因此将作为 2019 年 12 月 28 日插入数据库。

下面是事件模块的一些 ColdFusion 代码:

<div class="form-group">
    <cfdump var="#event.event_date_time#" expand="yes"></cfdump>
    <label>Event Date and Time:</label>
    <div class='input-group date' id='updateEventDateTime'>
        <input required type='text' name="updateEventDateTime" class="form-control" 
               placeholder="Select event date and time" 
               value="#DateTimeFormat(event.event_date_time,'MM/dd/YYYY H:nn tt')#"/>
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
    <cfdump var="#event.event_date_time#" expand="yes"></cfdump>
</div>

这是 DateTimePicker 的 javascript:

<script>
    $(document).ready(function(e) {

        // Create the Bootstrap Datetimepicker for the event
        // date and time
        $('#updateEventDateTime').datetimepicker({
            format: 'MM/DD/YYYY H:mm A',
            sideBySide: true
        });

    });
</script>

以下是上述 ColdFusion 代码输出的屏幕截图:

DateTime 中的错误年份:



我应该怎么做来解决这个问题的任何想法？在过去的 2 年里，我一直在维护这个网站，这不是问题，虽然现在对用户来说显然不是问题，但它会在 11 月/12 月出现，我宁愿现在就修复它。

编辑:有两个主要操作都需要修复。用户需要能够添加事件和更新事件。上面的 ColdFusion 代码在 updateEvent 模块中，addEvent 模块的部分代码如下:

<div class="form-group">
    <label>Event Date and Time:</label>
    <div class='input-group date' id='addEventDateTime'>
        <input required type='text' name="addEventDateTime" class="form-control" 
               placeholder="Select event date and time" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>

此模块中的 javascript 代码包含以下内容:

<script>
$(document).ready(function(e) {

    // Create the Bootstrap Datetimepicker for the event
    // date and time
    $('#addEventDateTime').datetimepicker({
        format: 'MM/DD/YYYY H:mm A',
        sideBySide: true
    });

Answer 1

您在这里谈论了多种不同的事情:您正在使用 Bootstrap 模板、ColdFusion 变量和数据库中的 Javascript。所有这三个都会影响您看到的最终日期，并且您看到的不是日期对象(如数据库最终应该想要的)，而是日期对象的字符串表示形式。

当您查看日期时，它可能看起来像 March 27, 2019 12:00:00 pm 或 03/27/2019 12:00:00 pm 或 27/03/2019 12:00:00.000 或类似的东西。当数据库或编程语言将该字符串视为日期对象时，它看起来像 123465789.123465798 ，它通常是自系统组件使用的任何纪元以来的特定秒值。 Epoch 是一个完全不同的话题。

由于长十进制作为日期并不是人类真正可读的，因此您的语言必须执行屏蔽以在两种表示形式之间来回转换。

您要记住您使用哪一段代码进行屏蔽。通常，掩码用于显示，但在插入字符串之前，您可能还需要它将字符串转换为数据库上的日期可读对象。因此，您需要检查您的 Javascript 没有对表单中的值执行任何操作，您的 ColdFusion 没有对该 Javascript 字符串执行任何操作，并且您的数据库没有进一步更改该 ColdFusion 字符串。

我不确定 Bootstrap 的 datapicker 使用什么来解释日期字符串，或者它是否最终向您的 ColdFusion 发送一个奇怪的字符串，但我知道 CF11 使用不同的掩码，具体取决于您使用的函数。 DateFormat() 不关心你使用什么情况，但 DateTimeFormat() 关心。它依赖于其底层 Java SimpleDateFormat 的掩码定义，它将 y 和 Y 解释为不同的掩码，意味着不同的事物。

最大的痛点是，如您所见，它只会在一年结束时的几天内可见，因为一年永远不会正好由 52 周组成。所以我们有另一种类型的日期，称为 WeekYear ，或 Y 掩码中的 SimpleDateFormat 。它基本上是基于周的年份( W 或 w )。因此，在一年的开始和结束的几天内，日历年将不等于周年。对于一年中的其他 358 天左右，它们将是相同的。而且由于元旦和除夕通常是非工作假期，所以很容易被忽视。所以，本质上，你的代码在过去几年没有正常工作；你只是没有理由注意到。好玩吧？

一个简单的例子，参见:https://trycf.com/gist/5cb651559e28e5cbdecdb57b959c3c18/acf11?theme=monokai

如果您注意到，dateFormat() 和 timeFormat() 都会掩盖它们“技术上”应该做的事情。您也可以使用 timeFormat() 将掩码应用于字符串的 date 部分。他们不应该那样工作。

正如我在多个地方所说的，日期处理(几乎任何语言)是我最讨厌的事情。这是一个会让你想拔头发的话题。也可能是坐在你旁边的任何人的头发。并且绝对是编写您正在调试的日期处理代码的人的头发。这完全是一个引发 Code-rage 的话题。

不管怎样，如果你想看一些其他的例子，我之前已经写过几次了，可能还会再写一次。谢谢你把我拉回这个完全疯狂的兔子洞。

https://codefumonkey.blogspot.com/2016/02/date-masking-inconsistency.html
https://codefumonkey.blogspot.com/2016/10/more-date-masking.html

注意: 最新版本的 CF 改变了一些日期函数中的屏蔽行为。它们在 CF2018 中不区分大小写，因此使用 yyyy 或 YYYY 都没有关系。但是帮自己一个忙并使用 yyyy 因为您知道 CF 仍然建立在 Java 之上。但是，还有一些其他框架需要 YYYY 而不是 yyyy ，因此记住您用于应用掩码的语言仍然非常重要。如果您不需要查看日期值并且可以继续使用日期对象，请保持这种方式而不是使其成为可读字符串。