时间戳

首页 > 解决方案 > 如何在 angular4/angular2+ 中实现 [owlDateTime]

angular - 如何在 angular4/angular2+ 中实现 [owlDateTime]

问题描述

我正在尝试在我的 angular2+（或者更确切地说是 angular4）代码中实现 owlDateTime。我已经从 - https://danielykpan.github.io/date-time-picker/

[我什至尝试过--> https://github.com/DanielYKPan/date-time-picker ..但出现版本不匹配错误]

我想使用 -->Picker 与 rangeFrom 和 rangeTo 选择

请帮我解决错误并在我的代码中实现它。

错误

   ERROR in multi ./src/scss/style.scss ./src/~ng-pick- 
   datetime/assets/style/picker.min.css
  Module not found: Error: Can't resolve 
  '/home/dell/Downloads/Datshare/Adaani5.0 (another copy).0/src/~ng- 
    pick-datetime/assets/style/picker.min.css' in 
   '/home/dell/Downloads/Datshare/Adaani5.0 (another copy).0'
   ERROR in Error: Metadata version mismatch for module 
  /home/dell/Downloads/Datshare/Adaani5.0 (another 
  copy).0/node_modules/ng-pick-datetime/picker.d.ts, found version 4, 
  expected 3, resolving symbol MasterSystemModule in 
  /home/dell/Downloads/Datshare/Adaani5.0 (another 
   copy).0/src/app/master-system/master-system.module.ts, resolving 
  symbol MasterSystemModule in /home/dell/Downloads/Datshare/Adaani5.0 
  (another copy).0/src/app/master-system/master-system.module.ts
  at syntaxError (/home/dell/Downloads/Datshare/Adaani5.0 (another 
  copy).0/node_modules/@angular/compiler
  /bundles/compiler.umd.js:1725:34)
   at simplifyInContext (/home/dell/Downloads/Datshare/
   Adaani5.0 (another 
   copy).0/node_modules/@angular/compiler/
  bundles/compiler.umd.js:24949:23)
  at StaticReflector.simplify (/home/dell/Downloads/Datshare/Adaani5.0 
   (anothercopy).0/node_modules/@angular/
   compiler/bundles/compiler.umd.js:24 
   961:13)
   at StaticReflector.annotations 
   (/home/dell/Downloads/Datshare/Adaani5.0 (another 
    copy).0/node_modules/@angular/compiler
    /bundles/compiler.umd.js:24391:41)
    at _getNgModuleMetadata (/home/dell/Downloads/Datshare/Adaani5.0 
    (another copy).0/node_modules/@angular/compiler- 
    cli/src/ngtools_impl.js:138:31)
     at _extractLazyRoutesFromStaticModule 
    (/home/dell/Downloads/Datshare/Adaani5.0 (another 
    copy).0/node_modules/@angular/compiler- 
   cli/src/ngtools_impl.js:109:26)
    at includeLazyRouteAndSubRoutes 
    (/home/dell/Downloads/Datshare/Adaani5.0 (another 
   copy).0/node_modules/@angular/compiler- 
   cli/src/ngtools_impl.js:66:25)
    at Array.reduce (<anonymous>)
  at Object.listLazyRoutesOfModule 
   (/home/dell/Downloads/Datshare/Adaani5.0 (another 
    copy).0/node_modules/@angular/compiler-cli/
   src/ngtools_impl.js:54:36)
   at Function.NgTools_InternalApi_NG_2.listLazyRoutes 
  (/home/dell/Downloads/Datshare/Adaani5.0 (another 
  copy).0/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
  at AotPlugin._getLazyRoutesFromNgtools 
  (/home/dell/Downloads/Datshare/Adaani5.0 (another 
   copy).0/node_modules/@ngtools/webpack/src/plugin.js:240:66)
  at _donePromise.Promise.resolve.then.then.then.then.then 
 (/home/dell/Downloads/Datshare/Adaani5.0 (another 
  copy).0/node_modules/@ngtools/webpack/src/plugin.js:493:24)
  at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

   webpack: Failed to compile.

transaction.component.html

   <form [formGroup]="dateTransactionForm">
    <div class=" form-inline">
      <table id="searchTableStyle">
        <tr>
            <td style="width:55%">
            <div class="form-group">

        <strong style=" font-size: 14px ;color: #333;">From: </strong>

               <label>
                  Date Time Range From:
                  <input [owlDateTimeTrigger]="dt12" 
                   [owlDateTime]="dt12"
                         [(ngModel)]="selectedMoments"
                         [selectMode]="'rangeFrom'">
                  <owl-date-time #dt12></owl-date-time>
              </label>

            </div>
          </td>


          <td style="width:55%">
            <div class="form-group ">
              <strong style=" font-size: 14px ;color: #333;">To: 
         </strong>

                <label>
                    Date Time Range To:
                    <input [owlDateTimeTrigger]="dt13" 
                    [owlDateTime]="dt13"
                           [(ngModel)]="selectedMoments"
                           [selectMode]="'rangeTo'">
                    <owl-date-time #dt13></owl-date-time>
                </label>


            </div>
          </td>

transaction.component.ts

  import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick- 
  datetime';
  import { BrowserModule } from '@angular/platform-browser';

主系统.module.ts

  import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick- 
  datetime';
  import { BrowserModule } from '@angular/platform-browser';



 @NgModule({
  imports: [
 BrowserModule,
  OwlDateTimeModule, OwlNativeDateTimeModule,

  ],

角-cli.json

    "styles": [
            "scss/style.scss",
            "~ng-pick-datetime/assets/style/picker.min.css"
         ],

标签： angulardatetimepicker

解决方案

好的，从消息看来，可能存在两个问题。1.你没有正确安装，或者没有导入模块。2. 您使用的输入与您使用的版本不同。

那么：您是否浏览过此处的“如何使用”部分？前三个步骤对于第四步的工作很重要。

根据您的编辑进行编辑：

"styles": [
            "scss/style.scss",
            "~ng-pick-datetime/assets/style/picker.min.css"
         ],

应该是这样的：

"styles": [
            "scss/style.scss",
         ],

您的项目结构中有一个文件，就在index.html和main.ts附近，名为style.css或style.scss。你应该把它放在@import "~ng-pick-datetime/assets/style/picker.min.css";那里，靠近文件的顶部。

而且，你这样做了吗？

使用 npm 安装：npm install ng-pick-datetime --save

推荐阅读