Skip to content
This repository has been archived by the owner on Feb 13, 2024. It is now read-only.

Commit

Permalink
Merge pull request #71 from jrquick17/invalid-bug
Browse files Browse the repository at this point in the history 
Invalid bug
  • Loading branch information
@JoshDSommer
JoshDSommer authored Oct 20, 2019
2 parents 4c8bc7b + 15d4582 commit b80ccd2
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 113 deletions.
7 changes: 4 additions & 3 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@ import {DatePickerComponent} from './datePicker.component/datePicker.component';
export class AppComponent {
title = 'app works!';

public dateTimeExample = null
public dateExample = null
public timeExample = null
public dateTimeExample = null;
public dateExample = null;
public timeExample = null;

@ViewChild('pickerToFocus') pickerToFocus: DatePickerComponent;

constructor() {

};

setToNow(): void {
Expand Down
164 changes: 84 additions & 80 deletions src/app/datePicker.component/datePicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,85 +19,89 @@ import {Renderer} from '../services/renderer.service';
})

export class DatePickerComponent implements OnInit, ControlValueAccessor {
@Input() selectedDate: Date;
@Input() min: string;
@Input() max: string;
@Input() placeholder: string;
@Input() inputTabIndex: number;
@Input() disableInput: boolean = false;
@Input() disableButton: boolean = false;
@Input() disablePicker: boolean = false;
@Input() doNotCloseOnDateSet: boolean = false;
@Input() styles: StyleObject = new StyleObject();

@Output() selectedDateChange = new EventEmitter<Date>();

@ViewChild('input') input: ElementRef;

@HostListener('document:click', ['$event'])
offClick(event) {
if (!this.eRef.nativeElement.contains(event.target)) {
this.pickerVisible = false;
@Input() selectedDate: Date;
@Input() min: string;
@Input() max: string;
@Input() placeholder: string;
@Input() inputTabIndex: number;
@Input() disableInput: boolean = false;
@Input() disableButton: boolean = false;
@Input() disablePicker: boolean = false;
@Input() doNotCloseOnDateSet: boolean = false;
@Input() styles: StyleObject = new StyleObject();

@Output() selectedDateChange = new EventEmitter<Date>();

@ViewChild('input') input: ElementRef;

@HostListener('document:click', ['$event'])
offClick(event) {
if (!this.eRef.nativeElement.contains(event.target)) {
this.pickerVisible = false;
}
}

pickerVisible: boolean = false;
isMobile: boolean;
invalid: boolean;

get formattedDate() {
return this.dateService.formatMMDDYYYY(this.selectedDate);
}

get mobileFormattedDate() {
return this.dateService.formatMobileYYYYMMDD(this.selectedDate);
}

constructor(
private isMobileService: IsMobileService,
public dateService: DateService,
private eRef: ElementRef,
private renderer: Renderer
) {
this.isMobile = isMobileService.isMobile;
this.placeholder = this.placeholder || '';
}

writeValue(value: Date) {
this.selectedDate = value;
}

registerOnChange(handler) {
this.selectedDateChange.subscribe(handler);
}

registerOnTouched() {}

// for use with the native html5 element. only emit's new valid dates.
setDate(date: string) {
this.invalid = !Date.parse(`${date} 00:00:00`);

if (!this.invalid) {
// set the time to zero so that values emitted on mobile are the same as on desktop
this.selectedDate = new Date(`${date} 00:00:00`);
this.selectedDateChange.emit(this.selectedDate);
}
}

ngOnInit() {
if (typeof this.selectedDate == 'string') {
this.selectedDate = new Date(this.selectedDate);
}
}

newDatePicked(date: Date): void {
this.invalid = false;

this.selectedDateChange.emit(date);
this.selectedDate = date;
}

closePicker(close: boolean): void {
this.pickerVisible = close;
}

focus():void {
this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
}
}

pickerVisible: boolean = false;
isMobile: boolean;
invalid: boolean;

get formattedDate() {
return this.dateService.formatMMDDYYYY(this.selectedDate);
}

get mobileFormattedDate() {
return this.dateService.formatMobileYYYYMMDD(this.selectedDate);
}

constructor(private isMobileService: IsMobileService, public dateService: DateService, private eRef: ElementRef, private renderer: Renderer) {
this.isMobile = isMobileService.isMobile;
this.placeholder = this.placeholder || '';
}

writeValue(value: Date) {
this.selectedDate = value;
}

registerOnChange(handler) {
this.selectedDateChange.subscribe(handler);
}

registerOnTouched() {}


// for use with the native html5 element. only emit's new valid dates.
setDate(date: string) {
const isValid = !!Date.parse(`${date} 00:00:00`);
if (isValid) {
// set the time to zero so that values emitted on mobile are the same as on desktop
this.selectedDate = new Date(`${date} 00:00:00`);
this.selectedDateChange.emit(this.selectedDate);
this.invalid = false;
} else {
this.invalid = true;
}
}

ngOnInit() {
if (typeof this.selectedDate == 'string') {
this.selectedDate = new Date(this.selectedDate);
}
}

newDatePicked(date: Date): void {
this.selectedDateChange.emit(date);
this.selectedDate = date;
}

closePicker(close: boolean): void {
this.pickerVisible = close;
}

focus():void {
this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
}
}
24 changes: 12 additions & 12 deletions src/app/dateTimePicker.component/dateTimePicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,24 +58,22 @@ export class DateTimePickerComponent implements OnInit, ControlValueAccessor {

}

writeValue(value: Date) {
this.selectedDateTime = value;
}
writeValue(value: Date) {
this.selectedDateTime = value;
}

registerOnChange(handler) {
this.selectedDateTimeChange.subscribe(handler);
}
registerOnChange(handler) {
this.selectedDateTimeChange.subscribe(handler);
}

registerOnTouched() {}
registerOnTouched() {}

setDateTime(dateTime: string) {
const isValid = !!Date.parse(dateTime);
if (isValid) {
this.invalid = !Date.parse(dateTime);

if (!this.invalid) {
this.selectedDateTime = new Date(dateTime);
this.selectedDateTimeChange.emit(this.selectedDateTime);
this.invalid = false;
} else {
this.invalid = true;
}
}

Expand All @@ -86,6 +84,8 @@ export class DateTimePickerComponent implements OnInit, ControlValueAccessor {
}

newDatePicked(date: Date): void {
this.invalid = false;

this.selectedDateTimeChange.emit(date);
this.selectedDateTime = date;
}
Expand Down
21 changes: 11 additions & 10 deletions src/app/services/isMobile.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,16 @@ import { Injectable } from '@angular/core';
@Injectable()
export class IsMobileService {
public isMobile: boolean;

constructor() {
this.isMobile = !!(window.navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
|| navigator.userAgent.match(/Opera Mini/i)
|| navigator.userAgent.match(/IEMobile/i));
this.isMobile = !!(window.navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
|| navigator.userAgent.match(/Opera Mini/i)
|| navigator.userAgent.match(/IEMobile/i));
}
}
}
15 changes: 7 additions & 8 deletions src/app/timePicker.component/timePicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,14 @@ import {StyleObject} from "../models/styleObject.model";
selector: 'ngx-time-picker',
templateUrl: './timePicker.component.html',
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimePickerComponent),
multi: true,
},
],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimePickerComponent),
multi: true,
},
],
})

export class TimePickerComponent implements ControlValueAccessor {
@Input() selectedTime: string;
@Input() placeholder: string;
Expand Down

0 comments on commit b80ccd2

Please sign in to comment.