peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 20:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add date picker

Browse Source
This commit is contained in:
Peter Maquiran
2021-06-18 12:02:14 +01:00
parent 0672ab9971
commit d83904f48d
9 changed files with 181 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+16
View File
@@ -372,6 +372,22 @@
}
}
},
"@angular-material-components/datetime-picker": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@angular-material-components/datetime-picker/-/datetime-picker-6.0.3.tgz",
"integrity": "sha512-Pc11woDH0leghqhvqRDKy4/bk3sdYV8f7IJO8om50YTeF2/y9+RfQinxL1JTaojdJ/PBeyGTJlsK3wdxjVZ0cA==",
"requires": {
"tslib": "^2.1.0"
}
},
"@angular-material-components/moment-adapter": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/@angular-material-components/moment-adapter/-/moment-adapter-6.0.0.tgz",
"integrity": "sha512-YnUfaaYIsK1xeN3D84RGc500ieh7BrgSK1DNh3abneeKGTS9es9FJPkqK3JW9P+8460YQ4hxrMMeerGLG30C5A==",
"requires": {
"tslib": "^2.1.0"
}
},
"@angular/animations": {
"version": "11.2.2",
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-11.2.2.tgz",
package.json
+2
View File
@@ -16,6 +16,8 @@
"@angular-devkit/architect": "^0.1102.1",
"@angular-devkit/core": "^11.2.1",
"@angular-devkit/schematics": "^11.2.1",
"@angular-material-components/datetime-picker": "^6.0.3",
"@angular-material-components/moment-adapter": "^6.0.0",
"@angular/animations": "^11.1.0",
"@angular/cdk": "^11.2.13",
"@angular/common": "^11.2.2",
src/app/app.module.ts
+12 -1
View File
@@ -33,6 +33,12 @@ import { ChatService } from './services/chat.service';
import {MatDatepickerModule} from '@angular/material/datepicker';
// import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
import {
NgxMatDatetimePickerModule,
NgxMatNativeDateModule,
NgxMatTimepickerModule
} from '@angular-material-components/datetime-picker';
@NgModule({
declarations: [AppComponent],
@@ -50,7 +56,12 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
HttpClientModule,
// NgbModule,
NoopAnimationsModule,
MatDatepickerModule
MatDatepickerModule,
//
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NgxMatNativeDateModule
],
providers: [
StatusBar,
src/app/home/home.page.ts
+1 -1
View File
@@ -65,7 +65,7 @@ export class HomePage implements OnInit {
private platform: Platform) {
router.events.subscribe((val) => {
document.querySelectorAll('ion-modal').forEach((e) => e.remove())
// document.querySelectorAll('ion-modal').forEach((e) => e.remove())
});
{
src/app/pages/agenda/agenda.page.ts
+7 -1
View File
@@ -26,6 +26,7 @@ import { NewEventPage } from './new-event/new-event.page';
import { AuthService } from 'src/app/services/auth.service';
import { User } from 'src/app/models/user.model';
import { letProto } from 'rxjs-compat/operator/let';
import { DateAdapter } from '@angular/material/core';
@Component({
selector: 'app-agenda',
@@ -158,7 +159,12 @@ export class AgendaPage implements OnInit {
private router: Router,
private alertController: AlertService,
private sanitizer: DomSanitizer,
authService: AuthService) {
authService: AuthService,
private dateAdapter: DateAdapter<any>
) {
this.dateAdapter.setLocale('es');
this.locale = 'pt'
this.loggeduser = authService.ValidatedUser;
src/app/shared/agenda/new-event/new-event.module.ts
+24
View File
@@ -14,6 +14,17 @@ import {MatInputModule} from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment-adapter";
import {
NgxMatDatetimePickerModule,
NgxMatNativeDateModule,
NgxMatTimepickerModule
} from '@angular-material-components/datetime-picker';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatSelectModule } from '@angular/material/select';
import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
@NgModule({
imports: [
@@ -25,7 +36,20 @@ import { MatMomentDateModule, MomentDateAdapter } from "@angular/material-moment
MatDatepickerModule,
MatInputModule,
MatNativeDateModule,
//
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NgxMatNativeDateModule,
//
NgxMatMomentModule,
// BrowserAnimationsModule,
// BrowserModule,
MatSelectModule,
//MatRadioModule,
//MatCheckboxModule,
MatButtonModule,
ReactiveFormsModule
],
declarations: [NewEventPage],
exports: [NewEventPage]
src/app/shared/agenda/new-event/new-event.page.html
+14 -2
View File
@@ -13,6 +13,18 @@
<ion-content>
<div class="main-content">
<!-- THIS -->
<!-- <mat-form-field>
<input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="dateControl"
[min]="minDate" [max]="maxDate" [disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi"
[color]="color" [enableMeridian]="enableMeridian">
</ngx-mat-datetime-picker>
</mat-form-field> -->
<!-- <form class="form-inline">
<div class="form-group">
<div class="input-group">
@@ -102,7 +114,7 @@
>
</ion-datetime>
<input
<!-- <input
class="d-none width-100"
placeholder="Início"
[matDatepicker]="picker"
@@ -110,7 +122,7 @@
(click)="picker.open()"
[(ngModel)]="postEvent.StartDate"
>
<mat-datepicker #picker></mat-datepicker>
<mat-datepicker #picker></mat-datepicker> -->
<!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
src/app/shared/agenda/new-event/new-event.page.ts
+100 -24
View File
@@ -21,21 +21,29 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
import * as _moment from 'moment';
import * as _rollupMoment from 'moment';
import {FormControl} from '@angular/forms';
import { NgxMatDateFormats } from '@angular-material-components/datetime-picker';
import { ThemePalette } from '@angular/material/core';
import { HttpClient } from '@angular/common/http';
import { NgZone, ViewChild } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS, NgxMatDateAdapter } from '@angular-material-components/datetime-picker';
const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
parse: {
dateInput: 'LL',
dateInput: "YYYY-MMMM-DD HH:mm"
},
display: {
dateInput: 'LL',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
dateInput: "DD MMM YYYY H:mm",
monthYearLabel: "MMM YYYY",
dateA11yLabel: "LL",
monthYearA11yLabel: "MMMM YYYY"
}
}
@Component({
selector: 'app-new-event',
@@ -45,13 +53,15 @@ export const MY_FORMATS = {
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
// application's root module. We provide it at the component level here, due to limitations of
// our example generation script.
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
},
// {
// provide: DateAdapter,
// useClass: MomentDateAdapter,
// deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
// },
{provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
// { provide: MAT_DATE_LOCALE, useValue: 'pt-br' },
// { provide: LOCALE_ID, useValue: "en-GB" }
]
})
@@ -62,6 +72,20 @@ export class NewEventPage implements OnInit {
eventBody: EventBody;
segment:string = "true";
public date: any;
public disabled = false;
public showSpinners = true;
public showSeconds = false;
public touchUi = false;
public enableMeridian = false;
public minDate: any;
public maxDate: any;
public stepHour = 1;
public stepMinute = 1;
public stepSecond = 1;
public color: ThemePalette = 'primary';
@Input() profile:string;
@Input() selectedSegment: string;
@Input() selectedDate: Date;
@@ -80,12 +104,10 @@ export class NewEventPage implements OnInit {
documents:SearchDocument[] = [];
minDate: string;
// minDate: string;
loggeduser: User;
date = new FormControl(moment());
// serializedDate = new FormControl((new Date()).toISOString());
@ViewChild('picker') picker: any;
constructor(
private modalController: ModalController,
@@ -94,13 +116,17 @@ export class NewEventPage implements OnInit {
private animationController: AnimationController,
private toastService: ToastService,
private userService: AuthService,
private http: HttpClient,
private zone: NgZone,
private dateAdapter: DateAdapter<any>
) {
this.dateAdapter.setLocale('pt');
this.loggeduser = userService.ValidatedUser;
}
ngOnInit() {
if(!this.restoreTemporaryData()){
// clear
@@ -178,6 +204,61 @@ export class NewEventPage implements OnInit {
this.setIntervenientCC.emit(this.taskParticipantsCc);
}
this.date = new Date(2021,9,4,5,6,7);
}
public formGroup = new FormGroup({
date: new FormControl(null, [Validators.required]),
date2: new FormControl(null, [Validators.required])
})
public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
public dateControlMinMax = new FormControl(new Date());
public options = [
{ value: true, label: 'True' },
{ value: false, label: 'False' }
];
public listColors = ['primary', 'accent', 'warn'];
public stepHours = [1, 2, 3, 4, 5];
public stepMinutes = [1, 5, 10, 15, 20, 25];
public stepSeconds = [1, 5, 10, 15, 20, 25];
toggleMinDate(evt: any) {
if (evt.checked) {
this._setMinDate();
} else {
this.minDate = null;
}
}
toggleMaxDate(evt: any) {
if (evt.checked) {
this._setMaxDate();
} else {
this.maxDate = null;
}
}
closePicker() {
this.picker.cancel();
}
private _setMinDate() {
const now = new Date();
this.minDate = new Date();
this.minDate.setDate(now.getDate() - 1);
}
private _setMaxDate() {
const now = new Date();
this.maxDate = new Date();
this.maxDate.setDate(now.getDate() + 1);
}
async getDoc(){
@@ -367,9 +448,4 @@ export class NewEventPage implements OnInit {
window['temp.path:/home/agenda/new-event.component.ts'] = {}
}
}
src/global.scss
+2 -2
View File
@@ -699,10 +699,10 @@ body, .blue-background{ background: #0782C9 !important;}
@media only screen and (min-width: 1365px) {
body{
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%);
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
}
.blue-background {
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%);
background: linear-gradient(270deg, #45BAFF 0%, #0782C9 23.44%, rgba(7, 130, 201, 0.9425) 78.13%, #45BAFF 100%) !important;
}
}