Angular 2 使用 PrimeNG 打字稿的日历
Calendar on Angular 2 typescript using PrimeNG
所以我开始使用 PrimeNG,并且关注了网站 documentation,其中说明了要使其正常工作应该做的所有事情。我按照网站上的所有内容进行了操作,但是我的 UI 看起来有点奇怪,就像下面的图片一样,有人知道为什么会这样吗?
重要代码部分:
TS
import {CalendarModule} from 'primeng/primeng';
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
CalendarModule],
HTML
<p-calendar [(ngModel)]="startDate" [showIcon]="true" name="startDate"></p-calendar> <span style="margin-left:35px"></span>
另外,附带说明一下,有谁知道如何使用该网站提供的其中一个主题吗?我试图找到免费代码,但找不到。谢谢大家的帮助。
日历ui图片:
查看 。 PrimeNG 团队经常将他们的最新快照用于他们的在线文档,实际发布可能仍然有点落后。
JavaScript 库依赖项
They're currently reimplementing the calendar component to be purely native。从 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>
或:
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
CSS 依赖关系
还要确保您已正确设置所有相关 CSS 依赖项。 PrimeNG documentation 的相应页面列出了以下要包含的文件:
<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" />
所以我开始使用 PrimeNG,并且关注了网站 documentation,其中说明了要使其正常工作应该做的所有事情。我按照网站上的所有内容进行了操作,但是我的 UI 看起来有点奇怪,就像下面的图片一样,有人知道为什么会这样吗?
重要代码部分:
TS
import {CalendarModule} from 'primeng/primeng';
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
CalendarModule],
HTML
<p-calendar [(ngModel)]="startDate" [showIcon]="true" name="startDate"></p-calendar> <span style="margin-left:35px"></span>
另外,附带说明一下,有谁知道如何使用该网站提供的其中一个主题吗?我试图找到免费代码,但找不到。谢谢大家的帮助。
日历ui图片:
查看
JavaScript 库依赖项
They're currently reimplementing the calendar component to be purely native。从 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>
或:
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
CSS 依赖关系
还要确保您已正确设置所有相关 CSS 依赖项。 PrimeNG documentation 的相应页面列出了以下要包含的文件:
<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" />