xpages bootstrap date picker error save value

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.