Datepicker ne s'affiche pas depuis un fichier externe

Victor Lernout
Javascript

Bonjour, j'ai 2 problèmes,

Problème numéro 1: le calendrier ne s'affiche pas dans le champ prévu à cet effet dans mon ficher HTML

Problème numéro 2: Je n'arrive pas à appeler la fonction getDate() pour récupérer la date voulu

J'ai mon script datepicker sur un fichier externe nommé "Calendrier.js" situé dans le dossier "Scripts" à la racine. Le date picker est prévu pour prendre une plage de dates (ex: 15/06/2018 à 17/06/2018) et renvoyer les dates min et max.

voici le code HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript"src="/Scripts/Calendrier.js"></script>
  </head>
  <body>
    <label for="from">From</label>
    <input type="text" id="dateFrom" name="from">
    <label for="to">to</label>
    <input type="text" id="dateTo" name="to">
  </body>
</html>

Et voici le fichier Calendrier.js :

jQuery(function($){
  var dateFormat = 'dd/mm/yy',
      from = $( "#dateFrom" ).datepicker({
        dateFormat: "dd/mm/yy",
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
      })
  .on( "change", function() {dateFrom.datepicker( "option", "maxDate", getDate( this ) );});
  .on( "change", function() {dateTo.datepicker( "option", "minDate", getDate( this ) );}),
    to = $( "#dateTo" ).datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1
  })
  function getDate( element ) {
    var date;
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }
    return date;
  }
} );

J'aimerais donc régler mes deux problèmes =/
//edit: dateFrom et dateTo dans le js sont modifiés

10 réponses

Maenhyr

Bonjour, tu n'utilises pas les bons ids dans ton fichier JS. $( "#from" ).datepicker doit devenir $( "#dateFrom" ).datepicker et $( "#to" ).datepicker doit devenir $( "#dateTo" ).datepicker.

Victor Lernout
Auteur

j'ai modifié mais le calendrier n'est toujours pas affiché.

Maenhyr

Il y a une inversion dans l'instanciation des datepickers et l'écoute du listener. Tu avais aussi un ; en trop. Enfin, dans les listeners, tu utilises dateFrom mais cette variable n'existe pas.

jQuery(function($) {
    var dateFormat = 'dd/mm/yy',
      from = $("#dateFrom").datepicker({
        dateFormat: "dd/mm/yy",
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
      })
        .on("change", function() {from.datepicker("option", "maxDate", getDate(this));}),
      to = $("#dateTo").datepicker({
        dateFormat: "dd/mm/yy",
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      }).on("change", function() {to.datepicker("option", "minDate", getDate(this));})

    function getDate(element) {
      var date;
      try {
        date = $.datepicker.parseDate(dateFormat, element.value);
      } catch (error) {
        date = null;
      }
      return date;
    }
  });
Victor Lernout
Auteur

Merci pour l'information et la correction mais c'est normal que le calendrier n'est toujours pas affiché?
LE problème que je rencontre est: quand le script est dans la pag hteml il fonctionne mais dès que je le mets dans un fichier à part il ne fonctionne plus, est-ce que mon appel est mauvais ou c'est un autre problème?

Maenhyr

ha ok, j'ai essayé en le mettant directement dans la page HTML. Il semblerait que ton souci soit un problème de chemin. As-tu une error 404 dans ton devtools ?

Lartak

Bonjour.

mais dès que je le mets dans un fichier à part il ne fonctionne plus, est-ce que mon appel est mauvais ou c'est un autre problème?

Ton problème doit être côté HTML, lorsque tu charges ton fichier, il manque un espace dans ta balise du script, juste avant l'attribut src.
Il te faut donc remplacer :

<script type="text/javascript"src="/Scripts/Calendrier.js"></script>

Par :

<script type="text/javascript" src="/Scripts/Calendrier.js"></script>

Je ne certifie pas que le problème vient de là, mais sait on jamais.

gallarian

Bonsoir, quand tu dis que tu mes ton calendrier dans un fichier a part, est ce que tu pense a declarer ton fichier qui a le code dans ton html car moi je ne vois que un fichier JS avec calendrier? car si ton fichier Calendrier.js est le fichier qui appel le fichier ayant le code, il ne saura pas le trouver, tu dois donc declarer les 2 fichiers sauf si tu utilises des bundlers

Victor Lernout
Auteur

C'est bon, j'ai réussi à trouver la solution, je reposte le code ci dessous au cas où quelqu'un tombe sur le même problème que moi et cherche la réponse:

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Datepicker - Select a Date Range</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="Scripts/Calendrier.js">
    </script>
  </head>
  <body>
    <label for="dateFrom">Du</label>
    <input type="text" id="dateFrom" name="dateFrom">
    <label for="dateTo">Au</label>
    <input type="text" id="dateTo" name="dateTo">
  </body>
</html>

Calendrier.js

$.datepicker.setDefaults(
  {
    altField: "#datepicker",
    closeText: 'Fermer',
    prevText: 'Précédent',
    nextText: 'Suivant',
    currentText: 'Aujourd\'hui',
    monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
    dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
    dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
    dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
    weekHeader: 'Sem.',
    dateFormat: 'dd-mm-yy'
  }
);
  $( function() {
  var dateFormat = "dd/mm/yy",
      dateFrom = $( "#dateFrom" )
  .datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1
  })
  .on( "change", function() {
    dateTo.datepicker( "option", "minDate", getDate( this ) );
  }),
      dateTo = $( "#dateTo" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1
      })
  .on( "change", function() {
    dateFrom.datepicker( "option", "maxDate", getDate( this ) );
  });

  function getDate( element ) {
    var date;
    try {
      date = $.datepicker.parseDate( dateFormat, element.value );
    } catch( error ) {
      date = null;
    }

    return date;
  }
} );
CodingWeb

Bonsoir;

Ça c'est bien de revenir mettre la solution trouver à ton problème, peut être mettre le sujet comme résolut

A bientôt sur le forum

Lartak

Bonsoir.
CodingWeb à raison, mais tu aurais quand même pu expliqué ce que tu as fait pour résoudre ton problème, soit les modifications que tu as fait, car là tu n'as fait que montrer deux fichiers complets, sans même mettre la moindre annotation en commentaire dans ces fichiers, ce qui aurait pourtant permit à ceux qui aurait voulu comprendre d'y voir plus clair.