jQuery datepicker altFormat not displayed

Question

I have a jQuery datepicker that is localized based on the language preferences of the seller. Each datepicker customization has a different date format but I want the input whe

Answer 1

Good point, SirDerpington,

however I could not find a fully functional MVC solution for this. The idea was to use altFormat for actual data submitting and dateFormat - just for displaying (taking into consideration UI culture or just a predefined format one likes).

Finally I have my solution, here it is (alas, based on name conventions so far):

@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: I have now installed Globalize to simplify the things. But I still cannot make it work as expected. The matter is Globalize ALREADY contains all culture settings. But seems like DatePicker requires a separate "per culture" regional file (with arrays of culture settings), that, in fact, contains the same settings as Globalize! It's silly! Global culture settings should be the same for all controls! I still cannot believe I would have to look for specific culture datepicker files and make this duplication... :(

Answer 2

Why do you not want to use altFormat with altField ?

In a simple example here you can store and access the date in your desired format mm/dd/yywhile showing it to the user in "his" desired format. See my jsfiddle On button click the shown format changes but the format in the altField doesn't.

<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'));
    });
});

((accidentally used dd/mm/yy instead of mm/dd/yy in the 1st example))

EDIT

This working example stores the date in mm/dd/yyformat in the data-altformat attribute which you can easily access with

$('#datepicker').data('altformat'); //outputs e.g. 05/31/2013

onSelect I store the value of the currentDate in the attribute by doing

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);
}

The advantage with this method is that you don't need a hidden input anymore. I hope this may help you.

EDIT2

Just noticed that you don't need new Date() with .datepicker('getDate')