Expa

Angular2+

Содержание

How to change format ngbdatepicker to 'dd/mm/yyyy'

ngb-date-fr-parser-formatter.ts
import { Injectable } from "@angular/core";
import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return "";
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}


@Injectable()
export class NgbDateFRParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('/');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return {year: toInteger(dateParts[0]), month: null, day: null};
            } else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
                return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null};
            } else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
            }
        }
        return null;
    }

    format(date: NgbDateStruct): string {
        let stringDate: string = "";
        if(date) {
            stringDate += isNumber(date.day) ? padNumber(date.day) + "/" : "";
            stringDate += isNumber(date.month) ? padNumber(date.month) + "/" : "";
            stringDate += date.year;
        }
        return stringDate;
    }
}
app.component.ts
...
// these 2 settings
import { NgbDateParserFormatter }     from '@ng-bootstrap/ng-bootstrap';
import { NgbDateFRParserFormatter }   from "../../settings/ngb-date-fr-parser-formatter";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [
    RequestService,
    {provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter}  // <!-- here
   ]
})

// after it on a app.component.html it will out dd/mm/yyyy

Click outside for closing datepicker

https://developer.mozilla.org/en-US/docs/Web/API/Event

<input #d1="ngbDatepicker"
       (click)="d1.toggle(); openDatepicker($event, d1)"
       [(ngModel)]="date"
       ngbDatepicker
       class="form-control"
       placeholder="dd/mm/yyyy">

@Component({
  ...
  host: {
    '(document:click)': 'checkDatepicker($event)',
  },
})

dynamicId = '';
...

openDatepicker(event, id){
   event.stopPropagation();
   this.dynamicId = id;
   // console.log("Datepicker Reference", id);
}


 checkDatepicker(event) {
    if(this.dynamicId){
      let self = this;
      setTimeout(function(){
         self.dynamicId.close();
       },10);
    }
 }

Import moment

// .angular-cli.json
{
  ...
  "apps": [
     ...
     "scripts": [
        "../node_modules/moment/min/moment.min.js"
     ]
     ...
  ]
  ...
}

// app.component.js
import * as moment from 'moment'; // add this 1 of 4

...
utc_format: string =  'YYYY-MM-DDTHH:mm:ss.SSSZ';
return moment(date, this.utc_format).format('DD/MM/YYYY HH:mm:ss');

После ng build, не запускалось страница, но для этого нужен хотя бы какой то серв. Решение:

Изменить в index.html

---> <base href="./">

Если нужно применить стили для всего приложения

Тогда надо создать в папке src/app/assets - my-styles.css, и подключить в src/index.html.

Подключение компонента в главный компонент после генерации

Надо теги подключить в app.component.html

Что делает <ng-content></ng-content>

это директива позволит вставить контент внутрь компонента

<app-index-page>hello there</app-index-page>

<!-- indexpage.component.html -->
<p>gggggg</p>
<ng-content></ng-content> <!-- "hello there" goes here -->

← Docker →