DatePicker JS-Error 7.0.RC1

UI Components for JSF
Post Reply
benjamin.nowak
Posts: 4
Joined: 13 Feb 2018, 11:56

17 Jan 2019, 18:09

I have an issue on all browser using DatePicker component with Primefaces 7.0.RC1. I am using the following code, very similar to PrimeFaces showcase.

Code: Select all

<h:form id="form">
		<h:panelGrid columns="2" cellpadding="5">
			<p:outputLabel for="inline" value="Inline:" />
			<p:datePicker id="inline" value="#{calendarView.date1}" inline="true" />
			
			<p:outputLabel for="popup" value="Popup:" />
			<p:datePicker id="popup" value="#{calendarView.date2}" />
		</h:panelGrid>
	</h:form>
I'm getting the following javascript error:

Image

I have the same issue with PrimeFaces 6.2.14

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

18 Jan 2019, 13:22

Unfortunately, I couldn't replicate it. Please attach a sample maven project for us to replicate.

GedMarc
Posts: 5
Joined: 18 Jan 2019, 14:55

18 Jan 2019, 14:57

Happens because the jquery-plugins.js file is not included when using p:datePicker... including p:calendar fixes it because it includes the script

Fix by adding it into the head section :

```
<h:outputScript library="primefaces" name="jquery/jquery-plugins.js"></h:outputScript>
```

This is in 6.2.14 release as well

GedMarc
Posts: 5
Joined: 18 Jan 2019, 14:55

18 Jan 2019, 14:58

<h:outputScript library="primefaces" name="jquery/jquery-plugins.js"></h:outputScript>

is what is missing, the p:datePicker does not include the plugins script when referencing,

6.2.14 as well

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

18 Jan 2019, 15:46

The jquery-plugins issue is fixed for 6.2.15. But, I couldn't replicate the main issue.

benjamin.nowak
Posts: 4
Joined: 13 Feb 2018, 11:56

20 Jan 2019, 15:59

Thanks for the fast reply. I use now p:calendar and everything works fine.

GedMarc
Posts: 5
Joined: 18 Jan 2019, 14:55

21 Jan 2019, 08:48

Hi,

Please don't close or do any more releases until we sort this one out :) It is a legit issue.

There is also very incorrect HTML being produced for inline that I'll post my custom component fix for as well for review,

Thanks

Affects 6.2.14 and the output script resolves referencing errors but the widget is not ready for production in any form.

GedMarc
Posts: 5
Joined: 18 Jan 2019, 14:55

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

GedMarc
Posts: 5
Joined: 18 Jan 2019, 14:55

21 Jan 2019, 16:45

Ok so it's definitely the JS, and encodeEnd, and and and and, there's a lot broken.
I've put together a working one that we can use, but its definitely not "lint"

Problem 1: encodeEnd does not cater for lists (multiple & range)
```
Description: javax.faces.FacesException
Message: Value could be either String or java.util.Date
javax.faces.FacesException: Value could be either String or java.util.Date
at org.primefaces.util.CalendarUtils.getValueAsString(CalendarUtils.java:136)
at org.primefaces.util.CalendarUtils.getValueAsString(CalendarUtils.java:55)
at org.primefaces.component.calendar.BaseCalendarRenderer.encodeEnd(BaseCalendarRenderer.java:59)
```
I had to override the method in DatePicker encodeEnd() and fix to allow lists

Problem 2 : The JS rendered is wrong.

I had to rewrite the encodeMarkup, encodeInput and encodeScript methods. I did not do this the pretty way.
I am not using the PF widget library because I don't want to go through that hassle so am rendering it myself.
Open the DatePickerRenderer class from the attached zip.

Problem 3 : The dependency libraries are wrong. Not including the below will only render the time widget and nothing else
Because of JQuery 3 and that you are using JQueryUI 1.12.1 you have to include the migrate library, not including it isn't the best option.
```
<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>
```

Problem 4 : The range selection option
I've spent an entire day on just getting it working for our purposes, so I'm not going to start on this, I'll leave this to you guys to sort out.

End of the day it really looks like this widget never went through any test cycle.
I mean not including required JS (-plugins.js), the html was incorrect and JS that PF is running isn't right.

Please can we fix this widget up? It really is a winner business-case wise, but it just doesn't work and requires a lot of fiddling to make it work.

Oh, you can't upload zips.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

21 Jan 2019, 17:04

discussed with @GedMarc. I asked him to create individualy issues on the Github page for each issue so they can be debugged and fixed.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 12 guests