21 Jan 2019, 10:43
OK, So i've gone through this widget with a fine tooth comb - this entire thing is broken.
I have no idea how you are making it work but I'm guessing it's got to do with everyone else you have on the showcase page.
Putting p:datepicker into it's own file with nothing else, you can never make it work,
If you can't replicate it then what it is downloadable from the site is not what you are using, in which case please give us access to what you are using to try replicate with.
If your locale is anything but the default, YOU HAVE TO INCLUDE THE LOCALE in your template (WHYYYYYYYY, make the locale optional)
```
<h:body styleClass="login-body" style="width:100%;height:100%">
<h:outputScript type="text/javascript">
PrimeFaces.locales['en_ZA'] = {
closeText: "Done",
prevText: "Prev",
nextText: "Next",
currentText: "Today",
monthNames: [ "January","February","March","April","May","June",
"July","August","September","October","November","December" ],
monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
dayNames: [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ],
dayNamesShort: [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
dayNamesMin: [ "Su","Mo","Tu","We","Th","Fr","Sa" ],
weekHeader: "Wk",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ""
};
</h:outputScript>
<p>Inline with 3 months selection</p>
<h:form id="requiredstuff">
<p:outputLabel for="multi2" value="Multiple Months:" />
<p:datePicker id="multi2" selectionMode="multiple" numberOfMonths="3" inline="true" showIcon="true" showButtonBar="true"/>
</h:form>
<p>You should see a date picker above this guy</p>
</h:body>
```
What I've done to get around it is the following :
1) Replace the custom jquery ui with the stock standard
2) Add in migrate cause it's a JQuery 1.12 library and there are too many changes to simply use JQuery 3 without modifications and without migrate.
I'll speak to melloware about this because it is a genuine concern
3) Override the DatePicker and DatePickerRenderer to do the right things.
```
<h:outputScript library="primefaces" name="jquery/jquery.js"></h:outputScript>
<h:outputScript library="js" name="jquery-migrate-3.0.1.min.js"></h:outputScript>
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js"></h:outputScript>
<h:outputScript library="js" name="jquery-ui.min.js"></h:outputScript>
```
Then i completely ignore the PF rendered script, and update the javascript caller from datePicker() to datepicker().
I just ignored PrimeFaces output and rendered what is required from the API, they are nothing alike and I need this to work.
```
<h:form id="requiredstuff">
<p:outputLabel for="multi2" value="Multiple Months:" />
<p:datePicker id="multi2" selectionMode="multiple" numberOfMonths="3" inline="true" showIcon="true" showButtonBar="true"/>
</h:form>
<!-- Just do the script manually. -->
<script>$('[id="requiredstuff:multi2_input"]').datepicker({selectionMode:'mutliple',numberOfMonths:3,showIcon:true,showButtonBar:true});</script>
```
Then it works.
Please use the first snippet to replicate the broken datepicker.
Thanks