Add text-mask on date fields.

This commit is contained in:
Alexis Lahouze 2017-07-26 23:09:16 +02:00
parent 931ef38f29
commit c546cbf833
3 changed files with 8 additions and 5 deletions

View File

@ -56,6 +56,7 @@
"angular-messages": "^1.6.5", "angular-messages": "^1.6.5",
"angular-resource": "^1.6.5", "angular-resource": "^1.6.5",
"angular-strap": "^2.3.12", "angular-strap": "^2.3.12",
"angular2-text-mask": "^8.0.2",
"base64util": "^1.0.2", "base64util": "^1.0.2",
"bootbox": "^4.4.0", "bootbox": "^4.4.0",
"bootstrap": "4.0.0-alpha.6", "bootstrap": "4.0.0-alpha.6",

View File

@ -9,6 +9,7 @@ import { RestangularModule } from 'ngx-restangular';
import { NgLoggerModule, Level } from '@nsalaun/ng-logger'; import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastrModule } from 'ngx-toastr'; import { ToastrModule } from 'ngx-toastr';
import { TextMaskModule } from 'angular2-text-mask';
import { ScheduleService } from './schedule.service'; import { ScheduleService } from './schedule.service';
import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component'; import { ScheduleDeleteModalComponent } from './scheduleDeleteModal.component';
@ -33,7 +34,8 @@ export function accountIdServiceFactory(i: any) {
NgLoggerModule, NgLoggerModule,
RestangularModule, RestangularModule,
ToastrModule, ToastrModule,
NgbModule NgbModule,
TextMaskModule
], ],
providers: [ providers: [
ScheduleService, ScheduleService,

View File

@ -15,8 +15,7 @@ import { Schedule } from './schedule';
<label class="col-sm-4 control-label" for="start-date">Date de début</label> <label class="col-sm-4 control-label" for="start-date">Date de début</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input class="form-control" id="start-date" name="start_date" <input class="form-control" id="start-date" name="start_date"
type="text" [(ngModel)]="schedule.start_date" [(ngModel)]="schedule.start_date" [textMask]="{mask: dateMask}"
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
placeholder="Schedule start date"> placeholder="Schedule start date">
</div> </div>
</div> </div>
@ -25,8 +24,7 @@ import { Schedule } from './schedule';
<label class="col-sm-4 control-label" for="stop-date">Date de fin</label> <label class="col-sm-4 control-label" for="stop-date">Date de fin</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input class="form-control" id="stop-date" name="stop_date" <input class="form-control" id="stop-date" name="stop_date"
type="text" [(ngModel)]="schedule.stop_date" [(ngModel)]="schedule.stop_date" [textMask]="{mask: dateMask}"
bs-datepicker data-date-format="yyyy-MM-dd" data-timezone="UTC"
placeholder="Schedule stop date"> placeholder="Schedule stop date">
</div> </div>
</div> </div>
@ -78,6 +76,8 @@ export class ScheduleFormComponent implements AfterViewChecked {
@Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>(); @Output() onValid: EventEmitter<boolean> = new EventEmitter<boolean>();
@ViewChild('form') form: NgForm; @ViewChild('form') form: NgForm;
dateMask = ['2', '0', /\d/, /\d/, '-', /[0-1]/, /\d/, '-', /[0-3]/, /\d/];
constructor() {} constructor() {}
ngAfterViewChecked() { ngAfterViewChecked() {