Novelty Polygonal Mathematics
    Wondering what’s next for npm?Check out our public roadmap! »

    mysvg-ng-pick-datetime
    TypeScript icon, indicating that this package has built-in type declarations

    9.4.4 • Public • Published

    Angular Date Time Picker

    Angular date time picker - Angular reusable UI component This package supports Angular 9+

    Breaking Changes

    How to Use

    1. Install with npm:npm install @spitfjre/angular-datetime-picker --save
    2. Add styles. If you are using Angular CLI, you can add this to your styles.css:
      @import "~angular-datetime-picker/assets/style/picker.min.css";
      If you are not using the Angular CLI, you can include the picker.min.css via a <link> element in your index.html.
    3. Add OwlDateTimeModule and OwlNativeDateTimeModule to your @NgModule like example below
       import { NgModule } from '@angular/core';
       import { BrowserModule } from '@angular/platform-browser';
       import { MyTestApp } from './my-test-app';
       
       import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@angular-datetime-picker';
       
       @NgModule({
           imports: [ 
               BrowserModule, 
               OwlDateTimeModule, 
               OwlNativeDateTimeModule,
           ],
           declarations: [ MyTestApp ],
           bootstrap:    [ MyTestApp ]
       })
       export class MyTestAppModule {}
    4. Connecting a picker to an input and a trigger.
      <input [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1" placeholder="Date Time">
      <owl-date-time #dt1></owl-date-time>
      <input [owlDateTime]="dt2" placeholder="Date Time">
      <span [owlDateTimeTrigger]="dt2"><i class="fa fa-calendar"></i></span>
      <owl-date-time #dt2></owl-date-time>
      The examples above are quite basic. The picker has much more features, and you could learn more about those from demo page.

    Animation

    This picker uses angular animations to improve the user experience, therefore you need to install @angular/animations and import BrowserAnimationsModule to your application.

    npm install @angular/animations --save
    
    import {BrowserModule} from '@angular/platform-browser';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
     
    @NgModule({
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            //...
        ],
        //...
    })
    export class YourAppModule { }

    If you prefer to disable animation effect, use NoopAnimationsModule instead.

    Choose a date implementation

    The date-time picker was built to be date implementation agnostic. Developers need to make sure to provide the appropriate pieces for the picker to work with their chosen implementation. There are two pre-made modules, users need to import one of them or build your own one (learn more about this from here).

    • OwlNativeDateTimeModule - support for native JavaScript Date object
    • OwlMomentDateTimeModule - support for MomentJs

    Properties for owl-date-time

    Name Type Required Default Description
    pickerType both, calendar, timer Optional both Set the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
    pickerMode popup, dialog Optional popup The style the picker would open as.
    startView month, year, multi-year Optional month The view that the calendar should start in.
    startAt T/null Optional null The moment to open the picker to initially.
    endAt T/null Optional null The the default selected time for range calendar end time
    firstDayOfWeek number Optional 0 Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday
    showSecondsTimer boolean Optional false When specify it to true, it would show a timer to configure the second's value
    hideOtherMonths boolean Optional false Whether to hide dates in other months at the start or end of the current month
    hour12Timer boolean Optional false When specify it to true, the timer would be in hour12 format mode
    stepHour number Optional 1 Hours to change per step.
    stepMinute number Optional 1 Minutes to change per step.
    stepSecond number Optional 1 Seconds to change per step.
    scrollStrategy ScrollStrategy Optional BlockScrollStrategy Define the scroll strategy when the picker is open. Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies.
    disabled boolean Optional false When specify to true, it would disable the picker.
    backdropClass string/string[] Optional null Custom class for the picker backdrop.
    panelClass string/string[] Optional null Custom class for the picker overlay panel.

    Events for owl-date-time

    Events Parameter Description
    afterPickerOpen null Callback to invoke when the picker is opened
    afterPickerClosed null Callback to invoke when the picker is closed.
    yearSelected T Callback to invoke when the year is selected.This doesn't imply a change on the selected date.
    monthSelected T Callback to invoke when the month is selected.This doesn't imply a change on the selected date.

    Properties for input[owlDateTime]

    Name Type Required Default Description
    owlDateTime OwlDateTimeComponent<T> Require null The date time picker that this input is associated with.
    owlDateTimeFilter ( date: T)=>boolean Optional null A function to filter date time.
    disabled boolean Optional false When specify to true, it would disable the picker's input.
    min <T> Optional null The minimum valid date time.
    max <T> Optional null The maximum valid date time.
    selectMode single, range, rangeFrom, rangeTo Optional single Specify the picker's select mode. single: a single value allowed, range: allow users to select a range of date-time, rangeFrom: the input would only show the 'from' value and the picker could only selects 'from' value, rangeTo: the input would only show the 'to' value and the picker could only selects 'to' value.
    rangeSeparator string Optional - The character to separate the 'from' and 'to' in input value in range selectMode.

    Events for input[owlDateTime]

    Events Parameter Description
    dateTimeChange source: OwlDateTimeInput, value: input value, input: the input element Callback to invoke when change event is fired on this <input [owlDateTime]>
    dateTimeInput source: OwlDateTimeInput, value: input value, input: the input element Callback to invoke when an input event is fired on this <input [owlDateTime]>.

    Properties for [owlDateTimeTrigger]

    Name Type Required Default Description
    owlDateTimeTrigger OwlDateTimeComponent<T> Require null The date time picker that this trigger is associated with.
    disabled boolean Optional false When specify to true, it would disable the trigger.

    Properties for [owlDateTimeTrigger]

    Name Type Required Default Description
    owlDateTimeTrigger OwlDateTimeComponent<T> Require null The date time picker that this trigger is associated with.
    disabled boolean Optional false When specify to true, it would disable the trigger.

    Properties for owl-date-time-inline

    Name Type Required Default Description
    pickerType both, calendar, timer Optional both Set the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
    startView month, year, multi-year Optional month The view that the calendar should start in.
    startAt T/null Optional null The moment to open the picker to initially.
    endAt T/null Optional null The the default selected time for range calendar end time
    firstDayOfWeek number Optional 0 Set the first day of week. Valid value is from 0 to 6. 0: Sunday - 6: Saturday
    showSecondsTimer boolean Optional false When specify it to true, it would show a timer to configure the second's value
    hideOtherMonths boolean Optional false Whether to hide dates in other months at the start or end of the current month
    hour12Timer boolean Optional false When specify it to true, the timer would be in hour12 format mode
    stepHour number Optional 1 Hours to change per step.
    stepMinute number Optional 1 Minutes to change per step.
    stepSecond number Optional 1 Seconds to change per step.
    disabled boolean Optional false When specify to true, it would disable the picker.
    owlDateTimeFilter ( date: T)=>boolean Optional null A function to filter date time.
    min <T> Optional null The minimum valid date time.
    max <T> Optional null The maximum valid date time.
    selectMode single, range, rangeFrom, rangeTo Optional single Specify the picker's select mode. single: a single value allowed, range: allow users to select a range of date-time, rangeFrom: the input would only show the 'from' value and the picker could only selects 'from' value, rangeTo: the input would only show the 'to' value and the picker could only selects 'to' value.

    Localization and DateTime Format

    Localization for different languages and formats is defined by OWL_DATE_TIME_LOCALE and OWL_DATE_TIME_FORMATS. You could learn more about this from here.

    Dependencies

    none

    License

    • License: MIT

    Author

    Maintained and updated by Daniel Moncada, original implementatiom by Daniel Pan

    Install

    npm i mysvg-ng-pick-datetime

    DownloadsWeekly Downloads

    9

    Version

    9.4.4

    License

    MIT

    Unpacked Size

    5.07 MB

    Total Files

    106

    Last publish

    Collaborators

    • avatar