Kalender på Angular 2 typescript med PrimeNG
Så jag började använda PrimeNG och jag följde dokumentationen på webbplatsen där det står allt man bör göra för att få det att fungera. Jag följde allt till punkt och pricka på webbplatsen, men mitt användargränssnitt ser lite konstigt ut, precis som bilden nedan, vet någon varför det händer?
Viktiga koddelar:
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>
Också, på en annan notering, vet någon hur man använder ett av de teman som webbplatsen erbjuder? Jag försökte hitta koden för de gratis och kunde inte hitta den. Tack för all din hjälp.
Kalender-ui-bild:
Svar #1
Kolla in det accepterade svaret i detta SO-inlägg. PrimeNG-teamet använder ofta sin senaste snapshot för sin online-dokumentation och den faktiska releasen kan fortfarande ligga något efter.
JavaScript-biblioteksberoenden
De håller för närvarande på att återskapa kalenderkomponenten för att vara helt inhemsk. Från och med PrimeNG 1.0.0-beta.19 kommer detta förmodligen att fungera. Fram till dess måste du lägga till en massa beroenden:
<!-- 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>
eller :
<script src="node_modules/primeui/primeui-ng-all.min.js"></script>
CSS-beroenden
Se också till att du har alla relevanta CSS-beroenden korrekt uppsatta. Den respektive sidan i PrimeNG-dokumentationen listar följande filer som ska inkluderas:
<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" />