Как изменить формат даты в поле ввода ngbDatepicker в угловой загрузке? - PullRequest
Новая
       53

Как изменить формат даты в поле ввода ngbDatepicker в угловой загрузке?

0 голосов
/ 11 декабря 2018

HTML: - 

      <li><span class="float-left label">Date of birth</span>
        <div class="float-right fill-text position-relative edit-calender">
          <input type="text" (click)="d.toggle()" class="edit-field"
            [outsideDays]="'collapsed'" id="datePicker" ngbDatepicker formControlName="dob" #d="ngbDatepicker" [minDate]="minDate"
            [maxDate]="maxDate" readonly>
          <span class="calendar" id="calIcon" (click)="waitAndToggle();"><i id="calIcon" class="far fa-calendar-alt"></i></span>
          <div class="text-danger" *ngIf="form.get('dob').hasError('required')
                && ( form.get('dob').touched || formSubmitAttempt)">
            {{ 'Validations.dob' | translate }}
          </div>
        </div>
      </li>

Теперь, когда я выбираю какую-то дату, она устанавливается в формате ГГГГ-ММ-ДД, но мне нужно изменить в другом формате (ММ-ДД-ГГГГ или ДД-ММ-YYY).Проверьте его папку node_modules, но не нашли никакого решения для этого.

Я проверил суть https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22, но это значение не было установлено в поле ввода как DD-MM-YYYY.

Ответы [ 2 ]

0 голосов
/ 17 мая 2019

Идеальным решением было бы изменить

ngb-date-parser-formatter.js

из приведенного ниже кода, вы получите DD-MM-YYYY Формат даты во входном файле. 

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import { padNumber, toInteger, isNumber } from '../util/util';
/**
 * Abstract type serving as a DI token for the service parsing and formatting dates for the NgbInputDatepicker
 * directive. A default implementation using the ISO 8601 format is provided, but you can provide another implementation
 * to use an alternative format.
 */
var NgbDateParserFormatter = (function () {
    function NgbDateParserFormatter() {
    }
    return NgbDateParserFormatter;
}());
export { NgbDateParserFormatter };
var NgbDateISOParserFormatter = (function (_super) {
    __extends(NgbDateISOParserFormatter, _super);
    function NgbDateISOParserFormatter() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    NgbDateISOParserFormatter.prototype.parse = function (value) {
        if (value) {
            var 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[0]), month: toInteger(dateParts[1]), day: null };
            }
            else if (dateParts.length === 3 && isNumber(dateParts[0]) && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: toInteger(dateParts[2]) };
            }
        }
        return null;
    };
    NgbDateISOParserFormatter.prototype.format = function (date) {
        return date ?
        (isNumber(date.day) ? padNumber(date.day) : '')+"-"+ (isNumber(date.month) ? padNumber(date.month) : '') +"-"+ date.year:'';
    };
    return NgbDateISOParserFormatter;
}(NgbDateParserFormatter));
export { NgbDateISOParserFormatter };
//# sourceMappingURL=ngb-date-parser-formatter.js.map
0 голосов
/ 11 декабря 2018

Чтобы использовать класс, который расширяет NbgDateParserFormat, вы должны включить его в app.module в провайдерах, 

@NgModule({
  declarations: [
    AppComponent,
    ...  
  ],
  imports: [
    BrowserModule,
    NgbModule,
    ...
  ],
  providers: [
    { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
    ...

  ],
  bootstrap: [AppComponent]
})
...