title: requirejs and bootstrap-datetimepicker
body: <p>I have a problem when I try to set the format with date time picker. The debugger tells me that </p>
  
  <pre><code>Uncaught TypeError: $(...).datetimepicker is not a function
  </code></pre>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Web Project&lt;/title&gt;
  
      &lt;link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="Styles/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="Styles/simple-sidebar.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script data-main="Scripts/app.js" src="Scripts/Libs/require.js"&gt;&lt;/script&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class='col-sm-6'&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class='input-group date' id='datetimepicker1'&gt;
                          &lt;input type='text' class="form-control" /&gt;
                          &lt;span class="input-group-addon"&gt;
                              &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The main html sets up and loads requirejs which itself is loading my app.js. In there I'll try to set the date picker format when the document is ready. Please see below.</p>
  
  <pre><code>requirejs.config({
  
      // by default load any module IDs from Scripts/libs
      baseUrl: 'Scripts/Libs',
  
      paths: {
          models: '../models',
          collections: '../collections',
          views: '../views',
          routers: '../routers',
          components: '../components',
          modelDialog: 'backbone.ModalDialog',
          bootstrap: 'bootstrap.min',
          boostrapDatePicker: 'bootstrap-datetimepicker.min',
      },
  
      shim: {
          'backbone': {
              deps: ['underscore', 'jquery'],
              exports: 'Backbone'
          },
          'underscore': {
              exports: '_'
          },
          'bootstrap': {
              deps: ['jquery']
          },
          'boostrapDatePicker': {
              deps: ['moment', 'jquery', 'bootstrap']
          }
  
      }
  
  });
  
  var app = app || {};
  
  require(['components/dataService'], function(dataService) {
  
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
  
      $(document).ready(function() {
  
          $('#datetimepicker1').datetimepicker({ format:'MM/DD/YYYY'});
  
          dataService.getData();
  
      });
  
  });
  </code></pre>