xpages bootstrap date picker error save value - xpages

Question

I have used from Bootstrap4XPages the datepicker tool.
But I have a this problem
In the backend the date field is always set in January
You can try too into the online demos if you click***set to read mode*** after you choose from calendar picker ...in read mode you see a wrong value.
For example if I choose 12-02-2015 (12 february 2015)
the saving value is always ....12 January 2015...every month is set to January...
Have you any suggest?
UPDATED SOURCE CODE OF THE CUSTOM CONTROL from Bootstrap4XPages
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<!--
note: this date picker depends on a number of files: - bootstrap 3+ - bootstrap-datepicker
(https://github.com/eternicode/bootstrap-datepicker) - jquery
-->
<!-- js & css for plugin -->
<xp:this.resources>
<xp:script
src="/eternicode-datepicker-1.3/js/bootstrap-datepicker.js"
clientSide="true">
</xp:script>
<xp:styleSheet
href="/eternicode-datepicker-1.3/css/datepicker3.css">
</xp:styleSheet>
</xp:this.resources>
<xp:text
escape="true"
id="computedField1"
value="#{compositeData.fieldDataSource[compositeData.fieldName]}"
rendered="#{javascript:!compositeData.fieldDataSource.isEditable()}">
<xp:this.converter>
<xp:convertDateTime
type="date"
dateStyle="full"></xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:div
styleClass="input-group date"
id="dateC"
rendered="#{javascript:compositeData.fieldDataSource.isEditable()}">
<xp:inputText
styleClass="form-control"
size="16"
id="inputDatum"
value="#{compositeData.fieldDataSource[compositeData.fieldName]}">
<xp:this.attrs>
<xp:attr
name="placeholder"
value="#{javascript:compositeData.dateFormat.toLowerCase()}">
</xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime
type="date"
pattern="${compositeData.dateFormat}">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span
class="input-group-addon">
<i
class="glyphicon glyphicon-calendar"></i>
</span>
</xp:div>
<xp:scriptBlock
id="scriptBlock2">
<xp:this.value><![CDATA[
var options = {};
if ( null != "#{compositeData.options}" ) {
options = #{javascript:toJson(compositeData.options)};
}
options.format = "#{compositeData.dateFormat}";
$(function(){
//initialize date picker
x$('#{id:dateC}').datepicker(options);
});
]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
and this is the code into XPages
<xc:ccBS_DatePicker
dateFormat="dd-mm-yyyy"
fieldDataSource="#{document1}"
fieldName="data">
<xc:this.options><![CDATA[#{javascript:return {
daysOfWeekDisabled: "0,6",
autoclose: true,
todayBtn: "linked",
todayHighlight: true
}}]]></xc:this.options>
</xc:ccBS_DatePicker>

Answer 1

The issue was caused by a bug in the Bootstrap4XPages demo database: the date format for the converter on the custom control that embeds the datepicker was specified as dd-mm-yyyy. That should have been dd-MM-yyyy (with a capital M): the same standard as the Java SimpleDateFormat class uses.
The datepicker that is used in the demo database is this one by eternicode. That uses a lowercase m to specify the date format when configuring it.
I've updated the demo database to deal with this: in the custom control you have to specify the format you want to use using the Java syntax (e.g. 'dd-MM-yyyy'). In the custom control where I pass the options to the date picker, I modify the case to the correct format.