1

jQuery datepicker has a function called altFormat, which allows you to display a date format to the user, while using another as value.

How do I show 01/01/1970 to user while having 1970-01-01 as value?

Example

$(document).ready(function(){
    $('.pickadate').datepicker({
       format: "yyyy-mm-dd",
       language: "pt-BR",
       daysOfWeekDisabled: [0,6],
       autoclose: false,
       todayHighlight: true
    }).on('changeDate', function(e){
        $(this).val(e.format('dd/mm/yyyy')); //My pifious tries
    });
    $('.pickadate').on('hide', function(e) {
        $(this).val(e.format('dd/mm/yyyy'));
    });
});
Dayan
  • 7,634
  • 11
  • 49
  • 76
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86

2 Answers2

0

Allright, so I got myself running this way:

CSS:

.pickadate {
    color: #FFF;
}
.show_date_to_user {
    display:none;
    position: relative;
    top: -25px; /* You might have to adjust this */
    left: 10px;
    height:0;
    float:left;
}

jQuery:

$(document).ready(function(){
    $('.pickadate').datepicker({
       format: "yyyy-mm-dd",
    })
    $('.pickadate').after('<div class="show_date_to_user"></div>');
    $('.pickadate').on('changeDate', function() {
        var data = $(this).val();
        var data = data.split('-').reverse().join('-');
        var data = data.replace(/-/g,"/");
        $(this).nextAll('.show_date_to_user').css("display","inline-block").html(data);
    });
});

What this does:

  1. Make datepicker's date invisible (#FFF)
  2. Create a new div to show the date to the user, this way we can mess with it without messing the input value
  3. When datepicker changes value, it searches for the closest "show_date_to_user" div and populate it with the date
  4. Then it inverts the order (01-01-1970 instead of 1970-01-01)
  5. And then it just replaces "-" with "/"
  6. The final result is displaying 01/01/1970, without messing input values
Lucas Bustamante
  • 15,821
  • 7
  • 92
  • 86
0

jQuery ui datepicker supports this behavior: You will need two inputs:

  • One to store the value (hidden)
  • Other to show the value to the user

http://jqueryui.com/datepicker/#alt-field

Rodrigo
  • 1