Question

有人知道在角度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>

Answer 1

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

要使用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';

希望它可以帮到你，亨利

Answer 2

您可以在不导入额外文件的情况下尝试此操作。我使用bootflat作为样式框架和一个datepicker库创建了this datepicker组件。有关详细信息，您可以refer here。

Answer 3

我们想为我们的项目开发一个自定义的日期选择器，我们在那时找不到很多Angular2 Datepickers，因此最终自己写了一个简单的。

这是一个选择日期的简单选项，您还可以指定要在之前和之后禁用的日期。它使用事件发射器并在文本字段中设置所选日期。它是在npm发布的，我也在努力改进它。

https://www.npmjs.com/package/angular2-simple-datepicker

希望它有所帮助。

欢迎所有反馈。

更新 - 添加了Datepicker的屏幕截图，其中输入日期突出显示（橙色）并显示悬停颜色（灰色）。 Click here可以从npmjs链接下载，执行npm install，然后运行npm以查看Datepicker演示。它包含一个app.js文件，该文件使用datepicker组件作为＆＃34;＆＃34;

Answer 4

看一下这个：https://github.com/vlio20/ng2-date-picker，这是一个演示：https://vlio20.github.io/angular-datepicker/。它具有高度可配置性，并具有实质主题。

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

4 个答案: