javascript - jQuery datepicker altFormat 不显示

Question

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

Answer 1

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

在此处的一个简单示例中，您可以以所需格式存储和访问日期，mm/dd/yy同时以“他的”所需格式向用户显示日期。请参阅我的jsfiddle On 按钮单击显示的格式更改，但 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））

编辑

此工作示例将日期 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);
}

这种方法的优点是您不再需要隐藏输入。我希望这可以帮助你。

编辑2

new Date()只是注意到你不需要.datepicker('getDate')

Answer 2

好点，德平顿爵士，

但是我找不到一个功能齐全的 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 来简化事情。但我仍然无法使其按预期工作。问题是全球化已经包含所有文化设置。但似乎 DatePicker 需要一个单独的“每种文化”区域文件（带有文化设置数组），实际上，它包含与 Globalize 相同的设置！太傻了！所有控件的全局文化设置都应该相同！我仍然无法相信我将不得不寻找特定的文化日期选择器文件并进行此复制... :(