ngx-bootstrap-datetime-picker
Version:
A small Angular 4 plugin for datetime selection.
250 lines (228 loc) • 9.08 kB
HTML
<div #control
class="input-group ngx-numeric-datetime-picker">
<div class="form-control dropdown-toggle"
data-toggle="dropdown">
<ng-container *ngIf="selection == null">{{options.placeHolder}}</ng-container>
<ng-container *ngIf="selection != null">{{format(selection.toDateTime())}}</ng-container>
</div>
<span class="input-group-addon dropdown-toggle"
data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<ul class="dropdown-menu"
(click)="clickDropdownMenu($event)">
<li>
<!--Datetime picker control-->
<div class="mtr-datepicker">
<!--Date selection -->
<div class="mtr-row">
<!--Month-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
(click)="updateMonth(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.month)">
<input #monthBox
type="number"
class="mtr-input months"
placeholder="Months"
max="12"
min="1"
[(ngModel)]="time.month"
*ngIf="editorMode == NgxDateTimePickerEditorMode.month"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.month, true)">
<div class="mtr-values">
<div class="mtr-default-value-holder"
*ngIf="editorMode != NgxDateTimePickerEditorMode.month">
<div class="mtr-default-value has-name">
{{this.time.month}}
</div>
<div class="mtr-default-value-name">
{{this.monthNames[this.time.month - 1]}}
</div>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateMonth(-1)">
<span></span>
</div>
</div>
<!--Day-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
(click)="updateDate(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.day)">
<div class="mtr-values">
<input #dayBox
type="number"
class="mtr-input dates"
placeholder="Day"
min="1"
[(ngModel)]="time.day"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.day, true)"
*ngIf="editorMode == NgxDateTimePickerEditorMode.day">
<div class="mtr-default-value-holder"
*ngIf="editorMode != NgxDateTimePickerEditorMode.day">
<ng-container *ngIf="this.time != null && this.time.toDateTime() != null">
<div class="mtr-default-value has-name">
{{this.time.toDateTime().getDate()}}
</div>
<div class="mtr-default-value-name">
{{this.dayNames[this.time.toDateTime().getDay()]}}
</div>
</ng-container>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateDate(-1)">
<span></span>
</div>
</div>
<!--Year-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
disabled="time.year >= options.iMaxYear"
(click)="updateYear(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.year)">
<input #yearBox
type="number"
class="mtr-input years"
placeholder="Year"
maxlength="4"
max="9999"
min="0"
[(ngModel)]="time.year"
*ngIf="editorMode == NgxDateTimePickerEditorMode.year"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.year, true)">
<div class="mtr-values"
*ngIf="editorMode != NgxDateTimePickerEditorMode.year">
<div class="mtr-default-value-holder">
<div class="mtr-default-value">
{{time.year}}
</div>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateYear(-1)">
<span></span>
</div>
</div>
</div>
<!--Separator-->
<div class="mtr-clearfix"></div>
<!--Time control-->
<div class="mtr-row"
*ngIf="options != null && options.bTimePickerSupport">
<!--Hour-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
(click)="updateHour(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.hour)">
<input #hourBox
type="number"
class="mtr-input hours"
[(ngModel)]="time.hour"
min="0"
max="23"
*ngIf="editorMode == NgxDateTimePickerEditorMode.hour"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.hour, true)">
<div class="mtr-values"
*ngIf="editorMode != NgxDateTimePickerEditorMode.hour">
<div class="mtr-default-value-holder">
<div class="mtr-default-value">
<span>{{time.hour}}</span>
</div>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateHour(-1)">
<span></span>
</div>
</div>
<!--Minute-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
(click)="updateMinute(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.minute)">
<input #minuteBox
type="number"
class="mtr-input minutes"
[(ngModel)]="time.minute"
min="0"
max="59"
*ngIf="editorMode == NgxDateTimePickerEditorMode.minute"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.minute, true)">
<div class="mtr-values"
*ngIf="editorMode != NgxDateTimePickerEditorMode.minute">
<div class="mtr-default-value-holder">
<div class="mtr-default-value">
{{time.minute}}
</div>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateMinute(-1)">
<span></span>
</div>
</div>
<!--Second-->
<div class="mtr-input-slider">
<div class="mtr-arrow up"
(click)="updateSecond(1)">
<span></span>
</div>
<div class="mtr-content"
(click)="focus(NgxDateTimePickerEditorMode.second)">
<input #secondBox
class="mtr-input minutes"
[(ngModel)]="time.second"
type="number"
min="0"
max="59"
*ngIf="editorMode == NgxDateTimePickerEditorMode.second"
(blur)="cancelFocus(NgxDateTimePickerEditorMode.second, true)">
<div class="mtr-values"
*ngIf="editorMode != NgxDateTimePickerEditorMode.second">
<div class="mtr-default-value-holder">
<div class="mtr-default-value">
{{time.second}}
</div>
</div>
</div>
</div>
<div class="mtr-arrow down"
(click)="updateSecond(-1)">
<span></span>
</div>
</div>
</div>
<!--Footer-->
<div class="footer">
<button class="btn btn-info btn-block"
(click)="confirmSelection()">
Ok
</button>
</div>
</div>
</li>
</ul>
</div>