Angular 18 Date/Time Picker

The current version of this package supports Angular 18

How to Use

1. Install with npm: npm install @amrkh97/angular-datetime-picker --save
2. Add styles. If you are using Angular CLI, you can add this to your styles.css:

   @import "@amrkh97/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.

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.

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.
yearOnly	boolean	Optional	false	Restricts the calendar to only show the year and multi-year views for month selection.
multiyearOnly	boolean	Optional	false	Restricts the calendar to only show the multi-year view for year selection.
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
beforePickerOpen	null	Callback to invoke before the picker is opened
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.
dateClicked	T	Callback when the selected data changes.
selectedChanged	T	Callback when the currently selected data changes.
userSelection	null	Callback when any date is selected.

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 Amr Khaled, forked from Daniel Moncoda & original implementation by Daniel Pan