标签: ngb-datepicker

我想将 ngbDatepicker 设置为从星期日开始一周，而不是默认的星期一。

我正在尝试使用weekStartsOn="0"但它没有效果。这是我的 html 代码

<input ngbDatepicker #d="ngbDatepicker" class="form-control" [minDate]="minDate" [maxDate]="maxDate" [markDisabled]="isDisabled" weekStartsOn="0">

我在 Angular2 项目的响应式表单中使用 ng-bootstrap 的 ngbDatepicker，日期是可选的，但是 ngbDatepicker 总是将表单标记为无效，除非选择了日期。

有没有办法从表单验证中排除 ngbDatepicker，或者对其进行配置，使其无论是否设置了值都返回 Valid ？

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>

现在，当我选择某个日期时，它设置为 YYYY-MM-DD 格式，但我需要更改为其他格式（MM-DD-YYYY 或 DD-MM-YYY）。检查其 node_modules 文件夹，但没有为相同的 git 提供任何解决方案。

我检查了要点https://gist.github.com/nrobinaubertin/61ff1c3db355c74f4e56f485b566ab22但这并没有将输入字段中的值设置为 DD-MM-YYYY。

我目前正在阅读有关ng-bootstrap组件国际化的信息。他们的文档对日期选择器说：

从 2.0.0 版本开始，日期选择器将使用应用程序区域设置（如果存在）来获取工作日和月份名称的翻译。进行翻译的内部服务称为 NgbDatepickerI18n，如有必要，您可以提供自己的实现。

（ng-bootstrap 网站）

查看 Angular i18n 文档，它指出：

如果要导入其他语言的区域设置数据，可以手动执行：

src/app/app.module.ts

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

Run Code Online (Sandbox Code Playgroud)

（角网站）

但为什么它对我不起作用？我是否仍然需要对 进行自定义实现NgbDatepickerI18n，或者我遗漏了什么？

这是一个示例游乐场：

https://stackblitz.com/edit/angular-mezpyn?file=app%2Fdatepicker-popup.module.ts

这可能是我一段时间以来处理过的最令人沮丧的问题之一。一般来说，日期，尤其是 NgbDatepicker 在 Angular 中处理起来有点麻烦。

我正在 Angular 8 中针对反应​​式表单实现 NgbDatepicker，我的问题的要点是我可以设置日期控件的初始值，但该初始值不会（视觉上）显示在表单上。我可以将表单记录到控制台并看到该值已设置，但表单字段本身并未更新。如果我从选择器本身选择一个日期，那么我的选择会反映在表单字段中。我原以为这就像设置[startDate]ngbDatepicker 输入的属性一样简单，但显然不是。我对此尝试了很多不同的迭代；这就是代码方面的情况：

我的HTML：

<input #licenseExpiration="ngbDatepicker"
    class="form-control"
    fromControlName="licenseExpiration"
    [startDate]="startDate"
    ngbDatepicker />
<button class="btn btn-info zero-spacing pt-1 pr-1 pl-1"
    (click)="licenseExpiration.toggle()"
    type="button">

我的组件的相关部分：

@Component({
  selector: 'app-cert',
  templateUrl: './cert.component.html',
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class CertComponent implements OnInit {
  certForm: CertForm = new CertForm();

  constructor(
    public readonly formatter: CustomDateParserFormatter) { }

  ngOnInit() {
    this.certForm.setModel(...modelObjectFromOtherService...);
  }

  get startDate() {
    return { year: 2020, month: 6, day: 13 }; …

我是 angular 4 的初学者，我正在尝试在网站中实现引导程序 ngbdatepicker。

这是我的 HTML 代码：

<div class="input-group ">
    <input id="datepicker" class="form-control col-7" placeholder="{{dateWording}}" ngbDatepicker #date="ngbDatepicker" required pattern="[0-9]{4}[-][0-9]{2}[-][0-9]{2}">
    <div class="input-group-append">
        <button class="btn btn-outline-secondary picto-calender" (click)="date.toggle()" type="button"></button>
    </div>
</div>

我尝试使用事件作为 (clic) 或 (blur) 通过使用 getDate(#date.value) 访问我的输入值，但没有任何工作正常。这是我的 getDate 方法，它在浏览器控制台中返回未定义的值。

getDate(date: any) {
    this.date = date;
    console.log(this.date);
}

所以我的两个问题是：

• 如何获取输入的值以将其保存在 .ts 中
• 我可以使用什么功能来检测我在日期选择器菜单中选择了一个日期并在菜单关闭时保存该值

希望你能帮助我并为我的英语不好而感到抱歉！

在我的 Angular 应用程序模板驱动表单中，我有一个出生日期字段，并为该字段添加了 ngbDatepicker 作为给定。

<input #dob="ngbDatepicker"
                 (click)="dob.toggle()"
                 [(ngModel)]="model.dob"
                 [ngClass]="{ 'is-invalid': f.submitted &&  dob.invalid }"
                 class="form-control"
                 id="dob"
                 name="dob"
                 required
                 type="text"
                 [disabled]="isDisabled"
                 [class.ash]="isDisabled"
                 [class.highlight]="!isDisabled"
                 ngbDatepicker
          />

我正在从后端 API 获取出生日期，dob: "2019-02-16 00:00:00"并且我想像下面那样传递该值，

 { 
  "year": 2019, 
  "month": 2, 
  "day": 26 
 }

因为 ngbDatepicker 以该格式获取值。这就是我试图转换我的出生日期。

toDate(dob) {
 const [year, month, day] = dob.split('-');
 const obj = { year: year, month: month, day: day.split(' ')[0].trim() };
 console.log('convert date', obj);
 this.model.dob = obj;
 //  this.model.dob ={year: 2017, month: 5, day: 13};
}

输出是{year: …

我想在材料 Input 中使用 ngb-datepicker 。我成功地将 datepicker 应用于 mat 输入。但是月份和年份下拉列表存在问题。

我尝试了以下代码段：

<mat-form-field>
<input matInput placeholder="Select Valid Till" name="GodownValidTill" [(ngModel)]="GodownValidTill" ngbDatepicker #d2="ngbDatepicker" required readonly>
<mat-icon style="float:right;height:20px;width:20px;" (click)="d2.toggle()" svgIcon="calendar" title="Calendar"></mat-icon>
</mat-form-field>

有没有完美工作的解决方案？

我正在使用 Bootstrap 4 处理 Angular 13 项目。我想使用 ngbdatepicker 显示 datePicker 字段，但我的 datePicker 没有显示顶部的两个下拉列表（月份列表和年份列表）。这是我的代码：

    <div class="input-group flex-nowrap">
       <div class="input-group-wrapper">
           <input class="form-control" id="date3"  ngbDatepicker #d3="ngbDatepicker">
           <label for="date3">Date</label>
       </div>
       <div class="input-group-append">
           <button class="btn btn-link calendar far fa-calendar" (click)="d3.toggle()"></button>
       </div>
   </div>

这是我的共享模块：

@NgModule({
 imports: [
   NgbModule
 ],
 exports: [
  CommonModule, //
  NgbModule
 ],
 declarations: [],
 providers: [
  { provide: LOCALE_ID, useValue: 'fr-FR' },
  { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter }
 ]
})
export class SharedModule {}

这是我的格式化程序类：

import {NgbDateParserFormatter,  NgbDateStruct,} from "@ng-bootstrap/ng-bootstrap";
import { Injectable …

我正在为日期选择器使用 ng-boostrap：https ://ng-bootstrap.github.io/#/components/datepicker/api 但我不知道如何更改日期格式，如 dd/mm/yyyy。现在它显示 yyyy/mm/dd 但我想要 dd/mm/yyyy。请帮助任何人。

演示：https : //stackblitz.com/edit/angular-6wpn3h-ahcq4x?file= src/ app/datepicker-popup.html

  <div class="input-group">
  <input class="form-control" placeholder="dd/mm/yyyy"
         name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
  </div>
  </div>

我在 Angular 中使用 ngbDatePicker 插件，我已经尝试了 html 中的所有 javascript 代码，但没有任何效果。Pastdate 仍然可以选择。

这是 html 代码

<div class="col-xs-6">
  <label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
   <input id="startTrip1" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
      <div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
      * This field is required
     </div>
</div>

我正在使用ng-bootstrap ngbDate对象。我想将其转换为标准的Date对象。你怎么做到这一点？

这是.ts文件的相关部分：

import {NgbCalendar, NgbDate} from "@ng-bootstrap/ng-bootstrap";
fromDate: NgbDate;
toDate: NgbDate;
constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
    }