Angular timepicker

Question

I am using ng boostrap for my project and timepicker from that

https://ng-bootstrap.github.io/#/components/timepicker/examples#meridian

<ngb-timepicker [(ngModel)]="time" [meridian]="meridian"></ngb-timepicker>
<button class="btn btn-sm btn-outline-{{meridian ? 'success' : 'danger'}}" (click)="toggleMeridian()">
    Meridian - {{meridian ? "ON" : "OFF"}}
</button>
<hr>
<pre>Selected time: {{time | json}}</pre>

ts

import {Component} from '@angular/core';

@Component({
  selector: 'ngbd-timepicker-meridian',
  templateUrl: './timepicker-meridian.html'
})
export class NgbdTimepickerMeridian {
  time = {hour: 13, minute: 30};
  meridian = true;

  toggleMeridian() {
      this.meridian = !this.meridian;
  }
}

The problem is that i only have to use AM format and not show button and allow user to toggle AM and PM, i dont know is that possible.

https://ng-bootstrap.github.io/stackblitzes/timepicker/meridian/stackblitz.html

its depends on time if you change time its chage `AM to PM and PM to AM` — Bhargav Chudasama, Dec 11 '19 at 12:23
https://ng-bootstrap.github.io/stackblitzes/timepicker/meridian/stackblitz.html — Miomir Dancevic, Dec 11 '19 at 12:26
I only have working demo with button toggle, i dont need button I only need AM format — Miomir Dancevic, Dec 11 '19 at 12:27
@MiomirDancevic, if you want the hours from 0 to 24 just use `[meridian]="false"` — Eliseo, Dec 11 '19 at 12:28
I dont think its possible in the datetimepicker API. Easiest solutions is to capture the `am/pm` button scss and add class with display-none. and add a `span` next to the button with `AM` to it. would that do for you?. I know its a bit hacky. Nothing much left to decide for. — Selaka Nanayakkara, Dec 11 '19 at 12:32
you can use custom validation to restrict hour between 0 - 12 (AM), here is a link for custom validation : https://ng-bootstrap.github.io/#/components/timepicker/examples#validation — agit, Dec 11 '19 at 12:33
you can use some like `` but I don't know if is you are looking for — Eliseo, Dec 11 '19 at 14:19
@Eliseo This is good solution,maybe you can write answer, but do you now how can I only have also 24 hours format starting from 12:00 until 23:59? because i need AM and PM timepicker? — Miomir Dancevic, Dec 12 '19 at 05:58
just add 12+ for PM, see my answer, but really I don't know what it's the aim of this — Eliseo, Dec 12 '19 at 07:23

score 1 · Accepted Answer · answered Dec 12 '19 at 07:22

If you want two timepicker, one for AM and one for PM you can,as say in my comment

<ngb-timepicker [ngModel]="time1" 
      (ngModelChange)="time1={hour:$event.hour%12,minute:$event.minute}">
</ngb-timepicker>
<ngb-timepicker [ngModel]="time2" 
      (ngModelChange)="time2={hour:12+$event.hour%12,minute:$event.minute}" >
</ngb-timepicker>
<hr>
<pre>
Selected time: {{time1 | json}}
Selected time: {{time2 | json}}
</pre>

Angular timepicker

1 Answers1