公历日历无法在jsf中以正确的格式显示

Question

我有一个要求，即有一个文本框，单击此框会弹出日历，并有一个复选框。在单击文本框时取消选中该复选框时，它必须显示一个公历，而当未选中时，必须显示伊斯兰日历。 它按预期显示伊斯兰日历，但是当将文本框切换为公历时，月份和年份将按预期显示，但是某些文本仍以阿拉伯语显示，并且对齐方式也像阿拉伯语一样是RTL。

我在这里使用了一些资料：http://keith-wood.name/calendarspicker.html#

下面是我的代码：

HTML代码：

<p:inputText value="#{gen.dateAcc}" id="dateAcc"
onchange="changeEVENT();" styleClass="calenderType"
disabled="#{gen.disableGen}"  readonly="false">
<f:convertDateTime pattern="dd/mm/yyyy"/> 
</p:inputText>
<p:selectBooleanCheckbox style="valign:bottom;" value="false" id="toggle1" 
disabled="#{gen.disableGen}"  
onchange="toggleCalender(this,'dateAcc','hijri')"  widgetVar="hijri" />

JS：

function setGregorianCal(){
var classtype = '.calenderType'; 
$(classtype).calendarsPicker($.extend({
     localNumbers: true,
     dateFormat:'dd/mm/yyyy'
    }
    ));
  }


function toggleCalender(obj,target,widgetVar){
    var objId = obj.id;
    var checkVal= PrimeFaces.widgets[widgetVar].input.is(':checked'); 
    var lastIndex = objId.lastIndexOf(":");
    var initialId = objId.slice(0, lastIndex);
    var targetId= '#'+initialId+':'+target;
    var finalID = targetId.replace(/:/g, '\\:');

     if(checkVal){
         $(finalID).calendarsPicker('destroy');
            $(finalID).calendarsPicker($.extend({
                calendar: $.calendars.instance('UmmAlQura'),
                 localNumbers: true,
                 dateFormat:'dd/mm/yyyy'
                },
                $.calendarsPicker.regionalOptions['ar']
                ));
     }else{
         $(finalID).calendarsPicker('destroy');
            $(finalID).calendarsPicker($.extend({
                calendar: $.calendars.instance(),
                 localNumbers: true,
                 dateFormat:'dd/mm/yyyy'
                }
            ));
     }
}

下面是屏幕截图：

格里高利历：

伊斯兰日历：