Natural Pleistocene Monsters
    Have ideas to improve npm?Join in the discussion! »

    th-ngx-material-timepicker
    TypeScript icon, indicating that this package has built-in type declarations

    5.3.0-th.9 • Public • Published

    Angular Material Timepicker

    Build Status codecov npm version

    Handy multifunctional material design timepicker for Angular 6.0+

    Demo

    https://agranom.github.io/ngx-material-timepicker/

    Table of contents

    Getting started

    Install timepicker through npm:

    npm install --save ngx-material-timepicker

    Next import the timepicker module into your app's module:

    import {NgModule} from '@angular/core';
    import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
     
    @NgModule({
      imports: [NgxMaterialTimepickerModule]
    })
    export class MyModule {}

    Finally connect the timepicker to an input via a template property:

    <input [ngxTimepicker]="picker">
    <ngx-material-timepicker #picker></ngx-material-timepicker>

    The timepicker opens once you click on the input

    Internationalization

    Timepicker supports locales in format BCP 47. It has en-US locale by default.

    To override default locale:

    import {NgModule} from '@angular/core';
    import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
     
    @NgModule({
      imports: [NgxMaterialTimepickerModule.setLocale('ar-AE')]
    })
    export class MyModule {}

    Documentation

    API reference for Angular Material Timepicker

    import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';

    NgxTimepicker

    Directive responsible for managing the timepicker popup and setting value to input

    Selector: ngxTimepicker

    Properties

    Name Description
    @Input()
    ngxTimepicker: NgxMaterialTimepickerComponent The timepicker that this input is associated with.
    @Input()
    disabled: boolean Weather the timepicker popup should be disabled.
    @Input()
    value: string Set a default value and time for a timepicker. The format of the time is in 12 hours notation 11:00 PM or in 24 hours notation 23:00. A Date string won't work.
    @Input()
    format: number 12 or 24 . 12h/24h view for hour selection clock . 12 (AM/PM) format by default.
    @Input()
    min: string or DateTime Set min time for timepicker (11:15 pm )
    @Input()
    max: string or DateTime Set max time for timepicker (11:15 pm )
    @Input()
    disableClick: boolean Set true to disable opening timepicker by clicking on the input

    NgxMaterialTimepickerComponent

    Component responsible for visualisation the timepicker

    Selector: ngx-material-timepicker

    Properties

    Name Description
    @Input()
    cancelBtnTmpl: TemplateRef Set if you want to change cancel button to your custom one.
    @Input()
    confirmBtnTmpl: TemplateRef Set if you want to change confirm button to your custom one.
    @Input()
    editableHintTmpl: TemplateRef Set if you want to change dial hint to your custom one. Works only if enableKeyboardInput = true
    @Input()
    ESC: boolean Disable or enable closing timepicker by ESC.
    @Input()
    enableKeyboardInput: boolean To disable or enable changing time through a keyboard on the timepicker dial without interaction with a clock face. Set false by default
    @Input()
    minutesGap: number To define a gap between minutes. Set 1 by default
    @Input()
    defaultTime: string Set default time for a timepicker. 12:00 AM by default
    @Input()
    preventOverlayClick: boolean Set true to prevent closing the timepicker by overlay click. Uses false by default
    @Input()
    disableAnimation: boolean Set true to prevent opening and closing timepicker animation. Uses false by default
    @Input()
    hoursOnly: boolean Set true to prevent switching to minutes automatically once hour is selected. Uses false by default
    @Input()
    theme: NgxMaterialTimepickerTheme Custom css properties which will override the defaults
    @Input()
    timepickerClass: string To provide a custom css class for the timepicker
    @Output()
    timeSet: EventEmitter<string> Emits time when that was set.
    @Output()
    opened: EventEmitter<null> Emits after timepicker was opened.
    @Output()
    closed: EventEmitter<null> Emits after timepicker was closed.
    @Output()
    hourSelected: EventEmitter<number> Emits after hour was selected.
    @Output()
    timeChanged: EventEmitter<string> Emits once time was changed.

    NgxTimepickerFieldComponent

    The timepicker as a control.

    Selector: ngx-timepicker-field

    Properties

    Name Description
    @Input()
    disabled: boolean Whether the timepicker is disabled
    @Input()
    toggleIcon: TemplateRef<HTMLObjectElement> Provide custom svg icon for toggle button
    @Input()
    buttonAlign: 'right' or 'left' Positioning toggle button (right by default)
    @Input()
    clockTheme: NgxMaterialTimepickerTheme Custom css properties which will override timepicker clock
    @Input()
    controlOnly: boolean Hide or display toggle button with the timepicker clock
    @Input()
    format: number 12 or 24 . Set format for timepicker. 12 (AM/PM) format by default.
    @Input()
    cancelBtnTmpl: TemplateRef<Node> Set if you want to change cancel button for timepicker to your custom one.
    @Input()
    confirmBtnTmpl: TemplateRef<Node> Set if you want to change confirm button for timepicker to your custom one.
    @Output()
    timeChanged: EventEmitter<string> Emit a new time once it is changed.

    NgxMaterialTimepickerToggleComponent

    Component responsible for opening the timepicker.

    Selector: ngx-material-timepicker-toggle

    Properties

    Name Description
    @Input()
    for: NgxMaterialTimepickerComponent Timepicker instance that the button will toggle
    @Input()
    disabled: boolean Whether the toggle button is disabled

    NgxMaterialTimepickerToggleIconDirective

    Can be used to override the icon of a NgxMaterialTimepickerToggleComponent.

    Selector: [ngxMaterialTimepickerToggleIcon]

    NgxMaterialTimepickerThemeDirective (deprecated)

    Can be used to override styles of a NgxMaterialTimepicker.

    Selector: ngx-material-timepicker[ngxMaterialTimepickerTheme]

    Properties

    Name Description
    @Input()
    ngxMaterialTimepickerTheme: NgxMaterialTimepickerTheme Custom css properties which will override the defaults

    Development

    Prepare your environment

    Install local dev dependencies: npm install while current directory is this repo.

    Development server

    Run npm start to start a development server on a port 4200.

    Open http//:localhost:4200 on your browser.

    Tests

    Run npm test to run tests once or npm run test:watch to continually run tests.

    License

    MIT

    Install

    npm i th-ngx-material-timepicker

    DownloadsWeekly Downloads

    1

    Version

    5.3.0-th.9

    License

    MIT

    Unpacked Size

    1.98 MB

    Total Files

    163

    Last publish

    Collaborators

    • avatar