如何使jQueryUI的日期选择不同的格式提交不是显示的是什么?(How to make jquer

2019-06-26 08:32发布

我正在使用jQueryUI的一些国际化。 我有一个是正确的法语工作窗体上的DatePicker控件。

当我选择一个日期,例如2012年8月15日,该会的DatePicker显示15个AOU,2012年我所期望的。 然而,我的问题是,当表单发布时,的DatePicker的值被张贴'15 AOU,2012' 现在需要在服务器上进行转换,才能正确保存。

我的问题是,是否有jQueryUI的DatePicker的内部内置的方式,这样我可以把它随时发布到服务器以一致的格式,不管控制被显示在哪种语言的? 如果没有一个内置的方式,实现这一目标有哪些选择?

我知道我可以在日期格式更改为类似2012年8月15日,而不是使用文本表示,但是这不是我想做的事情。

Answer 1:

还有为2个的配置选项:altField和altFormat。 http://api.jqueryui.com/datepicker/#option-altField如果指定altField,该领域也将被更新,将有altFormat。 通常情况下,你会希望让altField一个隐藏字段,姜智贤可以忽略常规领域,发送到数据库的altField。



Answer 2:

正如你会注意到,供应DATEFORMAT很适合新进入的日期 ,但它不会改变的value这是已经提供给日期输入字段属性。 我花了一些时间,我不知道这个解决方案是否是理想的,但这里是我的情况介绍,并解决了它的代码。 可以帮助别人,将来同样的问题。 在我的例子我使用dd/MM/yyyy作为显示格式。

  1. 该页面包含任何数量的日期输入字段,其可能或可能尚未具有的value的格式供给的属性yyyy-MM-dd ,如由W3C指定 。
  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));
        }
    });
}


Answer 3:

看来别人之前,你有这个问题或类似的一个。

如果你看过这个计算器的答案 ,笔者试图以显示一种格式的日期并将数据传递到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链接设置和格式。

希望这可以帮助!



Answer 4:

基本上,你应该重新格式化日期。 相反,你应该阅读日期选择器的JavaScript的Date对象,通过GETDATE()方法。 然后,你需要将它传递给服务器。
问题是如何。 基本上,你想要的是一些常见的格式。 如果使用JSON的答案很简单,只要把日期对象和JSON的字符串化()函数会自动将其格式化为ISO8601 。

正如您可以从维基百科看到,ISO8601的目的是交换日期和时间可靠的,所以这就是你应该使用什么。
这可能是有益的知道,现代浏览器都支持Date对象的toISOString()方法。



Answer 5:

作为@帕维尔 - Dyda提到,有一个

GETDATE()方法

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

下面是它返回一个例子: Wed Jan 20 2016 00:00:00 GMT+0300.

你可以在Javascript,PHP解析它,在SQL或什么的。


MySQL的解析examlple:

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


Answer 6:

解决方案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>
}


Answer 7:

<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>


文章来源: How to make jqueryUI datepicker submit in a different format than what is being displayed?