datepicker 样式 html,jquery ui-如何使jqueryUI datepicker以与显示的格式不同的格式提交？...

jquery ui-如何使jqueryUI datepicker以与显示的格式不同的格式提交？

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

当我选择一个日期(例如2012年8月15日)时，DatePicker将显示15Aoû，2012，正如我期望的那样。 但是，我的问题是，发布表单时，DatePicker的值发布为“ 15Aoû，2012”，现在需要在服务器上对其进行翻译，然后才能正确保存。

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

我意识到我可以将日期格式更改为2012年8月15日，而不是使用文本表示，但这不是我想要的。

7个解决方案

48 votes

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

iwiznia answered 2020-07-07T15:37:15Z

10 votes

如您所见，提供dateFormat对于新输入的日期非常有效，但不会更改已经提供给日期输入字段的2956121147873873690624属性。 我花了一些时间，但不确定该解决方案是否理想，但这是我的情况说明以及解决该问题的代码。 将来可能会帮助其他遇到相同问题的人。 在我的示例中，我使用yyyy-MM-dd作为显示格式。

该页面包含任意数量的日期输入字段，该字段可能具有或未具有以W3C所指定的2956121147873873690625格式提供的yyyy-MM-dd属性。

某些浏览器将具有自己的输入控件来处理日期。 在撰写本文时，例如Opera和Chrome。 它们应以上述格式预期并存储日期，同时根据客户的区域设置呈现它们。 您可能不想/不需要在这些浏览器中创建jqueryui datepicker。

没有内置控件来处理日期输入字段的浏览器将需要jqueryui datepicker以及“ alt”(不可见)字段。

格式为2956121147147873690624的不可见的alt输入字段必须具有原始名称和唯一的ID，以便表单逻辑继续正常工作。

最后，必须解析显示输入字段的2956121147147873690624值，并将其替换为所需的对应值。

因此，这是使用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));

}

});

}

Vincent Sels answered 2020-07-07T15:38:04Z

0 votes

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

如果您阅读此stackoverflow答案，那么作者试图以一种格式显示日期并将数据以另一种格式传递给MySQL。

该链接中的先前答案可让您设置为将所选值作为变量访问。 现在，您所需要做的就是将parseDate连接到您选择的日期变量。

$('#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);

}

});

检查parseDate链接以进行设置和格式化。

希望这可以帮助！

Bechard answered 2020-07-07T15:38:42Z

0 votes

基本上，您不应该重新设置日期格式。 相反，您应该通过getDate()方法从Datepicker中读取JavaScript的Date对象。 然后，您需要将其传递给服务器。

问题是如何。 基本上，您想要的是一些通用格式。 如果使用JSON，答案非常简单，只需放置日期对象，JSON的stringify()函数就会自动将其格式化为ISO8601。

正如您从Wikipedia看到的那样，ISO8601旨在可靠地交换日期和时间，因此您应该使用它。

知道现代的网络浏览器支持Date对象的toISOString()方法可能会有所帮助。

Paweł Dyda answered 2020-07-07T15:39:15Z

0 votes

正如@ 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

NikitOn answered 2020-07-07T15:39:57Z

0 votes

适用于ASP.NET的解决方案

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

{

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

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

@Html.LabelFor(m => m.DateFrom)

@Html.LabelFor(m => m.DateTo)

}

@section scripts {

$(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"

});

});

}

Muflix answered 2020-07-07T15:40:17Z

-1 votes

$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );

$( "#datepicker" ).datepicker();

Nish answered 2020-07-07T15:40:33Z