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