как реализовать [owlDateTime] в angular4 / angular2 + - PullRequest
Новая
       21

как реализовать [owlDateTime] в angular4 / angular2 +

0 голосов
/ 07 мая 2018

Я пытаюсь реализовать owlDateTime в своем коде angular2 + (или, скорее, angular4). Я взял его ссылку от - https://danielykpan.github.io/date-time-picker/

[И я даже пытался -> https://github.com/DanielYKPan/date-time-picker .. но получил ошибку несоответствия версий]

Я хочу использовать -> Пикер с rangeFrom и rangeTo selection

Пожалуйста, помогите мне устранить ошибку и внедрить ее в мой код.

Error 

   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"
         ],

1 Ответ

0 голосов
/ 07 мая 2018

Хорошо, из сообщения видно, что могут быть две возможные проблемы. 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

...