J3 Issue ?
avatar studio42
studio42
9 Oct 2017

Steps to reproduce the issue

add <?php JHtml::_('calendar', '', 'product_available_date', 'product_available_date'); ?> <input class="inputbox" name="product_available_date" type="text" id="product_available_date" size="18" maxlength="20" value="" />
The javascript files

<script src="/media/system/js/fields/calendar-locales/fr.js"></script>
<script src="/media/system/js/fields/calendar-locales/date/gregorian/date-helper.min.js"></script>
<script src="/media/system/js/fields/calendar.min.js"></script>

are added,
but the script to declare the calendar is missing.
In Joomla 3.7, old calendar (certainly mootool)was used and was working

Expected result

Display the calendar on click the input field(product_available_date)

Actual result

Does not add all the script and calendar do not popup

System information (as much as possible)

Joomla 3.8.1 French+PHP 7.0.1

Additional comments

avatar studio42 studio42 - open - 9 Oct 2017
avatar joomla-cms-bot joomla-cms-bot - change - 9 Oct 2017
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 9 Oct 2017
avatar franz-wohlkoenig franz-wohlkoenig - change - 9 Oct 2017
Category JavaScript
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 9 Oct 2017
avatar franz-wohlkoenig franz-wohlkoenig - change - 9 Oct 2017
Status New Information Required
avatar studio42
studio42 - comment - 9 Oct 2017

I checked the code in /media/system/js/fields/calendar.js.
1st problem, is that new scrip need a <button> but this was not the case before.
All the datas are get from buton, this mean that it's not possible with the new script to popup the calendar on click input field., but i my case, i want that on input click the calendar popup to prevent bad date format entries It's really a bad thing to force to have a button and ni my case the button is here to reset the field, so conflict with the script, so it should be a class="popup-calendar", not a html tag.
If the team can do something more generic, so the calendar can use a simple fields and the data-attributes comes from the input and not form the button ? I really think that data need always to be attached to the right element, in this case the <input>.

avatar dgt41
dgt41 - comment - 9 Oct 2017

3.7 and 3.8 have the exact same calendar!

avatar studio42
studio42 - comment - 9 Oct 2017

Sorry updated from Joomla Joomla! 3.6.5
Before
image
After no calendar.
I have no javascript error. Calendar is not attached as before. So you need to add a plenty of tag to do it work : main container, buttton with calendar data-atttributes...
I have found a solution for my case, i use now html5 date with a fallback pattern, but this is a general issue for all component using JHtml::_('calendar', and is hard to understand for casual users.

avatar dgt41
dgt41 - comment - 9 Oct 2017

@studio42 the JHtml::calendar() renders the exact same field as the JForm. Check https://github.com/joomla/joomla-cms/blob/staging/libraries/src/HTML/HTMLHelper.php#L1082 which actually calls https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/form/field/calendar.php and thus the field should be rendered properly, no need to add extra input field. Please check your code and the actual rendered result in the page

avatar studio42
studio42 - comment - 9 Oct 2017

I don't changed any code.
Joomla 3.6.5 = render nice
Joomla 3.8.1 = render nothing, but load javascript file.
I don't use formfield, i use JHtml::('calendar')
https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/form/field/calendar.php add a button.
layouts/joomla/form/field/calendar.php do not exist in Joomla 3.6.5 and used libraries\joomla\form\fields\calendar.php with JHtml::
('calendar') and loaded mootools calendar and
javascript instance was attached to the input.
SO this is now working completly another way and break all dev using JHtml::('calendar')
I think they had to add a new JHTML eg JHtml::
('JQCalendar'; to prevent this situation because it's not backward and forward compatible and you cannot use it outside jform because the 2 script use different initialisation.

avatar dgt41
dgt41 - comment - 9 Oct 2017

@studio42 can you share your exact code (copy paste), I cannot help you if I'm guessing here. BTW the field is B/C, we didn't broke it

avatar studio42
studio42 - comment - 9 Oct 2017

This code is working in Joomla 3.6.5

<?php JHtml::_('calendar', '', 'product_available_date', 'product_available_date'); ?>
<input class="inputbox" name="product_available_date" type="text" id="product_available_date" size="18" maxlength="20" value=""/>
<button class="btn" onclick="adminForm.product_available_date.value=''" ><i class="bepro bepro-cancel" style="cursor: pointer;font-size: 18px;" ></i></button>

It's a standard form, i don't use Jform because i need to refresh javascript and lazy loading datas ...

avatar ggppdk
ggppdk - comment - 9 Oct 2017

@studio42

please note that JHtml::_('calendar' ...) does both of:

  • adding the needed JS code !
  • creating HTML code of the date field !

in your custom code you are only using its JS code
and you are ignoring the HTML code that gets created (and instead you try to create it manually)

you only need to do

<?php
echo  JHtml::_('calendar', '', 'product_available_date', 'product_available_date',
  '%Y-%m-%d', ' size="18" maxlength="20" ');
?>
<button class="btn" onclick="adminForm.product_available_date.value=''" >
 <i class="bepro bepro-cancel" style="cursor: pointer;font-size: 18px;" ></i
</button>

the above should work in all Joomla versions

(also note that since J3.7.0 the attributes can be an array)
array('size'=>'8', 'maxlength'=>'20')

So your code was inappropriate in the first place,

i do not say that you should do such coding, (in this case you gain nothing to do this, no reason to do it)
but if you do, be ready to for it to be broken in next joomla release and thus needing corrections ...

so there is neither a bug / nor a B/C break

avatar ggppdk
ggppdk - comment - 9 Oct 2017

And actually @dgt41 has answered this already above

no need to add extra input field

avatar studio42
studio42 - comment - 9 Oct 2017

In old JHtml::('calendar'), it was possible to not add the button and use the input..
If i use echo JHtml::
('calendar') the button is displayed and i dont want it. I only want the input.
This is not possible with the new calendar.
I think you don't understand what i explain since the begin. i want display input but not the button!
But with new code, all data-attributes are appended to the button but this should be appended to the input to be forward compatible.

avatar studio42
studio42 - comment - 9 Oct 2017

Here is how it's rendered

<input type="text" id="jform_publish_up" name="jform[publish_up]" value="08-10-2017 23:31:29" size="22" data-alt-value="08-10-2017 23:31:29" autocomplete="off" aria-invalid="false" data-local-value="08-10-2017 23:31:29">
<button type="button" class="btn btn-secondary" id="jform_publish_up_btn" data-inputfield="jform_publish_up" data-dayformat="%d-%m-%Y %H:%M:%S" data-button="jform_publish_up_btn" data-firstday="1" data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time-24="24" data-only-months-nav="0"><span class="icon-calendar"></span></button>

Here how it should be for me
<input type="text" id="jform_publish_up" name="jform[publish_up]" value="08-10-2017 23:31:29" size="22" data-alt-value="08-10-2017 23:31:29" autocomplete="off" aria-invalid="false" data-local-value="08-10-2017 23:31:29" data-inputfield="jform_publish_up" data-dayformat="%d-%m-%Y %H:%M:%S" data-button="jform_publish_up_btn" data-firstday="1" data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time-24="24" data-only-months-nav="0">
So you can use own "echo" and the javascript not fail to initialise the input
And button
<button type="button" class="btn btn-secondary" id="jform_publish_up_btn"><span class="icon-calendar"></span></button>

avatar ggppdk
ggppdk - comment - 10 Oct 2017

I understand that such usage was possible

What i meant is that

  • there was no guarantee of the way that you were using it

i meant that the js and the html that the call is producing go together

i have been in similar situation with the calendar field,
since i am duplicating calendar fields at browser side

anyway you can just update your code, and use CSS + JS to do the manipulation that you need

avatar studio42
studio42 - comment - 10 Oct 2017

I have changed and removed the Joomla core calendar.
My problem is not to do my component compatible, it work with last update.
It's only not a "standard" way to attach datas, you are so strict in the PHP commits for the core file, but the javascript and html for Jhtml calendar do not follow minimal rules and should never add the data-attributes to the button.
If you don't want change it, i close the issue, else please check to change the javascript code so button are never needed.
With HTML5 (web component spec) you can now create custom html tags and this is not possible if you need the "button".

avatar ggppdk
ggppdk - comment - 10 Oct 2017

ok, I see your point about need for customizing these,
but i can not comment on them, because i am not the author of the new calendar

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 10 Oct 2017

@ggppdk isn't it @dgt41?

avatar dgt41
dgt41 - comment - 10 Oct 2017

I think you don't understand what i explain since the begin. i want display input but not the button!
But with new code, all data-attributes are appended to the button but this should be appended to the input to be forward compatible.

The data attributes are appended in the button because that is the element that reveals the calendar.
By the way you still can do whatever you want, just override the calendar.php layout...

avatar studio42
studio42 - comment - 10 Oct 2017

I don't need any change, i already removed the Html calendar, it's a point of view on how it should be.
If you mean that is false, then simply forget it.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 11 Oct 2017

@studio42 if this Issue is discussed enough please close it, thanks.

avatar studio42
studio42 - comment - 13 Oct 2017

HI franz-wohlkoenig,
Thanks to read the discuss and check with the team having write this code.
The point is not if i have a issuer, but if in general, the code should not be changed.
I'm certainly not the best coder, but i try to have some logic.
If you really mean it's right, then give me the answer from team master and i close immediately the issue. I don't think that this should be closed for now.
Note that i know infograf768, but i'm not this guy ;)

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 22 Oct 2017

@wilsonge your Opinion as Release Lead 3.9/4.0?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18291.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 26 Dec 2017

Reminder for @wilsonge.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18291.

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 27 Jan 2018

Reminder for @wilsonge.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/18291.

avatar brianteeman brianteeman - change - 25 Mar 2018
Labels Added: J3 Issue
avatar brianteeman brianteeman - labeled - 25 Mar 2018
avatar franz-wohlkoenig franz-wohlkoenig - change - 7 Apr 2018
Status Information Required Discussion
avatar brianteeman brianteeman - change - 18 Aug 2018
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2018-08-18 12:00:46
Closed_By brianteeman
avatar brianteeman
brianteeman - comment - 18 Aug 2018

Closed as discussed offline with @wilsonge

avatar brianteeman brianteeman - close - 18 Aug 2018

Add a Comment

Login with GitHub to post a comment