Question

我有一个jQuery datepicker，它根据卖家的语言偏好进行了本地化。每个日期选择器自定义都有不同的日期格式，但我希望在提交表单时使用特定格式进行解析。我试图在日期选择器上使用altFormat将其设置为'mm / dd / yy'，但我不希望以显示给用户的格式显示日期。有没有办法做到这一点。即有没有办法在创建javascript日期对象时使用不同的日期格式从datepicker评估到相同的日期？

Answer 1

为什么您不想将altFormat与altField一起使用？

在这里的一个简单示例中，您可以以所需格式mm/dd/yy存储和访问日期，同时以“他的”所需格式向用户显示该日期。请参阅我的jsfiddle开启按钮，单击显示的格式更改，但altField中的格式不会。

<input type="text" id="datepicker">
<input type="button" id="changeFormat" value="Change!">
<!-- this would be a hidden input -->
<input type="text" id="altFormat">

$(document).ready(function () {

    $('#datepicker').datepicker({
        dateFormat: "dd.mm.yy",
        altFormat: "dd/mm/yy",
        altField: '#altFormat'
    });
    $('#changeFormat').click(function () {
        //changes the dateformat the user sees
        $('#datepicker').datepicker('option', 'dateFormat', 'dd-mm-yy');
        console.log($('#datepicker').datepicker('option', 'altFormat'));
    });
});

（（在第一个例子中意外使用了dd / mm / yy而不是mm / dd / yy））

修改

此working example将mm/dd/yy格式的日期存储在data-altformat属性中，您可以使用
轻松访问该属性
$('#datepicker').data('altformat'); //outputs e.g. 05/31/2013

onSelect我通过执行
将currentDate的值存储在属性中
onSelect: function () { //gets your desired format var altFormat = $(this).datepicker('option', 'altFormat'); //get current date in user format var currentDate = $(this).datepicker('getDate'); //format from user format to desired format var formatedDate = $.datepicker.formatDate(altFormat, currentDate); //set data-* attribute to formatedDate $('#datepicker').data('altformat', formatedDate); $('#altFormat').val(formatedDate); }

此方法的优点是您不再需要隐藏输入。我希望这对你有帮助。

<强> EDIT2

注意到您new Date()
不需要.datepicker('getDate')

Answer 2

好点，SirDerpington，

然而，我找不到功能齐全的MVC解决方案。我们的想法是使用altFormat进行实际数据提交和dateFormat - 仅用于显示（考虑UI文化或只是一种喜欢的预定义格式）。

最后我有我的解决方案，在这里（唉，基于目前的名称约定）：

@model System.DateTime ?
@Html.Hidden("", Model.HasValue ? string.Format("{0:yyyy-MM-dd}", Model.Value) : string.Empty)
@Html.TextBox("", Model.HasValue ? string.Format("{0:dd.MM.yyyy}", Model.Value) : string.Empty, new { @class = "date", Id = "DatePicker" + ViewData.ModelMetadata.PropertyName, Name = "DatePicker" + ViewData.ModelMetadata.PropertyName })

<script type="text/javascript">
$(document).ready(function () {
    $.validator.methods.date = function (value, element) {
        return $("form").validate().element('#' + this.id.replace('DatePicker', ''));
    };
    $('.date').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd.mm.yy',
        altFormat: 'yy-mm-dd',
        onClose: function () {
            var altFormat = $(this).datepicker('option', 'altFormat');
            var dateFormat = $(this).datepicker('option', 'dateFormat');
            var currentDate = $(this).datepicker('getDate');
            var formattedDate = $.datepicker.formatDate(altFormat, currentDate);
            $('#' + this.id.replace('DatePicker', '')).val(formattedDate);
        }           
    });
});
</script>

[MetadataType(typeof(EmployeeMetadata))]
public partial class Employee
{
}

class EmployeeMetadata
{
    [DataType(DataType.MultilineText)]
    public string Description { get; set; }
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [Display(Name = "Employment Date")]
    public Nullable<System.DateTime> EmploymentDate { get; set; }
}

UPD：我现在已经安装了Globalize来简化这些事情。但我仍然无法按预期工作。问题是Globalize ALREADY包含所有文化设置。但似乎DatePicker需要一个单独的“每个文化”区域文件（具有文化设置数组），实际上，它包含与Globalize相同的设置！真傻！所有控件的全球文化设置应该相同！我仍然无法相信我将不得不寻找特定的文化datepicker文件并进行重复... :(

jQuery datepicker altFormat未显示

2 个答案: