Load datepicker into modal

Question

Good morning.

I’m not able to load the datepicker inside a modal called via ajax, someone would have an example of code?

MODAL:

<div class="modal fade" id="modalaltera" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Recuperar Chave de Acesso</h4>
        </div>

        <div class="modal-body">
            <form method="POST" id="formulario" name='formulario' action="">
            <label>Dia</label>
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                            <input type="text" name='dia2' class="form-control" id="dia2" placeholder="Selecione a Data" required   >
                        </div>

                        <br>


                        <label for="sel1">Horario</label>
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-clock-o"></i></div>
                            <select class="form-control" id="hora" name="hora" >

                                <option value="" >---</option>

                            </select>
                        </div><br><br> 
            </form>
        </div>

        <div class="modal-footer">


            <script src="<?= base_url() ?>assets/js/input-mask/jquery.inputmask.js"></script>
            <button type="button" class="btn btn-default form_submit" onclick="enviarpass(recemail.value)">ENVIAR PALAVRA CHAVE</button>
        </div>
    </div>
</div>

JS

function modalaltera(){
    $('#modalaltera').modal('show');
    }

$('#dia2').datepicker({
                    format: "dd/mm/yyyy",
                    language: 'pt-BR'
                });

Thank you

Answer 1

Try this solution:

<input type="text" value="" class="form-control" placeholder="00/00/0000" id="dia2" />

Javascript:

$("#dia2").datepicker({
    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']
});