pikaday with moment is not working

时间:2016-02-03 07:58:03

标签: typescript momentjs aurelia systemjs pikaday

我正在尝试将pikadaymoment一起使用,但不知怎的,我无法使其发挥作用。

我尝试在aurelia custom-attribute中使用它,如下所示:

import "moment";
import "pikaday";

...
    self.picker = new Pikaday({
            field: $(this.element)[0]
            , format: "DD.MM.YYYY"
            , onSelect: (date) => {
                console.log(self.picker.getMoment().format('Do MMMM YYYY')); //getMoment() is always null.
            }
        });

尽管在moment之前导入pikaday,但它不起作用(正如其他SO问题和GitHub问题所建议的那样),并且getMoment()始终为null。默认情况下,默认日期不是format格式的。

我还发现hasMoment中的false总是pikaday.js,因为它未在第一个代码块中正确设置(在pikaday的源代码中可以正确设置(见下文):

(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' && 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.
.....

这让我觉得我可能以错误的方式导入moment。有人可以帮我这个吗?

其他详细信息: 我的项目设置如下:

tsconfig.json

{
    "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
    }
}

我也在使用system.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "*": "dist/*",
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  map: {
      ...
  }
})

解决方法:内部main(aurelia配置):

import moment from "moment"; 
...
    // Register moment on global scope.
    window["moment"] = moment;
...

而且,是的,我知道它很难看,但确实有工作:)

2 个答案:

答案 0 :(得分:1)

这可能对你没什么帮助,但这就是我解决它的方法:

import * as moment from 'moment';
import * as Pikaday from 'pikaday';

Pikaday.prototype.toString = function (format: string) {
    return (this._d instanceof Date) ? moment(this._d).format(format || this._o.format) : '';
};

答案 1 :(得分:0)

不确定系统js是如何工作的,但你可能不得不以某种方式确保它在pikaday之前被加载并将其暴露给其他模块作为全局 - 就像通常处理jquery和promise polyfils一样。