jQuery UI - Datepicker - Use even with async content

by Salustiano Silva

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" class="datepicker"> <button>+</button>

JavaScript

// Opções para o Datepicker
var options = {
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']
};

// Controlo para instanciar e/ou apresentar o datepicker
$("body").on("click", ".datepicker", function(){
    
    var $this = $(this);
    
    if (!$this.hasClass("hasDatepicker")) {
        $this.datepicker(options);
    }
    
    $this.datepicker("show");
});


// Gerar elementos simulando chamada Ajax
$('button').on("click", function(){ $('body').append($('<input/>').addClass('datepicker'))});