javascript – 有没有人知道在角度2应用程序中使用简单的日期选择器？

有没有人知道在角度2应用程序中使用简单的日期选择器？

我似乎无法让jquery ui日期选择器工作？

有谁知道一个简单的实施.

我已经尝试过html日期,但它并不适用于所有浏览器.

我正在使用带有html5和angular2的打字稿

我尝试安装这个：http://jankuri.com/components/angular2-datepicker

错误我得到这个错误：

我当前的index.html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>test</title>
    <base href="/"></base>

    <Meta charset="UTF-8">      
    <Meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
    <Meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16">

    <link rel="stylesheet" type="text/css" href="/css/animate.css" /> 
    <link rel="stylesheet" type="text/css" href="/bootstraptheme.css" />
    <link rel="stylesheet" type="text/css" href="/css/styles.css" /> 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


    <script src="node_modules/moment/moment.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>   

    <script>
        System.config({
            transpiler: 'typescript',
            defaultJSExtensions: true,  
            typescriptOptions: {
                emitDecoratorMetadata: true,
            },          
            packages: {
                'angular2-google-maps': {
                  defaultExtension: 'js'
                }
            },
            map: {
                'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
                'moment': 'node_modules/moment/moment.js'*/
            }
        });

    </script>


    <script src="/angular2_google_maps.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>

    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>  

    <script src="/firebase/firebaseNew.js"></script>

    <!--<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>-->

  </head>

  <body id="container">

    <app></app>

    <script>      
      System.import('/app/app.component');
    </script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-22148347-4', 'auto');
      ga('send', 'pageview');
    </script>

  </body>
</html>

解决方法:

您可以尝试以下符合Angular2的库：

> https://github.com/kekeh/mydatepicker
> https://github.com/jkuri/ng2-datepicker

要使用ng2-datepicker,我将以下SystemJS配置放在index.html文件中：

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-datepicker': {
        format: 'register',
        defaultExtension: 'js'
      }
    },
      map: {
        'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
        'moment': 'node_modules/moment/moment.js'*/
      }
  });
</script>

并在我的脚本中添加时刻库：

<script src="node_modules/moment/moment.js"></script>

我在我的组件中使用datepicker库,如下所述：

import {DatePicker} from 'ng2-datepicker/ng2-datepicker';

@Component({
  template: `
    <datepicker [(ngModel)]="company.date"></datepicker>
  `,
  directives: [DatePicker]
})

我有以下错误：

EXCEPTION: EXCEPTION: Error during instantiation of DatePicker!.
ORIGINAL EXCEPTION: TypeError: moment is not a function
ORIGINAL STACKTRACE:
(...)

为了使它工作,我在ng2-datepicker.ts文件中注释了以下行：

import * as moment from 'moment';

希望它能帮到你,
蒂埃里

javascript – 有没有人知道在角度2应用程序中使用简单的日期选择器？

相关推荐