Time lost in calendar inline mode

UI Components for JSF
jina_lu
Posts: 24
Joined: 17 Jan 2013, 12:35

24 Apr 2013, 10:00

I want to use inline calendar, but getting "- dashboardForm:j_id1090828255_301fd875_1: '2013-04-24' could not be understood as a date and time. Example: 2013-04-24 10:27 ". Anyone had solved such problem before?

My xhtml:

Code: Select all

<p:calendar pattern="yyyy-MM-dd HH:mm" mode="inline" value="#{obj.dateFrom}"/>
dateFrome is java.util.Date variable.

Thanks
Primefaces 5.1
Tomcat 7.0.50

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

24 Apr 2013, 10:27

jina_lu wrote:I want to use inline calendar, but getting "- dashboardForm:j_id1090828255_301fd875_1: '2013-04-24' could not be understood as a date and time. Example: 2013-04-24 10:27 ". Anyone had solved such problem before?

My xhtml:

Code: Select all

<p:calendar pattern="yyyy-MM-dd HH:mm" mode="inline" value="#{obj.dateFrom}"/>
dateFrome is java.util.Date variable.

Thanks
Use a f:convertDateTime tag instead of the pattern attribute.
The pattern attribute is used to format the Date selected on the client side. If you use a backing bean that has a Date property for the calendar value then you need to use a converter tag as suggested. In this case you don't use the pattern attribute.
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

jina_lu
Posts: 24
Joined: 17 Jan 2013, 12:35

24 Apr 2013, 11:42

I tried the andyba suggested way. In this case user won't have possibility to chose specific time.
Looks like a bug of "inline" mode ignoring time as components works fine in standard mode. Any other ideas?
Primefaces 5.1
Tomcat 7.0.50

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

24 Apr 2013, 14:36

jina_lu wrote:I tried the andyba suggested way. In this case user won't have possibility to chose specific time.
Looks like a bug of "inline" mode ignoring time as components works fine in standard mode. Any other ideas?
Please refer to the User Guide and the Showcase, especially the Time Picker examples.

Calendars are really only about Date and not about Date and Time and this is especially true of inline so no, this is not a bug.

The Time Picker feature of p:calendar does allow you to have a Calendar and Clock instead of just a Calendar for the Date.

Remember: Calendars deal with Dates, not Date + Time.
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

jina_lu
Posts: 24
Joined: 17 Jan 2013, 12:35

24 Apr 2013, 15:00

I should disagree with you andyba that calendar is only for date.
DateTime in http://www.primefaces.org/showcase/ui/calendarTime.jsf showcase shows exactly the usage I'm taking about.
Without "inline" mode calendar deals with date and time selection with no problem. Are you saying that "inline" mode doesn't support such behavior?
Primefaces 5.1
Tomcat 7.0.50

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

24 Apr 2013, 16:12

jina_lu wrote:I should disagree with you andyba that calendar is only for date.
DateTime in http://www.primefaces.org/showcase/ui/calendarTime.jsf showcase shows exactly the usage I'm taking about.
Without "inline" mode calendar deals with date and time selection with no problem. Are you saying that "inline" mode doesn't support such behavior?
For an analogy to illustrate my point.

Go and find a Calendar pinned to a wall. Keep looking at it until you see a clock on it. Come back and tell me, again, I am wrong when I say that an inline Calendar is only useful for Date and not Date + Time.
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

rikup
Posts: 459
Joined: 29 Jan 2013, 14:27

24 Apr 2013, 16:41

I also think that this is a limitation as it works in popup mode. Although you can't find a wall calendar with times, it is still usefull in some cases to select time also. I could think of event scheduling, announcements with specific start/end times, etc. In some of these schedule is better, but not always. Personally I like to pick time with date because both are still stored in same object so it requires less code to do date/time picks in same time.
PrimeNG 2.0.0
Angular 2.4.5

User avatar
andyba
Expert Member
Posts: 2473
Joined: 31 Mar 2011, 16:27
Location: Steinfeld, near Bremen/Osnabrück, DE
Contact:

24 Apr 2013, 21:06

Ok put this another way. If inline Calendar was meant to work with Datetimes it would have a feature for this.
But it doesn't.
Now you could argue that this is bug, which it isn't, or that it is a limitation which is reasonable.

I suggest you create an issue requesting this as a new feature (which as an Elite member I can vote on).
PF 4.x (Elite versions), PF 5, Pf 5.1, PF 6.0
Glassfish 4.1, Mojarra 2.x, Java 8, Payara 4.1.1.
If you haven't read the forum rules read them now

baarney
Posts: 2
Joined: 12 May 2015, 01:33

12 May 2015, 01:54

Hi,

New to PF and I see this is two years old, but just wondering if anyone has looked at this? I can't see anything relevant in the community issues.

I'd be happy to look at it - just need a few pointers on where the problem might be. It appears to be a client side problem, as using a format string of "dd/MM/yyyy HH:mm a" and looking at the posted data:

* The popup version sends both the date and time: "12/05/2015 09:30 am"
* The inline version only sends the date part: "12/05/2015"

I've had a look at Calendar.js, but can't really see anything in there where the post data is created. Is this done in PF, or somewhere in the included jQuery?

Thanks,

baarney
Posts: 2
Joined: 12 May 2015, 01:33

19 May 2015, 04:46

Well, got it working. Needed two parts:

* Updating the time picker with the current time when showing the page.
* Adding the time data to the post when writing the data to the form.

Not sure this is the best way of doing it - in particular, for the post data would probably be better to get the time picker instance itself and get the value from that rather than just use the HTML text, but I couldn't work out how to do that, and this seems to work ok for me.

Haven't tested it beyond what I actually need, but here's a patch if anyone is interested.

Code: Select all

Index: src/main/resources/META-INF/resources/primefaces/calendar/calendar.js
===================================================================
--- src/main/resources/META-INF/resources/primefaces/calendar/calendar.js       (revision 12491)
+++ src/main/resources/META-INF/resources/primefaces/calendar/calendar.js       (working copy)
@@ -33,6 +33,14 @@
         //Setup timepicker
         var hasTimePicker = this.hasTimePicker();
         if(hasTimePicker) {
+            // parse f.defaultDate into cfg.hour/minute/second
+            if (cfg.defaultDate) {
+                // remove the date from the format and default value, parse the results
+                // and extend the config with the parse results
+                var timeFormat = cfg.dateFormat.substring(cfg.dateFormat.indexOf(' ') + 1);
+                var defaultTime = cfg.defaultDate.substring(cfg.defaultDate.indexOf(' ') + 1);
+                $.extend(cfg, $.datepicker.parseTime(timeFormat, defaultTime));
+            }
             this.configureTimePicker();
         }
 
@@ -130,8 +138,13 @@
                 _self.fireDateSelectEvent();
             }
             else {
-                var newDate = $.datepicker.formatDate(_self.cfg.dateFormat, _self.getDate());
+                // probably better to find timepicker object and use formattedDateTime/Time values
+                var newDate = _self.cfg.timeOnly ? "" : $.datepicker.formatDate(_self.cfg.dateFormat, _self.getDate());
 
+                if (_self.cfg.timeFormat) {
+                    newDate += " " + _self.jqEl.find('.ui_tpicker_time')[0].innerText;
+                }
+
                 _self.input.val(newDate);
                 _self.fireDateSelectEvent();
             }
@@ -233,4 +246,4 @@
         return false;
     }
 
-});
\ No newline at end of file
+});
Primefaces 5.2, JSF 2.2, Glassfish 4.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 36 guests