TypeError: $().datetimepicker is not a function

**CcpgA** · 31/07/2017, 11h16

Bonjour,

Comme le dit le titre je me retrouve face au message d'erreur "TypeError: $(...).datetimepicker is not a function". Pour presiser le contexte je suis actuellement en train de tenter de faire un plugin de calendrier sous wordpress ,pour cela j'utilise deux bibliothèque jquery , datetimepiker et fullcalendar .

Voici le code actuel (pour la plus par c'est de la reformulation d'existant en cour du coter js):

php/wordpresse

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function monS() {
         wp_enqueue_script('a',plugin_dir_url(__FILE__) .'lib/jquery.min.js');
         wp_enqueue_script('b',plugin_dir_url(__FILE__) .'lib/jquery-ui.min.js');
         wp_enqueue_script('c',plugin_dir_url(__FILE__) . 'lib/moment.min.js');
         wp_enqueue_script('d',plugin_dir_url(__FILE__) . 'dos/initCal.js');
 
         wp_enqueue_style('e',plugin_dir_url(__FILE__) . 'fullcalendar.min.css');
         wp_enqueue_style('f',plugin_dir_url(__FILE__) . 'St.css');
         wp_enqueue_style('g',plugin_dir_url(__FILE__) . 'lib/datetimepicker-master/jquery.datetimepicker.css');
}
add_action( 'wp_enqueue_scripts', 'monS' );

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div>
        <label for="DateD">De :</label>
        <input type="text" name="dateD" id="DateD"  class="text ui-widget-content ui-corner-all ">
        <label for="DateF"> à </label>
        <input type="text" name="dateF" id="DateF"  class="text ui-widget-content ui-corner-all ">
</div>

Js/Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
$ = jQuery.noConflict();
 
$(document).ready(function () {
  $.getScript("../jquery.datetimepicker.full.min.js", function () {
      console.log("js dtp Chargé !");
  });
    $.getScript("../fullcalendar.min.js", function () {
        console.log("JS FC Chargé !");
    });
 
 
    setTimeout(function () {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today'
                , center: 'title'
                , right: 'month,agendaWeek,agendaDay'
            }
            , weekends: false
            , defaultDate: undefined
            , editable: true
            , eventLimit: true
      			, selectable: true//
      			, selectHelper: true//
            , select: function(start, end) {//debut
              var title = prompt('Event Title:');
              var start = prompt('Event start:',start);
              var end = prompt('Event end:',end);
              var eventData;
              if (title) {
                eventData = {
                  title: title,
                  start: start,
                  end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
              }
              $('#calendar').fullCalendar('unselect');
            },//fin
            events: [
                {
                    title: 'deucc',
                    start: '2017-07-06T10:30:00',
					          end: '2017-07-06T12:30:00'
                  },
                {
            title: 'Alvent',
            start: '2017-07-07T10:30:00',
            end: '2017-07-07T12:30:00'
                     },
                   {
               title: 'Alvent',
               start: '2017-07-12T10:30:00',
               end: '2017-07-22T12:30:00'
                        }
			]
        });
    }, 500);
 
/*****************js pop up*********************/
 
 
    $('#id_nameCal option').mousedown(function(e) {
        e.preventDefault();
        $(this).toggleClass('selected');
 
        $(this).prop('selected', !$(this).prop('selected'));
        return false;
    });
 
$( function() {
    var dialog, form,
 
      // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );
 
    function addRdv() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );
 
      if ( valid ) {
        dialog.dialog( "close" );
      }
      return valid;
    }
 
    dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Ajouter un Rendez-Vous": addRdv,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });
 
    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });
 
    $( "#createRdv" ).button().on( "click", function() {
      dialog.dialog( "open" );
    });
  } );
 
 
/**********************Date time picker**********************/
$('#DateF').datetimepicker();
/*$.datetimepicker.setLocale('fr');
 
$('#DateF').datetimepicker({
 i18n:{
  fr:{
   months:[
    'Janvier','Fevrier','Mars','Avril',
    'Mai','Juin','Juillet','Aout',
    'Septembre','Octobre','Novenbre','Decembre'
   ],
   dayOfWeek:[
    "Lun", "Mar", "Mer", "Jeu",
    "Ven", "Sam", "Dim"
   ]
  }
 },
 format:'d.m.Y H:i'
});*/
 
 
//{theme:'dark'}
 
/****************************************/
});

Après de nombreuse recherche je me tourne donc ver vous .

**Loralina** · 31/07/2017, 12h53

Bonjour,
Peut-être une utilisation de la fonction "datetimepicker" avant le chargement du script "../jquery.datetimepicker.full.min.js" ?
Ajoutez des affichages pour voir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(document).ready(function () {
  $.getScript("../jquery.datetimepicker.full.min.js", function () {
      console.log("js dtp Chargé !");
      console.log($('#DateF'),$('#DateF').datetimepicker);
      $('#DateF').datetimepicker();
  });
...
console.log($('#DateF'),$('#DateF').datetimepicker);
$('#DateF').datetimepicker();

**CcpgA** · 31/07/2017, 13h27

Je chercher une foi de plus une solution compliquer alors que la solution étai sous mes yeux .
Cela fonctionne donc parfaitement merci a vous.

TypeError: $().datetimepicker is not a function

jQuery

Discussions similaires

Partager

Partager