NgxTimePickerDirective

This directive provides a time picker functionality to input elements, allowing users to select a time value easily. It uses the @ngxhelpers/overlay library for the overlay and moment.js for time formatting.

Installation

Make sure you have the required peer dependencies:

npm install @ngxhelpers/overlay moment

Usage

1. Import and add NgxTimePickerDirective to your component's imports array:

   import { NgxTimePickerDirective } from '@ngxhelpers/time-picker';
   
   @Component({
       // ...
       standalone: true,
       imports: [NgxTimePickerDirective, // ...other imports]
       // ...
   })
   export class MyComponent { }

2. Apply the directive to an input element:

   <input
   	type="text"
   	ngxTimePicker
   	[outputFormat]="'HH:mm:ss'"
   	[displayFormat]="'hh:mm:ss A'"
   	[(ngModel)]="selectedTime"
   />

Inputs

• outputFormat: The format of the output value (using moment.js formats). Defaults to 'HH:mm'.
• displayFormat: The format of the time displayed in the time picker. Defaults to 'hh:mm A'.
• minuteStep: The increment step for minutes. Defaults to 5.
• secondsView: Whether to show seconds in the time picker. Defaults to false.
• options: Additional options can be passed to customize the time picker's internal behavior.
  • Currently supports one option defaultTime to set the initially selected time when opening the picker.
  • Example: [options]="{defaultTime: '14:30'}"
• panelClass: Custom CSS classes to add to the time picker panel. Defaults to [].
• origin: An optional HTMLElement to use as the origin for positioning the popover. Defaults to the input element the directive is attached to.
• displayHours: Whether to display hours in 12-hour (with AM/PM) or 24-hour format. Can be 12 or 24. Defaults to 24. (Sets the time picker display, not the outputFormat)

Outputs

• outsideClick: Emits when a click occurs outside of the time picker.
• keyboardEvent: Emits keyboard events from within the time picker. You can use this to handle custom keyboard navigation.
• select: Emits the selected time value when a time is chosen. The emitted value is an object:

Example Custom format:

<input type="text"
ngxTimePicker
[outputFormat]="'HH:mm'" <!-- Output in 24-hour format -->
[displayFormat]="'hh:mm A'" <!-- Display with AM/PM -->
[(ngModel)]="selectedTime">

<p>Selected Time (24-hour format): {{ selectedTime }}</p>