web-dev-qa-db-fra.com

Remplir le champ Calendrier Joomla par jQuery ne fonctionne pas

J'essaie de renseigner le champ du formulaire d'agenda en utilisant jQuery en fonction des valeurs de l'autre champ. J'utilise JHTML::calendar pour ça. Lorsque la valeur est définie via php tout fonctionne correctement pour moi. Mais lorsque j'essaie de le définir via jQuery, il affiche la valeur, mais lorsqu'il est soumis, le champ devient vide. Bien que, lorsque j'utilise l'onglet (ou le focus), la valeur de la date est enregistrée correctement.

Voici mon code -

via PHP 

<?php if($session->get('ssdate')): $dateValue = $session->get('ssdate'); endif; ?>
<?php echo JHTML::calendar($dateValue, 'sdate', 'sdate', '%d-%m-%Y'); ?>

Via jQuery 

//data.match_date is in format 01-10-2017
jQuery('#rq_form input[name=sdate]').val(data.match_date);

Je me suis référé à ce post et j'ai essayé de modifier le format en aaaa-mm-jj et de définir la valeur, mais là encore, il reste vide.

Référence: https://github.com/jquery/jquery-mobile/issues/2755

Modifier le format de la date et définir la valeur 

var d = new Date(jQuery('#rq_form input[name=sdate]').val()),
var dateValue = d.split("-").reverse().join("-");
//dateValue format = 2017-10-01

jQuery('#rq_form input[name=sdate]').val(dateValue);
jquerycalendar
1
Liz.

J'ai remarqué un changement dans le widget de calendrier dans Joomla 3.8. Outre la définition de la valeur via val (), je devais également définir l'attribut data-alt-value. Sinon, la validation échouerait. Donc, dans votre exemple,

jQuery('#rq_form input[name=sdate]').val(dateValue);
jQuery('#rq_form input[name=sdate]').attr('data-alt-value',dateValue);
1
Dan Cogliano

J'ai trouvé un moyen de faire ce que vous cherchez, mais c'est un peu hacky!

Quand vous appelez JHtml::_( 'calendar', . . _ Joomla rend une div avec la classe 'field-calendar' dans votre document et ajoute media/system/js/fields/calendar.js à la tête. Le JavaScript crée ensuite des objets JoomlaCalendar appelés _joomlaCalendar et les ajoute à tous les divs avec la classe 'field-calendar'.

Si vous pouvez obtenir le div avec la classe 'field-calendar', vous pouvez alors obtenir et manipuler le _joomlaCalendar objet, régler la date et l'heure. Avec jQuery, ceci ressemblerait à ceci:

var calendarDiv = jQuery('.field-calendar')[0];
var calendar = calendarDiv._joomlaCalendar;
calendar.setDate( new DateTime('2018-12-12 12:00') );

Si vous regardez media/system/js/fields/calenar.js, vous verrez quelles méthodes a JoomlaCalendar et vous aurez une idée de la manière dont vous pourriez interagir avec cela.

Je dis que c'est hacky parce que je n'ai aucune idée de la "bonne" façon d'interagir avec l'objet JoomlaCalendar JavaSript. Je l'ai manipulé avec succès de différentes manières, mais je ne sais pas si ce que je faisais était correct.

0
Dom