CODEWITHSUNDEEP
angularng-bootstrap
Sole
Sole

Reputation: 3340

How to get the time in Ng-Bootstrap datepicker

I was wondering is there a straight forward way to get the time in the ng-bootstrap datepicker? So far my code is: 

 <input class="form-input" type="text" id="date" placeholder="yyyy-mm-dd hh:mm:ss" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker" [navigation]="navigation"
    formControlName="date" (click)="d.toggle()"><i class="form-icon icon icon-calendar calendar-icon" (click)="d.toggle()"></i><h6 class="text-gray mt-2">xxxxx</h6>

ts file:

model: NgbDateStruct;
date: {year: number, month: number};

Any ideas?

Upvotes: 0

Views: 20939

Answers (3)

Danilo
Danilo

Reputation: 21

You can use this

https://www.npmjs.com/package/ng-bootstrap-datetime-angular

https://stackblitz.com/edit/ng-bootstrap-datetime-angular

How to Use

  1. Install with npm:npm install ng-bootstrap-datetime-angular --save

  2. Add NgBootstrapDateTimeAngularModule to your @NgModule like example below

    import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";

import { NgBootstrapDateTimeAngularModule } from "ng-bootstrap-datetime-angular";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgBootstrapDateTimeAngularModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

  3. Add your input into form like example below

    <form>
  <div [formGroup]="formGroup">
    <ng-bootstrap-datetime-angular
      inputDatetimeFormat="dd/MM/yyyy hh:mm a"
      formControlName="activeEndDate"
      name="activeEndDate"
    ></ng-bootstrap-datetime-angular>
  </div>
</form>

  4. Connect to your component

    import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
  title = "Date";
  formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = new FormGroup({
      activeEndDate: new FormControl(null, {
        validators: [Validators.required]
      })
    });
  }
}

Upvotes: 1

wentjun
wentjun

Reputation: 42556

I hope I am not too late, but since you are already using Ng Bootstrap, you might as well use the TimePicker module which is part of Ng Bootstrap. This way, you can simply import it together with the DatePicker module.

import { NgbDatepickerModule, NgbTimepickerModule } from '@ng-bootstrap/ng-bootstrap';

I have previously made a stackblitz demo as someone else asked a similar question. Feel free to check it out and see how it works!

Upvotes: 1

Satheesh Srinivasan
Satheesh Srinivasan

Reputation: 177

You have to use Timepicker of ngx-bootstrap. If you are really in need to implement time and date in same pop-up, then try the link below.

https://www.npmjs.com/package/ngx-bootstrap-datetime-popup

Upvotes: 1

Related Questions