Create extension to Date in Angular 2 and Typescript

Question

With the in-build Date type, I can call date.getDate(), date.getMonth()...etc. However, I want to create a way to call

date.myCustomFunctionToGetMonthInString(date) which returns month in string format such as 'Jan', 'Feb'... etc. Is there a way to build such extension?

At the moment I have created a CustomDate class but it seems overkill.

export class CustomDate {
day: number;
month: number;
year: number;
customDateString: string;

constructor(date: Date) {
   this.day = date.getDate();
   this.month = date.getMonth();
   this.year = date.getFullYear();

   var month_str: string;

    switch (date.getMonth()) {
        case 0:
            month_str = 'Jan';
            break;
        case 1:
            month_str = 'Feb';
            break;
        case 2:
            month_str = 'Mar';
            break;
        case 3:
            month_str = 'Apr';
            break;
        case 4:
            month_str = 'May';
            break;
        case 5:
            month_str = 'Jun';
            break;
        case 6:
            month_str = 'Jul';
            break;
        case 7:
            month_str = 'Aug';
            break;
        case 8:
            month_str = 'Sep';
            break;
        case 9:
            month_str = 'Oct';
            break;
        case 10:
            month_str = 'Nov';
            break;
        case 11:
            month_str = 'Dec';
            break;
        default:
            month_str = 'Some Error';
    }
   this.customDateString = date.getDate().toString() + ' ' + month_str + ' ' + date.getFullYear().toString();
}

I have a read only input field. When the user clicks on the input, a calendar appears where the selection gets populated in the input field. Hence, I dont have direct access to the "picked date" from the HTML. So I am not sure how I can implement pipe here (I'd also like to know how to create extensions even if Pipe is the way to go).

This the HTML code of interest.

<label>Start Time</label>
<input (focus)="toggleTimePicker(true)" readonly class="form-control" formControlName="startTime" />
<time-picker *ngIf="showTimePicker" [showSecond]="false" (onTimePickerCancel)="toggleTimePicker($event)" (onSelectTime)="setTime($event)"></time-picker>

The read only input triggers a function to activate a time picker. After the user selects from the picker, setTime($event) is fired. And when that is fired, the read-only input field is populated with the date and time using the following method

  this.myForm.controls['startTime'].setValue(dateTime)

Hence, I dont have access to the date in my HTML code since I am not using ngModel (My form is Reactive so I am avoiding to use ngModel)

<label>Start Time</label>
<input (focus)="toggleTimePicker(true)" readonly class="form-control" formControlName="startTime" />
<time-picker *ngIf="showTimePicker" [showSecond]="false" (onTimePickerCancel)="toggleTimePicker($event)" (onSelectTime)="setTime($event)"></time-picker>

  setTime(dateTime: Date): void {
    console.log(dateTime.getHours());
    console.log(dateTime.getMinutes());
    this.myForm.controls['startTime'].setValue(dateTime);
 }

How is the value from the time-picker passed to the input, you must have stipulated that you want the value of the time-picker to go into the input and that method is where the pipe can be applied. If not show me some more code. — Oliver Cooke
– Oliver Cooke, Commented Jan 24, 2017 at 9:30
Can you describe what you're trying to achieve from start to finish? E.g. "let the user select a date in a popup calendar and format the selected date with the month as a string". I don't understand why you wouldn't have access to the selected date. — AngularChef
– AngularChef, Commented Jan 24, 2017 at 9:46
Also, creating a class for that seems like overkill. Like Oliver says, a (custom) pipe seems the way to go. In any case, I would NEVER use a switch... case for month conversion. Just create a simple array of months ['Jan', 'Feb', 'Mar'...] and use indices to extract the proper month, i.e. months[date.getMonth()]. — AngularChef
– AngularChef, Commented Jan 24, 2017 at 9:48
Array seems like a smart idea. I understand it is overkill hence I am trying to see if there is a better way of doing it . I am not sure how I can use pipe as I dont have a variable in my HTML for me to do {{ dateTime | date:'longTime' }}. I have updated the question with more detail — user172902
– user172902, Commented Jan 24, 2017 at 9:58

Oliver Cooke · Accepted Answer · 2017-01-24 09:26:18Z

2

I would recommend looking at the date pipe, dates in the backend should be stored in the standard date format and you should only care about the format when displaying it to the user, the pipes good as it offers lots of flexibility on how it's displayed. Look here

Wherever you interpolate the value to show the user you can add this pipe and stipulate the format.

{{ dateTime | date:'longTime' }}

Would give you something like "January 24, 2017"

Continuation

You should be able use this pipe in the code behind as well.

this.customDateString = new DatePipe().transform(dateTime, //your format);

edited Jan 24, 2017 at 9:26

answered Jan 24, 2017 at 8:59

Oliver Cooke

1,0591 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create extension to Date in Angular 2 and Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related