title: How to implement bootstrap-datepicker as Aurelia custom element
body: <p>Having first read this <a href="http://www.danyow.net/jquery-ui-datepicker-with-aurelia/" rel="nofollow">http://www.danyow.net/jquery-ui-datepicker-with-aurelia/</a> and with inspiration from  <a href="https://gist.github.com/charlespockert/6a1fef3f546f6d37d1dc" rel="nofollow">https://gist.github.com/charlespockert/6a1fef3f546f6d37d1dc</a> here follows my attempt to implement the <a href="https://github.com/eternicode/bootstrap-datepicker" rel="nofollow">https://github.com/eternicode/bootstrap-datepicker</a> version of bootstrap datepicker:</p>
  
  <p><a href="http://plnkr.co/edit/TkbT6E?p=preview" rel="nofollow">http://plnkr.co/edit/TkbT6E?p=preview</a></p>
  
  <p>I'm getting <code>self.datePicker.datepicker is not a function(…)</code> although I've checked that bootstrap-datepicker is correctly installed with jspm and that the .js is loaded. The datepicker does show up (which confirms that the js is loaded correctly), and I can select a date, but the value is not set.</p>
  
  <p>What am I doing wrong here?</p>
  
  <p>Update:</p>
  
  <p>A friendly soul ,@SamDeBlock, in gitter.im/Aurelia put together this <a href="http://plnkr.co/edit/hKit8pigwL1ijr2DmbGP?p=preview" rel="nofollow">http://plnkr.co/edit/hKit8pigwL1ijr2DmbGP?p=preview</a> with the dependencies so it'll run. I keep getting the above error however, when running this in my own application. I'm gonna investigate it problem further and update here, if I get to the bottom of this.</p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>I've now located the problem down to being an issue with system.js/jspm. That's also why the above plunkr works, since it just reference the files directly instead of defining them in config.js.</p>
  
  <p><strong>If I add the file manually</strong> like proposed in the above plunkr - AND if I change the following in moment.js file from:</p>
  
  <pre><code>(function (global, factory) {
      typeof exports === 'object' &amp;&amp; typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' &amp;&amp; define.amd ? define(factory) :
      global.moment = factory()
  }(this, function () { 'use strict';
  ...
  </code></pre>
  
  <p>to:</p>
  
  <pre><code>(function (global = typeof window !== "undefined" ? window : this, factory) {
      typeof exports === 'object' &amp;&amp; typeof module !== 'undefined' ? module.exports = factory() :
      typeof define === 'function' &amp;&amp; define.amd ? define(factory) :
      global.moment = factory()
  }(this, function () { 'use strict';
  ...
  </code></pre>
  
  <p>the <code>global = typeof window !== "undefined" ? window : this</code> part..</p>
  
  <p>THEN it seems to work, with the Aurelia navigation skeleton as well.</p>
  
  <p>But why is this necessary? And how can I get this to work, without all the hacks? I've built my application on the Aurelia Navigation Starter project
  <a href="https://github.com/aurelia/skeleton-navigation" rel="nofollow">https://github.com/aurelia/skeleton-navigation</a></p>