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

Question

我正在使用jQueryUI进行一些国际化.我在一个正确使用法语的表单上有一个DatePicker控件.

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

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

我意识到我可以将dateformat更改为类似于08/15/2012的内容,而不是使用文本表示,但这不是我想要做的.

Answer 1

有两种配置选项:altField和altFormat.http://api.jqueryui.com/datepicker/#option-altField 如果指定altField,该字段也将更新,并具有altFormat.通常你会想要使altField成为一个隐藏字段,你可以忽略常规字段并发送到db altField.

Answer 2

正如您已经注意到的那样,提供dateFormat适用于新输入的日期,但它不会更改value已提供给日期输入字段的属性.我花了一些时间,我不确定这个解决方案是否理想,但这里解释了我的情况以及解决它的代码.未来可能会帮助其他人解决同样的问题.在我的例子中,我dd/MM/yyyy用作显示格式.

1. 该页面包含任意数量的日期输入字段,这些字段可能已经或可能没有value格式提供的属性yyyy-MM-dd,如W3C所指定.
2. 有些浏览器会有自己的输入控件来处理日期.在撰写本文时,就是Opera和Chrome.这些应该期望并以上述格式存储日期,同时根据客户的区域设置进行渲染.您可能不希望/需要在这些浏览器中创建jqueryui datepicker.
3. 没有内置控件来处理日期输入字段的浏览器将需要jqueryui datepicker以及'alt',不可见字段.
4. 具有yyyy-MM-dd格式的不可见的alt输入字段必须具有原始名称和唯一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));
        }
    });
}