如何使 jqueryUI datepicker 以不同于显示的格式提交？

Posted 2023-05-07

【中文标题】如何使 jqueryUI datepicker 以不同于显示的格式提交？

【英文标题】：How to make jqueryUI datepicker submit in a different format than what is being displayed?

【发布时间】：2012-07-16 09:23:26

【问题描述】：

我正在使用 jQueryUI 进行一些国际化。我的表单上有一个 DatePicker 控件，可以正常使用法语。

当我选择一个日期时，例如 2012 年 8 月 15 日，DatePicker 将按我的预期显示 15 Aoû, 2012。然而，我的问题是，当表单发布时，DatePicker 的值被发布为“15 Aoû, 2012”，现在需要在服务器上进行翻译才能正确保存。

我的问题是，jQueryUI DatePicker 中是否有一种内置方式，以便我可以始终以一致的格式将其发布到服务器，而不管控件以哪种语言显示？如果没有内置方法，有哪些选择可以实现这一目标？

我意识到我可以将日期格式更改为 08/15/2012 之类的东西，而不是使用文本表示，但这不是我想要做的。

【参考方案1】：

有 2 个配置选项：altField 和 altFormat。 http://api.jqueryui.com/datepicker/#option-altField 如果您指定一个 altField，该字段也将被更新，并且将具有 altFormat。 通常您会希望将 altField 设置为隐藏字段，因此您可以忽略常规字段并将 altField 发送到 db。

【讨论】：

这是最近才添加到 DatePicker 中的吗？如果没有，我想知道为什么以前没有出现？

我认为它已经很老了......我知道它但不记得它的名字是什么，所以用谷歌搜索它并到达这里，当我没有找到它作为答案时让我感到震惊。 ..

当然，我只是想在接受之前确认它是否有效。

【参考方案2】：

您会注意到，为新输入的日期提供 dateFormat 效果很好，但它不会改变已经提供给日期输入字段的value 属性。我花了一些时间，我不确定这个解决方案是否理想，但这里解释了我的情况和解决它的代码。将来可能会帮助其他人解决同样的问题。在我的示例中，我使用 dd/MM/yyyy 作为显示格式。

页面包含任意数量的日期输入字段，这些字段可能已经或可能没有以yyyy-MM-dd 格式提供的value 属性，如specified by W3C。 有些浏览器会有自己的输入控件来处理日期。在撰写本文时，例如 Opera 和 Chrome。这些应该期望并存储上述格式的日期，同时根据客户的区域设置呈现它们。您可能不希望/不需要在这些浏览器中创建 jqueryui 日期选择器。 没有内置控件来处理日期输入字段的浏览器将需要 jqueryui 日期选择器以及一个“alt”不可见字段。 yyyy-MM-dd 格式的不可见 alt 输入字段必须具有原始名称和唯一 ID，表单逻辑才能继续工作。 最后，必须解析显示输入字段的 yyyy-MM-dd 值并将其替换为所需的对应项。

所以，这里是代码，使用Modernizr 来检测客户端是否能够本地呈现日期输入字段。

if (!Modernizr.inputtypes.date) 
    $('input[type=date]').each(function (index, element) 
        /* Create a hidden clone, which will contain the actual value */
        var clone = $(this).clone();
        clone.insertAfter(this);
        clone.hide();

        /* Rename the original field, used to contain the display value */
        $(this).attr('id', $(this).attr('id') + '-display');
        $(this).attr('name', $(this).attr('name') + '-display');

        /* Create the datepicker with the desired display format and alt field */
        $(this).datepicker( dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" );

        /* Finally, parse the value and change it to the display format */
        if ($(this).attr('value')) 
            var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
            $(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
        
    );

【讨论】：

注意：如果您使用 on keydown/keyup 事件来初始化日期选择器（如果您希望在动态创建的元素上使用日期选择器，这很有用），请注意添加此代码以在每次单击时不重新创建输入： var inputId = $(this).attr('id'); if (inputId.indexOf('-display') !== -1) return

【参考方案3】：

<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
    $( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
    $( "#datepicker" ).datepicker();
</script>

【讨论】：

那么，这会将日期显示为 2012 年 8 月 15 日，这就是我说过我不想做的事情？

【参考方案4】：

似乎其他人在您之前有过这个问题或类似的问题。

如果您阅读this *** answer，作者试图以一种格式显示日期并以另一种格式将数据传递给 mysql。

该链接中的先前答案使您可以将所选值作为变量访问。现在您只需将 parseDate 连接到您选择的日期变量。

<script type="text/javascript">
    $('#cal').datepicker(
             dateFormat: 'dd M yy',
             onSelect: function(dateText, inst)  
             var dateAsString = dateText; //the first parameter of this function
             var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
           
    );
</script>

查看parseDate 链接以了解设置和格式。

希望这会有所帮助！

【讨论】：

Wally，此示例允许您以 dd M yy 显示格式，同时将所选数据作为 dd-mm-yyyy 传递。根据需要调整输出格式。

我真的不明白这个答案。请说明如何使用此方法以与显示格式不同的所选格式将日期传递到数据库。

您可能应该尝试一个不是 2012 年的答案，因为在 jQuery 进行了八年的更改之后，这可能与此无关。祝你好运！

在this answer中解释了使用onSelect设置另一种显示日期格式的正确方法。

【参考方案5】：

基本上，您应该重新格式化日期。相反，您应该通过 getDate() 方法从 Datepicker 读取 JavaScript 的 Date 对象。然后，您需要将其传递给服务器。 问题是如何。基本上，您想要的是一些通用格式。如果你使用 JSON，答案很简单，只需输入日期对象，JSON 的 stringify() 函数会自动将其格式化为ISO8601。

正如您从 Wikipedia 中看到的那样，ISO8601 旨在可靠地交换日期和时间，因此您应该使用它。 了解现代 Web 浏览器支持 Date 对象的 toISOString() 方法可能会有所帮助。

【参考方案6】：

正如@Pawel-Dyda 所说， 有一个

getDate() 方法

var currentDate = $( ".selector" ).datepicker( "getDate" );

这是它返回的示例：Wed Jan 20 2016 00:00:00 GMT+0300.

您可以用 Javascript、php、SQL 或其他方式解析它。

---

MySQL解析示例：

select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');

返回：

2016-01-20 00:00:00

【参考方案7】：

适用于 ASP.NET 的解决方案

@using (html.BeginForm("ActionName", "ControllerName"))

    @Html.HiddenFor(m => m.DateFrom)
    @Html.HiddenFor(m => m.DateTo)

    <div class="form-group">
        @Html.LabelFor(m => m.DateFrom)
        <input id="datepicker-date-from" type="text" class="form-control datepicker" value="@Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.DateTo)
        <input id="datepicker-date-to" type="text" class="form-control datepicker" value="@Model.DateTo.Date.ToString("dd.MM.yyyy")" />
    </div>

    <input type="submit" class="btn btn-sn btn-primary" value="Download" />



@section scripts 
    <script type="text/javascript">

        $(function () 
            $("#datepicker-date-from").datepicker(
            
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateFrom),
                altFormat: "yy-mm-dd"
            );

            $("#datepicker-date-to").datepicker(
            
                dateFormat: "dd.mm.yy",
                altField: @Html.IdFor(m => m.DateTo),
                altFormat: "yy-mm-dd"
            );
        );

    </script>