如何在angular4/angular2 +中实现[owlDateTime] [英] how to implement [owlDateTime] in angular4/angular2+
问题描述
我正在尝试在我的angular2 +(或更确切地说是angular4)代码中实现owlDateTime. 我参考了- https://danielykpan.github.io/date-time-picker/
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/
[而且我什至尝试-> https://github.com/DanielYKPan/date时间选择器 ..但出现版本不匹配错误]
[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 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"
],
推荐答案
好的，从该消息看来，可能存在两个可能的问题. 1.您未正确安装它，或未导入模块. 2.您使用的输入版本与您使用的版本不同.
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.
根据您的编辑进行
"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";放在文件顶部附近.
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?
使用npm安装:
npm install ng-pick-datetime --save
这篇关于如何在angular4/angular2 +中实现[owlDateTime]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
