XPages - Field is not a valid date using bootstrap date picker

Question

Getting error as per the title....

I'm using the date time picker as described here: https://xpagesandmore.blogspot.co.uk/2015/06/using-bootstrap-3-datetime-picker.html

Everything works perfectly, date appears in the field in format DD/MM/YYYY except the not valid date validation message.

Date field code:

<xp:div>
    <xp:this.styleClass><![CDATA[#{javascript:"form-group" + ( getComponent("datetimepicker1").isValid() ? "" : " has-error" )}]]></xp:this.styleClass>
    <xp:label styleClass="col-xs-2 control-label" for="datetimepicker1"
        value="${compositeData.fieldLabel}" />
    <div class="col-xs-10">
        <div class="input-group">
            <span class="input-group-addon">
                <xp:text escape="true" id="computedField2"
                    styleClass="${compositeData.faicon}" tagName="i">
                </xp:text>
            </span>


            <xp:inputText type="text" id="datetimepicker1"
                loaded="${!empty compositeData.placeholder}"
                value="#{compositeData.dataSource[compositeData.fieldName]}"
                required="${compositeData.required}">
                <xp:this.attrs>
                    <xp:attr name="placeholder"
                        value="${compositeData.placeholder}">
                    </xp:attr>
                </xp:this.attrs>
                <xp:this.validators>
                    <xp:validateRequired
                        message="#{javascript:compositeData.helpText}">
                    </xp:validateRequired>
                </xp:this.validators>
                            <xp:this.converter>
                                <xp:convertDateTime
                                    pattern="DD/MM/YYYY">
                                </xp:convertDateTime>
                            </xp:this.converter>
            </xp:inputText>

        </div>
        <xp:text escape="true" id="computedField1"
            styleClass="help-block">
            <xp:this.rendered><![CDATA[#{javascript:getComponent("datetimepicker1").isValid() && compositeData.helpText != null && currentDocument.isEditable()}]]></xp:this.rendered>
        </xp:text>
        <xp:message id="message1" for="datetimepicker1"
            styleClass="help-block">
        </xp:message>
    </div>
</xp:div>

Script block code:

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker1}" ).datetimepicker({
locale: 'en-gb',
showTodayButton:true,
showClose: true,
daysOfWeekDisabled: [0,6],
format:('DD/MM/YYYY')
});
});
]]>
</xp:this.value>
</xp:scriptBlock>

I've tried changing the locale to en-us but no difference.

Any idea's greatly appreciated, thanks guys

Answer 1

I'm an idiot!

My converter pattern was DD/MM/YYYY

Changing it to dd/MM/yyyy resolved the issue - Will leave question here should anyone else ever have a brain freeze moment......