8.0.0 • Published 2 years ago

@ansyn/ng-pick-datetime v8.0.0

Weekly downloads
40
License
MIT
Repository
github
Last release
2 years ago

Angular Date Time Picker

npm npm

Angular date time picker - Angular reusable UI component This package supports Angular 8

Breaking Changes

  • The picker has been updated for Angular 7+ apps.

Description

Simple Angular date time picker. Online doc is here, Online demo(StackBlitz) is here. This picker is responsive design, so feel free to try it in your desktops, tablets and mobile devices.

How to Use

  1. Install with npm:npm install ng-pick-datetime --save
  2. Add styles. If you are using Angular CLI, you can add this to your styles.css:
    @import "~ng-pick-datetime/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 'ng-pick-datetime';
    
     @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

NameTypeRequiredDefaultDescription
pickerTypeboth, calendar, timerOptionalbothSet the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
pickerModepopup, dialogOptionalpopupThe style the picker would open as.
startViewmonth, year, multi-yearOptionalmonthThe view that the calendar should start in.
startAtT/nullOptionalnullThe moment to open the picker to initially.
firstDayOfWeeknumberOptional0Set the first day of week. Valid value is from 0 to 6. 0: Sunday ~ 6: Saturday
showSecondsTimerbooleanOptionalfalseWhen specify it to true, it would show a timer to configure the second's value
hideOtherMonthsbooleanOptionalfalseWhether to hide dates in other months at the start or end of the current month
hour12TimerbooleanOptionalfalseWhen specify it to true, the timer would be in hour12 format mode
stepHournumberOptional1Hours to change per step.
stepMinutenumberOptional1Minutes to change per step.
stepSecondnumberOptional1Seconds to change per step.
scrollStrategyScrollStrategyOptionalBlockScrollStrategyDefine the scroll strategy when the picker is open. Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies.
disabledbooleanOptionalfalseWhen specify to true, it would disable the picker.
backdropClassstring/string[]OptionalnullCustom class for the picker backdrop.
panelClassstring/string[]OptionalnullCustom class for the picker overlay panel.

Events for owl-date-time

EventsParameterDescription
afterPickerOpennullCallback to invoke when the picker is opened
afterPickerClosednullCallback to invoke when the picker is closed.
yearSelectedTCallback to invoke when the year is selected.This doesn't imply a change on the selected date.
monthSelectedTCallback to invoke when the month is selected.This doesn't imply a change on the selected date.

Properties for input[owlDateTime]

NameTypeRequiredDefaultDescription
owlDateTimeOwlDateTimeComponent<T>RequirenullThe date time picker that this input is associated with.
owlDateTimeFilter( date: T)=>booleanOptionalnullA function to filter date time.
disabledbooleanOptionalfalseWhen specify to true, it would disable the picker's input.
min<T>OptionalnullThe minimum valid date time.
max<T>OptionalnullThe maximum valid date time.
selectModesingle, range, rangeFrom, rangeToOptionalsingleSpecify 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.
rangeSeparatorstringOptional~The character to separate the 'from' and 'to' in input value in range selectMode.

Events for input[owlDateTime]

EventsParameterDescription
dateTimeChangesource: OwlDateTimeInput, value: input value, input: the input elementCallback to invoke when change event is fired on this <input [owlDateTime]>
dateTimeInputsource: OwlDateTimeInput, value: input value, input: the input elementCallback to invoke when an input event is fired on this <input [owlDateTime]>.

Properties for [owlDateTimeTrigger]

NameTypeRequiredDefaultDescription
owlDateTimeTriggerOwlDateTimeComponent<T>RequirenullThe date time picker that this trigger is associated with.
disabledbooleanOptionalfalseWhen specify to true, it would disable the trigger.

Properties for [owlDateTimeTrigger]

NameTypeRequiredDefaultDescription
owlDateTimeTriggerOwlDateTimeComponent<T>RequirenullThe date time picker that this trigger is associated with.
disabledbooleanOptionalfalseWhen specify to true, it would disable the trigger.

Properties for owl-date-time-inline

NameTypeRequiredDefaultDescription
pickerTypeboth, calendar, timerOptionalbothSet the type of the dateTime picker. both: show both calendar and timer, calendar: only show calendar, timer: only show timer.
startViewmonth, year, multi-yearOptionalmonthThe view that the calendar should start in.
startAtT/nullOptionalnullThe moment to open the picker to initially.
firstDayOfWeeknumberOptional0Set the first day of week. Valid value is from 0 to 6. 0: Sunday ~ 6: Saturday
showSecondsTimerbooleanOptionalfalseWhen specify it to true, it would show a timer to configure the second's value
hideOtherMonthsbooleanOptionalfalseWhether to hide dates in other months at the start or end of the current month
hour12TimerbooleanOptionalfalseWhen specify it to true, the timer would be in hour12 format mode
stepHournumberOptional1Hours to change per step.
stepMinutenumberOptional1Minutes to change per step.
stepSecondnumberOptional1Seconds to change per step.
disabledbooleanOptionalfalseWhen specify to true, it would disable the picker.
owlDateTimeFilter( date: T)=>booleanOptionalnullA function to filter date time.
min<T>OptionalnullThe minimum valid date time.
max<T>OptionalnullThe maximum valid date time.
selectModesingle, range, rangeFrom, rangeToOptionalsingleSpecify 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

Demo

  • Online doc is here
  • Online demo(StackBlitz) is here

License

  • License: MIT

Author

Daniel YK Pan

8.0.0

2 years ago

7.1.1

2 years ago

7.1.0

3 years ago

7.0.1

3 years ago

7.0.0

3 years ago

0.9.0

3 years ago