title: pikaday with moment is not working
body: <p>I am trying to use <code>pikaday</code> with <code>moment</code>, but somehow I can't make it work.</p>
  
  <p>I am trying to use it in a <code>aurelia</code> <code>custom-attribute</code> as follows:</p>
  
  <pre><code>import "moment";
  import "pikaday";
  
  ...
      self.picker = new Pikaday({
              field: $(this.element)[0]
              , format: "DD.MM.YYYY"
              , onSelect: (date) =&gt; {
                  console.log(self.picker.getMoment().format('Do MMMM YYYY')); //getMoment() is always null.
              }
          });
  </code></pre>
  
  <p>Despite importing <code>moment</code> prior to <code>pikaday</code>, it is not working (as advised in other SO questions and GitHub issues), and getMoment() is always null. Even the date is not by default formatted as per the <code>format</code>. </p>
  
  <p>I also found that <code>hasMoment</code> is always <code>false</code> in <code>pikaday.js</code>, as it is not set properly in the first block of code (in the source of <code>pikaday</code> as can be ssen below):</p>
  
  <pre><code>(function (root, factory)
  {
      'use strict';
  
      var moment;
      if (typeof exports === 'object') {
          // CommonJS module
          // Load moment.js as an optional dependency
          try { moment = require('moment'); } catch (e) {}
          module.exports = factory(moment);
      } else if (typeof define === 'function' &amp;&amp; define.amd) {
          // AMD. Register as an anonymous module.
          define(function (req)
          {
              // Load moment.js as an optional dependency
              var id = 'moment';
              try { moment = req(id); } catch (e) {}
              return factory(moment);
          });
      } else {
          root.Pikaday = factory(root.moment);
      }
  }(this, function (moment)
  {
      'use strict';
  
      /**
       * feature detection and helper functions
       */
      var hasMoment = typeof moment === 'function', // this is always false as it can't be set in the above block.
  .....
  </code></pre>
  
  <p>Which made me think that I might be importing <code>moment</code> in a wrong way. Can anyone please help me on this?</p>
  
  <p><strong>Additional Details:</strong>
  My project settings are as follows:</p>
  
  <p><code>tsconfig.json</code></p>
  
  <pre><code>{
      "compilerOptions": {
          "target": "es6",
          "isolatedModules": false,
          "jsx": "react",
          "declaration": false,
          "noImplicitAny": false,
          "removeComments": true,
          "noLib": false,
          "preserveConstEnums": true,
          "suppressImplicitAnyIndexErrors": false,
          "experimentalDecorators": true,
          "emitDecoratorMetadata": true,
          "experimentalAsyncFunctions": true,
          "allowSyntheticDefaultImports": false        
      },
      "filesGlob": [
          "**/*.ts",
          "**/*.tsx",
          "!node_modules/**"
      ],
      "files": [ ],
      "compileOnSave": false,
      "buildOnSave": false,
      "atom": {
          "rewriteTsconfig": false
      }
  }
  </code></pre>
  
  <p>I am also using <code>system.js</code>:</p>
  
  <pre><code>System.config({
    baseURL: "/",
    defaultJSExtensions: true,
    transpiler: "babel",
    babelOptions: {
      "optional": [
        "runtime",
        "optimisation.modules.system"
      ]
    },
    paths: {
      "*": "dist/*",
      "github:*": "jspm_packages/github/*",
      "npm:*": "jspm_packages/npm/*"
    },
    map: {
        ...
    }
  })
  </code></pre>
  
  <p><strong>Workaround</strong>: Inside <code>main</code> (aurelia configuration):</p>
  
  <pre><code>import moment from "moment"; 
  ...
      // Register moment on global scope.
      window["moment"] = moment;
  ...
  </code></pre>
  
  <p>And, yes I know it is ugly, but does the job :)</p>