how to implement [owlDateTime] in angular4/angular

Question

I am trying to implement owlDateTime in my angular2+ (or rather angular4) code. I have taken its reference from - https://danielykpan.github.io/date-time-picker/

[And i even tried --> https://github.com/DanielYKPan/date-time-picker ..but got version mismatch error]

I want to use -->Picker with rangeFrom and rangeTo selection

Please help me resolve the error and implement it in my code.

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

master-system.module.ts

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



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

  ],

angular-cli.json

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

Answer 1

Ok so, from the message it looks like there can be two possible problems. 1. You didn't install it correctly, or didn't import the modules. 2. You are using inputs from different version than the version you are using.

So: Did you go through the How to Use section here? The first three steps are important for the fourth step to work.

EDIT based on your edit:

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

should be as it was:

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

There is a file in your project structure, right near the index.html and main.ts, called style.css or style.scss. You should put the @import "~ng-pick-datetime/assets/style/picker.min.css"; there, near the top of the file.

And, did you do this?

Install with npm: npm install ng-pick-datetime --save