Bootstrap datepicker: The format is changed to default

Question

I want to have a datepicker with the format dd.mm.yyyy . The inputField looks like this:

<h:inputText value="#{eventController.startdateAgenda}" styleClass="datepicker form-control" id="id_startdate" converterMessage="Example: 26.05.2015" >
    <f:convertDateTime pattern="dd.MM.yyyy"/>
</h:inputText>

The JavaScript part:

$(document).ready(function () {
    $('.datepicker').datepicker({
                format: 'dd.mm.yyyy',
                autoclose: true
    });
});

That works for the first time. But when I clear and fill the inputText, the date will be formatted "mm/dd/yyyy" .

Clicking on this commandLink fills the field:

<h:commandLink>
    <f:ajax onevent="function(data){if (data.status === 'success'){$('.datepicker').datepicker(); setDateFormat(); }}" listener="#{eventController.editAgendaEntry(a)}" execute="@this" render=":agendaData agendaTable"/>
    <span id="pen" class="add-on glyphicon glyphicon-pencil" aria-hidden="true" align="right"></span>
</h:commandLink>

How can I fix it?

UPDATE: When I refresh the page, the format is right again.

Answer 1

I solved it now by adding this

String js = "$('.datepicker').datepicker({format: 'dd.mm.yyyy', autoclose: true});"; 
RequestContext.getCurrentInstance().execute(js);

to every validator method and submit method.