inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #887 from Alfresco/dev-denys-632

Browse Source 
Value picker dialog for Date widget
This commit is contained in:
Maurizio Vitale 2016-10-12 09:28:03 +01:00 committed by GitHub
commit bb9a9c23bd
5 changed files with 84 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ng2-components/ng2-activiti-form/package.json
View File

@ -63,6 +63,7 @@
"ng2-translate": "2.5.0",
"moment": "2.15.1",
"md-date-time-picker": "^2.2.0",
"alfresco-js-api": "^0.3.0",
"ng2-alfresco-core": "0.3.2"

4
ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.css
View File

@ -2,6 +2,10 @@
width: 100%;
}
.date-widget--button {
margin-top: 15px;
}
.date-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}

35
ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html
View File

@ -1,12 +1,25 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
[class.date-widget__invalid]="!field.isValid">
<input class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[attr.required]="isRequired()"
[(ngModel)]="field.value"
(ngModelChange)="checkVisibility(field)"
[disabled]="field.readOnly">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--11-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label date-widget"
[class.date-widget__invalid]="!field.isValid">
<input id="dateInput"
class="mdl-textfield__input"
type="text"
[attr.id]="field.id"
[attr.required]="isRequired()"
[(ngModel)]="field.value"
(ngModelChange)="onDateChanged()"
(onOk)="onDateSelected()"
[disabled]="field.readOnly">
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}} (d-M-yyyy)</label>
<span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
</div>
</div>
<div class="mdl-cell mdl-cell--1-col">
<button
class="mdl-button mdl-js-button mdl-button--icon date-widget--button"
(click)="datePicker.toggle()">
<i class="material-icons">date_range</i>
</button>
</div>
</div>

56
ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, ElementRef } from '@angular/core';
import { Component, ElementRef, OnInit } from '@angular/core';
import { TextFieldWidgetComponent } from './../textfield-widget.component';
@Component({
@ -24,10 +24,62 @@ import { TextFieldWidgetComponent } from './../textfield-widget.component';
templateUrl: './date.widget.html',
styleUrls: ['./date.widget.css']
})
export class DateWidget extends TextFieldWidgetComponent {
export class DateWidget extends TextFieldWidgetComponent implements OnInit {
private dateFormat: string = 'D-M-YYYY';
datePicker: any;
constructor(elementRef: ElementRef) {
super(elementRef);
}
ngOnInit() {
let settings: any = {
type: 'date',
future: moment().add(21, 'years')
};
if (this.field) {
if (this.field.minValue) {
let min = moment(this.field.minValue, this.dateFormat);
if (min.isValid()) {
settings.past = min;
}
}
if (this.field.maxValue) {
let max = moment(this.field.maxValue, this.dateFormat);
if (max.isValid()) {
settings.future = max;
}
}
if (this.field.value) {
settings.time = moment(this.field.value, this.dateFormat);
}
}
this.datePicker = new mdDateTimePicker.default(settings);
this.datePicker.trigger = this.elementRef.nativeElement.querySelector('#dateInput');
}
onDateChanged() {
if (this.field.value) {
this.datePicker.time = moment(this.field.value, this.dateFormat);
}
this.checkVisibility(this.field);
}
onDateSelected() {
this.field.value = this.datePicker.time.format('DD-MM-YYYY');
let el = this.elementRef.nativeElement;
let container = el.querySelector('.mdl-textfield');
if (container) {
container.MaterialTextfield.change(this.field.value.toString());
}
}
}

1
ng2-components/ng2-activiti-form/src/declarations.d.ts vendored
View File

@ -17,6 +17,7 @@
declare var module: any;
declare var moment: any;
declare let mdDateTimePicker: any;
// MDL
declare var componentHandler: any;