Question

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

[我甚至尝试过 - ＆gt; https://github.com/DanielYKPan/date-time-picker ..但是版本不匹配错误]

我想使用 - ＆gt;带有rangeFrom和rangeTo选择的Picker

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

错误

   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';

主-system.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"
         ],

Answer 1

好的，从消息看起来可能会出现两个问题。 1.您未正确安装，或未导入模块。 2.您使用的输入版本与您使用的版本不同。

所以：你经历过How to Use section here吗？前三个步骤对于第四步工作非常重要。

根据您的修改编辑：

"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

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

1 个答案: