Comment inclure un DatePicker dans un .tpl pour la date de livraison

JoeSatriani · March 22, 2012

Bonjour, comme le titre l'indique je voudrais intégrer un DatePicker dans l'étape du choix du transporteur, car je demande aussi la date de livraison et j'aimerai afficher un calendrier dynamique pour que les clients se facilite la tâche à choisir la bonne date.

Le seul problème est que je ne sais pas du tout comment inclure le DatePicker dans un fichier .tpl...

J'ai regardé dans le BO mais il est affiché sur un fichier .php et non .tpl, du coup je sèche là...

Si quelqu'un pourrait m'indiquer la voie suprême pour commencer mon calendrier, je lui en serais très reconnaissant!

Cordialement.

Joe

IchabOd · March 22, 2012

tu inclus ton plug-in jquery comme jquery-ui + le css correspondant dans la page tpl et si le champ date a un ID = "toto", en haut de ta page tu instancies le plug-in pour cet id. Un exemple :

     $(function() {
         // FONCTION D'APPARITION D'UN CALENDRIER POUR LE CHAMP AYANT UN ID TOTO
         $( "#toto" ).datepicker({
           dateFormat: "dd-mm-yy",
           duration: 'normal',
           showAnim: 'clip',
           numberOfMonths: 2,
           }
         );
    });

JoeSatriani · March 23, 2012

Bonjour IIchabOd, merci de m'avoir lancé sur la voix mais est-tu sur que cela fonctionne ? j'ai mis ce code entre {literal}{/literal} et cela ne fonctionne pas...j'ai mis le nom de la textbox à la place de toto...

Voici mon code :

<script type="text/javascript">
{literal}
$(function(){
	$('#name').date_picker({
		dateFormat: "dd-mm-yy",
		duration: 'normal',
		showAnim: 'clip',
		numberOfMonths: 2,
		}
	);
});
{/literal}
</script>

pour la textbox ici :

<p class="text">
 <label for="date">{l s='Date* :'}</label>
 <input type="text" id="date" name="date"
{if !$opc}value="{if isset($smarty.post.date)}{$smarty.post.date}{/if}"{/if}
{if $opc}onblur="updateDateDeLivraison();"{/if}/>
<label for="date">{l s='(format: JJ/MM/AAAA)'}</label>
</p>

si tu pourrais m'aider, cela serait super simpa!

Cordialement

IchabOd · March 23, 2012

Alors déjà il faut télécharger les fichiers datepicker et les inclure dans la page.

Moi je t'ai donné l'exemple de jquery-ui, que tu trouveras ici :

http://jqueryui.com/download

Il faut sélectionner au minimum les éléments du Core + le widget datepicker + les éventuels autres effets que tu souhaites avoir.

Ici tu as toute la procédure :

http://jqueryui.com/docs/Getting_Started

Enfin il faut paramétrer le tout dans ta page, et là il ne faut pas se tromper dans les ID :

<script type="text/javascript">
{literal}
$(function(){
	$('#date').date_picker({ // ici tu mets #date car c'est l'id que tu as donné à ton input 
		dateFormat: "dd/mm/yyyy", // ici tu mets le format attendu
		duration: 'normal',
		showAnim: 'clip',
		numberOfMonths: 2,
		}
	);
});
{/literal}
</script>

pour la textbox ici :

<p class="text">
 <label for="date">{l s='Date* :'}</label>
 <input type="text" id="date" name="date"
{if !$opc}value="{if isset($smarty.post.date)}{$smarty.post.date}{/if}"{/if}
{if $opc}onblur="updateDateDeLivraison();"{/if}/>
<label for="date">{l s='(format: JJ/MM/AAAA)'}</label>
</p>

JoeSatriani · March 23, 2012

Ouais pour le #name, je suis con, je sais pas pourquoi j'ai mis ça ? Erreur d'inatention, sinon si j'ai bien compris avant de pouvoir avoir le calendrier, il faut que je le charge au démarrage, alors j'ai fait ceci, mais sans résultat :

<link type="text/css" href="js/jquery/datepicker/datepicker.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery/datepicker/jquery-ui-personalized-1.6rc4.packed.js"></script>

Parce qu'il me semble qu'il faut que je charge la librairie du datepicker qui se trouve dans prestashop nan ?

IchabOd · March 23, 2012

Ah j'avais pas vu qu'il y avait déjà un jquery-ui chargé dans prestashop.

Donc si c'est le cas normalement tous les composants js sont chargés et mis en cache, tu n'as, normalement, qu'à déclencher le datepicker sur cet id et ça devrait le faire.

A voir avec les experts prestashop/js

JoeSatriani · March 23, 2012

Ok, en tout cas je te remercie de m'avoir aidé! Si j'arrive à trouver la solution, je la mettrais sur le post.

Encore merci IchabOd.

Cordialement.

Joe

IchabOd · March 23, 2012

Dans le controller ParentOrderController, il y a la fonction setMedia() que tu dois compléter pour ajouter le js et css qui vont bien ::

public function setMedia()
{
parent::setMedia();

// Adding CSS style sheet
Tools::addCSS(_THEME_CSS_DIR_.'addresses.css');
Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
// faire de même ici pour le css jquery-ui

// Adding JS files
Tools::addJS(_THEME_JS_DIR_.'tools.js');
// faire de même ici pour le js jquery-ui
if ((Configuration::get('PS_ORDER_PROCESS_TYPE') == 0 && Tools::getValue('step') == 1) || Configuration::get('PS_ORDER_PROCESS_TYPE') == 1 || Tools::getValue('step') == 2)
Tools::addJS(_THEME_JS_DIR_.'order-address.js');
Tools::addJS(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js');
if ((int)(Configuration::get('PS_BLOCK_CART_AJAX')) OR Configuration::get('PS_ORDER_PROCESS_TYPE') == 1)
{
Tools::addJS(_THEME_JS_DIR_.'cart-summary.js');
Tools::addJS(_PS_JS_DIR_.'jquery/jquery-typewatch.pack.js');
}

}

et ensuite le code dans ta page et ça devrait fonctionner...

JoeSatriani · March 23, 2012

J'avais pensé à y mettre dans le setMedia() mais cela ne fonctionne toujours pas, regarde mon code :

ParentOrderController.php

public function setMedia()
{
 parent::setMedia();
 // Adding CSS style sheet
 Tools::addCSS(_THEME_CSS_DIR_.'addresses.css');
 Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
//Début d'ajour par nico le 23/03/12 pour pouvoir afficher le calendrier
    Tools::addCSS(_PS_JS_DIR_.'jquery/datepicker/datepicker.css');
//<link type="text/css" href="js/jquery/datepicker/datepicker.css" rel="Stylesheet" />
//Fin d'ajour par nico le 23/03/12 pour pouvoir afficher le calendrier
 // Adding JS files
 Tools::addJS(_THEME_JS_DIR_.'tools.js');
 if ((Configuration::get('PS_ORDER_PROCESS_TYPE') == 0 AND Tools::getValue('step') == 1) OR Configuration::get('PS_ORDER_PROCESS_TYPE') == 1)
  Tools::addJS(_THEME_JS_DIR_.'order-address.js');
 Tools::addJS(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js');
 if ((int)(Configuration::get('PS_BLOCK_CART_AJAX')) OR Configuration::get('PS_ORDER_PROCESS_TYPE') == 1)
 {
  Tools::addJS(_THEME_JS_DIR_.'cart-summary.js');
  Tools::addJS(_PS_JS_DIR_.'jquery/jquery-typewatch.pack.js');
 }
//Début d'ajour par nico le 23/03/12 pour pouvoir afficher le calendrier
    Tools::addJs(_PS_JS_DIR_.'jquery/datepicker/jquery-ui-personalized-1.6rc4.packed.js');
//<script type="text/javascript" src="js/jquery/datepicker/jquery-ui-personalized-1.6rc4.packed.js">
//Fin d'ajour par nico le 23/03/12 pour pouvoir afficher le calendrier  
}

order-carier.tpl :

{*Début de creation de fonction par nico le 23/03/12 pour pouvoir afficher le datepicker*}
<script type="text/javascript">
{literal}
   $(function(){
    $('#date').date_picker({
	    dateFormat: "dd-mm-YYYY",
	    duration: 'normal',
	    showAnim: 'clip',
	    numberOfMonths: 2,
	    }
    );
   });
{/literal}
</script>
{*Début de creation de fonction par nico le 23/03/12 pour pouvoir afficher le datepicker*}

<h3 class="condition_title">{l s='Date Shipping'}</h3>
<p class="text">
 <label for="date">{l s='Date* :'}</label> 
 <input type="text" id="date" name="date" {if !$opc}value="{if isset($date)}{$date}{/if}"{/if} {*{if $opc}onblur="updateDateDeLivraison();"{/if}*}/> 
 <label for="date">{l s='(format: JJ/MM/AAAA)'}</label>
</p>

IchabOd · March 23, 2012

t'as essayé d'inclure jquery-ui

jquery-ui-1.8.10.custom.min.js

Tools::addJs(_PS_JS_DIR_.'jquery/jquery-ui-1.8.10.custom.min.js');

à la place de

Tools::addJs(_PS_JS_DIR_.'jquery/datepicker/jquery-ui-personalized-1.6rc4.packed.js');

(que je ne connais pas....)

JoeSatriani · March 23, 2012

Okai, j'ai modifié comme tu me l'as dis, pourtant je n'ai rien de mieux à l'écran!

C'est bizarre quand même que prestashop n'est pas prévu un datepicker tout simple à installer sur les templates...

tarsalfr · May 25, 2012

Bonsoir,

mon problème est un petit peut pareil

j'ai ajouté un champs pré commande en input dans ma page produit en admin.il fonctionne trés bien mais je me suis dit avec un datepicker je vais me faciliter la vie donc j'ai utiliser la fonction

function includeDatepicker($id, $time = false)

en utilisent la fonction

function includeDatepicker($id, $time = false)

avec


includeDatepicker(array('date_from', 'date_to'), true);
echo '
<label>'.$this->l('From:').' </label>
<div >
<input type="text" size="20" id="date_from" name="date_from" value="'.($this->getFieldValue($obj, 'date_from') ? htmlentities($this->getFieldValue($obj, 'date_from'), ENT_COMPAT, 'UTF-8') : date('Y-m-d H:i:s')).'" /> <sup>*</sup>
<p class="clear">'.$this->l('Start date/time from which voucher can be used').'<br />'.$this->l('Format: YYYY-MM-DD HH:MM:SS').'</p>
</div>

en remplassent les value et nom par mon le nom de mon champs

le problème que je rencontre est le suivant

- il y a 5 zone texte une part langage les une en dessous des autres

- le datepicker fonctionne uniquement pour le langage id 1 ( anglais)

auriez vous un solution pour avoir uniquement le langage sélectionné qui s'affiche j'ai essayé avec

<div class="lang_'.$language['id_lang'].'" style="display: '.($language['id_lang'] == $this->_defaultFormLanguage ? 'block' : 'none').';float: left;">

mais cela ne fonctionne pas

merci d'avance

Edited May 25, 2012 by tarsalfr (see edit history)

Jashne · September 7, 2012

Bonsoir, je cherche aussi a ajouté une date picker, mais j'y arrive pas comme vous.

Quelqu'un peux m'aider svp.

Note: J'ai verifier s'il charge bien les js et css, et je vois qu'ils sont tous bien chargés par prestashop.

Merci d'avance.

cockpitinferno · September 10, 2012

idem. j'ai bien un champ qui s'affiche mais c'est tout et puis je souhaiterais que cette date choisie figure dans le recap de ma commande.

JoeSatriani · February 4, 2014

Bonjour à tous, je tiens à vous préciser que je suis arrivé à mettre un calendrier sur une textbox pour la livraison des commandes.

Voici mon code :

order-carrier.tpl

<script type="text/javascript">
{literal}

    $(function(){
        $('input#date').datepicker({ dateFormat: "dd-mm-YYYY" });
    });

{/literal}
</script>

....

<label for="date">{l s='Date* :'}</label>  
<input type="text" id="date" name="date" {if !$opc}onblur="UpdateDateDeLivraison();" value="{if isset($date)}{$date}{/if}"{/if}/>  
<label for="date">{l s='(format: JJ/MM/AAAA)'}</label>

OrderOpcController.php

public function setMedia()
	{
		parent::setMedia();

		// Adding CSS style sheet
		Tools::addCSS(_THEME_CSS_DIR_.'order-opc.css');
/** Rajout pour le calendrier **/
        Tools::addCSS(_PS_JS_DIR.'jquery/datepicker/datepicker.css');
/** Rajout pour le calendrier **/

		// Adding JS files
		Tools::addJS(_THEME_JS_DIR_.'order-opc.js');
		Tools::addJs(_PS_JS_DIR_.'jquery/jquery.scrollTo-1.4.2-min.js');
		Tools::addJS(_THEME_JS_DIR_.'tools/statesManagement.js');
        
/** Rajout pour le calendrier **/
        Tools::addJs(_PS_JS_DIR.'jquery/datepicker/jquery-ui-personalized-1.6rc4.packed.js');
/** Rajout pour le calendrier **/
     
	}

Et voilà, normalement, cela devrait fonctionner pour vous.

Edited February 4, 2014 by JoeSatriani (see edit history)

Comment inclure un DatePicker dans un .tpl pour la date de livraison

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in