first commit
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
<div class="app-content content" >
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Date Picker</h4>
|
||||
</div>
|
||||
</div>
|
||||
<section id="datePicker">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-12 col-xl-6" *blockUI="'simpleDatepicker'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadSimpleDatepicker($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Simple datepicker
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>
|
||||
|
||||
<div class="block mt-1 mb-3">
|
||||
<button class="btn btn-sm btn-outline-primary mr-1" (click)="dp.navigateTo({year: 2013, month: 2})">To
|
||||
Feb 2013</button>
|
||||
<button class="btn btn-sm btn-outline-primary mr-1" (click)="dp.navigateTo()">To current
|
||||
month</button>
|
||||
<button class="btn btn-sm btn-outline-primary mr-1" (click)="selectToday()">Select Today</button>
|
||||
</div>
|
||||
|
||||
<p>Month: {{ date.month }}.{{ date.year }}</p>
|
||||
<p>Model: {{ model | json }}</p>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<div class="col-lg-12 col-xl-6" *blockUI="'disableDatepicker'; message: 'Loading'">
|
||||
<m-card [options]="options" (reloadFunction)="reloadDisableDatepicker($event)">
|
||||
<ng-container mCardHeaderTitle>
|
||||
Disabled datepicker
|
||||
</ng-container>
|
||||
<ng-container mCardBody>
|
||||
<ngb-datepicker [(ngModel)]="disabledModel" [disabled]="disabled"></ngb-datepicker>
|
||||
|
||||
<div class="mt-1">
|
||||
<button class="btn btn-sm btn-outline-{{disabled ? 'danger' : 'success'}}"
|
||||
(click)="disabled = !disabled">
|
||||
{{ disabled ? "disabled" : "enabled"}}
|
||||
</button>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-12 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Datepicker in a popup</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="popupModel"
|
||||
ngbDatepicker #d2="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d2.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<p class="mt-4">Model: {{ popupModel | json }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom day view</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>This datepicker uses a custom template to display days. All week-ends are displayed with an orange
|
||||
background.</p>
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker
|
||||
[dayTemplate]="customDay" [markDisabled]="isDisabled" #d3="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d3.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected"
|
||||
let-disabled="disabled" let-focused="focused">
|
||||
<span class="custom-day" [class.weekend]="isWeekend(date)"
|
||||
[class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
|
||||
{{ date.day }}
|
||||
</span>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-lg-12 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Multiple months</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<ngb-datepicker [displayMonths]="displayMonths" [navigation]="navigation"></ngb-datepicker>
|
||||
|
||||
<p class="pt-1">Inline</p>
|
||||
|
||||
<form class="form-inline">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [displayMonths]="displayMonths"
|
||||
[navigation]="navigation" ngbDatepicker #d="ngbDatepicker">
|
||||
<div class="input-group-append">
|
||||
<div class="input-group-text" (click)="d.toggle()">
|
||||
<i class="fa fa-calendar" style="cursor: pointer;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="pt-1">Options</p>
|
||||
|
||||
<select class="custom-select" [(ngModel)]="displayMonths">
|
||||
<option [ngValue]="1">One month</option>
|
||||
<option [ngValue]="2">Two months</option>
|
||||
</select>
|
||||
|
||||
<select class="custom-select" [(ngModel)]="navigation">
|
||||
<option value="none">Without navigation</option>
|
||||
<option value="select">With select boxes</option>
|
||||
<option value="arrows">Without select boxes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-xl-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Range Date Picker</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body" fxFlex="auto" [perfectScrollbar]="config">
|
||||
<ngb-datepicker #dp1111 ngModel (ngModelChange)="onDateChange($event)" [displayMonths]="2"
|
||||
[dayTemplate]="t" outsideDays="hidden">
|
||||
</ngb-datepicker>
|
||||
|
||||
<ng-template #t let-date let-focused="focused">
|
||||
<span class="custom-day" [class.focused]="focused" [class.range]="isRange(date)"
|
||||
[class.faded]="isHovered(date) || isInside(date)" (mouseenter)="hoveredDate = date"
|
||||
(mouseleave)="hoveredDate = null">
|
||||
{{ date.day }}
|
||||
</span>
|
||||
</ng-template>
|
||||
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<p>From: {{ fromDate | json }} </p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<p>To: {{ toDate | json }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3 mb-1">
|
||||
<h4 class="text-uppercase">Time Picker</h4>
|
||||
</div>
|
||||
</div>
|
||||
<section id="timePicker">
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Basic Timepicker</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
|
||||
<hr>
|
||||
<p>Selected time: {{time | json}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Meridian</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ngb-timepicker [(ngModel)]="meridianTime" [meridian]="meridian"></ngb-timepicker>
|
||||
<button class="btn btn-outline-{{meridian ? 'success' : 'danger'}} mb-3 mt-3"
|
||||
(click)="toggleMeridian()">
|
||||
Meridian - {{meridian ? "ON" : "OFF"}}
|
||||
</button>
|
||||
<hr>
|
||||
<p>Selected time: {{meridianTime | json}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Seconds</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ngb-timepicker [(ngModel)]="secondsTime" [seconds]="seconds"></ngb-timepicker>
|
||||
<button class="btn btn-outline-{{seconds ? 'success' : 'danger'}} mb-3 mt-3" (click)="toggleSeconds()">
|
||||
Seconds - {{seconds ? "ON" : "OFF"}}
|
||||
</button>
|
||||
<hr>
|
||||
<p>Selected time: {{secondsTime | json}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" matchHeight="card">
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Spinners</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>This datepicker uses a custom template to display days. All week-ends are displayed with an orange
|
||||
background.</p>
|
||||
<ngb-timepicker [(ngModel)]="spinnersTime" [spinners]="spinners"></ngb-timepicker>
|
||||
|
||||
<button class="m-t-1 btn btn-outline-{{spinners ? 'success' : 'danger'}} mb-3 mt-3"
|
||||
(click)="toggleSpinners()">
|
||||
Spinners - {{spinners ? "ON" : "OFF"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom steps</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<ngb-timepicker [(ngModel)]="stepsTime" [seconds]="true" [hourStep]="hourStep" [minuteStep]="minuteStep"
|
||||
[secondStep]="secondStep"></ngb-timepicker>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<label for="changeHourStep">Hour Step</label>
|
||||
<input type="number" class="form-control form-control-sm" [(ngModel)]="hourStep" />
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<label for="changeMinuteStep">Minute Step</label>
|
||||
<input type="number" class="form-control form-control-sm" [(ngModel)]="minuteStep" />
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<label for="changeSecondStep">Second Step</label>
|
||||
<input type="number" class="form-control form-control-sm" [(ngModel)]="secondStep" />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p>Selected time: {{stepsTime | json}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Custom validation</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<p>Illustrates custom validation, you have to select time between 12:00 and 13:59</p>
|
||||
<div class="form-group" [class.has-success]="ctrl.valid" [class.has-danger]="!ctrl.valid">
|
||||
<ngb-timepicker [(ngModel)]="validationTime" [formControl]="ctrl" required></ngb-timepicker>
|
||||
<div class="form-control-feedback">
|
||||
<div *ngIf="ctrl.valid">Great choice</div>
|
||||
<div *ngIf="ctrl.errors && ctrl.errors['required']">Select some time during lunchtime</div>
|
||||
<div *ngIf="ctrl.errors && ctrl.errors['tooLate']">Oh no, it's way too late</div>
|
||||
<div *ngIf="ctrl.errors && ctrl.errors['tooEarly']">It's a bit too early</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p>Selected time: {{validationTime | json}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user