46

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

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

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

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

4

7 回答 7

51

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

于 2012-12-19T18:04:34.030 回答
10

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

  1. 该页面包含任意数量的日期输入字段，这些字段可能已经或可能没有按W3C 指定value的 format 提供的属性。yyyy-MM-dd
  2. 一些浏览器将有自己的输入控件来处理日期。在撰写本文时，例如 Opera 和 Chrome。这些应该期望并以上述格式存储日期，同时根据客户的区域设置呈现它们。您可能不想/不需要在这些浏览器中创建 jqueryui 日期选择器。
  3. 没有内置控件来处理日期输入字段的浏览器将需要 jqueryui 日期选择器以及“alt”不可见字段。
  4. 具有格式的不可见 alt 输入字段yyyy-MM-dd必须具有原始名称和唯一 id 才能使表单逻辑继续工作。
  5. 最后，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));
        }
    });
}
于 2013-06-02T16:52:16.480 回答
0 
<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-07-17T12:50:28.387 回答
0

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

如果您阅读此 stackoverflow 答案，作者试图以一种格式显示日期并以另一种格式将数据传递给 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链接的设置和格式。

希望这可以帮助！

于 2012-07-17T13:00:20.813 回答
0

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

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

于 2012-07-19T13:39:53.577 回答
0

正如@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
于 2016-01-17T23:43:01.060 回答
0

适用于 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>
}
于 2018-03-29T13:37:17.333 回答