typescript 使用 PrimeNG 的 Angular 2 打字稿日历
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/40368880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calendar on Angular 2 typescript using PrimeNG
提问by Filipe Tabosa
So I started to use the PrimeNG and I was following the website documentationwhere it says everything that one should do in order to make it work. I followed everything to the point on the website, but my UI appears somewhat strange, just like the image bellow, does someone knows why it happens?
所以我开始使用 PrimeNG 并且我正在关注网站文档,其中说明了为了使其工作而应该做的一切。我按照网站上的所有内容进行了操作,但是我的用户界面看起来有些奇怪,就像下面的图片一样,有人知道为什么会这样吗?
Important code parts:
重要代码部分:
TS
TS
import {CalendarModule} from 'primeng/primeng';
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
CalendarModule],
HTML
HTML
<p-calendar [(ngModel)]="startDate" [showIcon]="true" name="startDate"></p-calendar> <span style="margin-left:35px"></span>
Also, on a side note, does anyone knows how to use one of the themes that the website presents? I tried to find the code for the free ones and could not find it. Thank you for all your help.
另外,顺便提一下,有谁知道如何使用该网站提供的主题之一?我试图找到免费代码的代码,但找不到。谢谢你的帮助。
Calendar ui image:
日历 ui 图像:
采纳答案by Jens Habegger
Check out the accepted answer in this SO post. The PrimeNG team is often using their latest snapshot for their online documentation and the actual release might still be a little behind.
查看此 SO 帖子中已接受的答案。PrimeNG 团队经常使用他们的最新快照作为他们的在线文档,而实际发布的版本可能仍然有点落后。
JavaScript library dependencies
JavaScript 库依赖项
They're currently reimplementing the calendar component to be purely native. Starting with PrimeNG 1.0.0-beta.19 this will probably work. Until then, you'll have to add a bunch of dependencies:
他们目前正在将日历组件重新实现为纯原生的。从 PrimeNG 1.0.0-beta.19 开始,这可能会起作用。在此之前,您必须添加一堆依赖项:
<!-- Datetimepicker, Slider, Schedule -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.1/jquery-ui-timepicker-addon.min.js"></script>
or:
或者:
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
CSS dependencies
CSS 依赖
Also make sure that you have all the relevent CSS dependencies correctly set up. The respective page of the PrimeNG documentationlists the following files to be included:
还要确保正确设置了所有相关的 CSS 依赖项。PrimeNG 文档的相应页面列出了以下要包含的文件:
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />