jQuery UI DatePicker，获取默认日期的关联输入文本

Question

I'm using Jquery Datepicker UI 1.8.20 with some server-side asp:TextBox (creation). To associate the Datepicker to the textboxes I add a class to them and then did the following after the body tag:

 $('body').on('focus', ".datepicker_input", function() {
 ...
 });

This works fine but now, I'm also populating this text-boxes server-side with a date (in a predefined format dd-MM-yyyy) and I'm trying to put the datepicker default date to be the same of its textbox but so far I haven't been able to do it.

A few tries I made:

 $('body').on('focus', ".datepicker_input", function() {
    $(this).datepicker({
        defaultDate: $.datepicker.parseDate("dd-MM-yy", $(this).value),
 ...
 });

Error: Uncaught Invalid arguments

 $('body').on('focus', ".datepicker_input", function() {
    $(this).datepicker({
        defaultDate: $.datepicker.parseDate("dd-MM-yy", this.value),
 ...
 });

Error: Uncaught Unknown name at position 3

I tried to debug the jquery in chrome to see what $(this) was and I got the window object, so I guess this is the problem. I don't know how to call the associated object to the datepicker...

UPDATE 1 - Full DatePicker code

$('body').on('focus', ".datepicker_input", function() {
    $(this).datepicker({
        defaultDate: $.datepicker.parseDate("dd-MM-yy", $(this).value),
        minDate: 0,
        beforeShowDay: $.datepicker.noWeekends,
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1
    });
$.datepicker.regional['pt-PT'] = {
        closeText: 'Fechar',
        prevText: '',
        nextText: '',
        currentText: 'Hoje',
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro',
                        'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro',
                        'Outubro', 'Novembro', 'Dezembro'],
        dayNames: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        dayNamesMin: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
        weekHeader: 'Sm',
        dateFormat: 'dd-mm-yy'
    };
    $.datepicker.setDefaults($.datepicker.regional['pt-PT']);

Answer 1

Since your textbox is already populated with value, specifying just date format does the job. Here is working jsFiddle

HTML:

<input id="datepicker" class="datepicker_input" type="text" VALUE="05-april-2014"> 
<input id="datepicker" class="datepicker_input1" type="text" VALUE="05-11-2014">         

JS:

$('body').on('focus', '.datepicker_input', function() { 
      $(this).datepicker({dateFormat:"dd-MM-yy"}); 
});
$('body').on('focus', '.datepicker_input1', function() { 
      $(this).datepicker({dateFormat:"dd-mm-yy"}); 
});

Answer 2

Try This:-

$('body').on('focus', '.datepicker_input', function() {
  $(this).datepicker({
    dateFormat: 'dd-MM-yy',
    defaultDate: $(this).val(),
    ...
  });
});

Working DEMO