danielykpan / date-time-picker

Angular Date Time Picker (Responsive Design)

Angular Date Time Picker

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

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.
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.
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

Demo

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

License

• License: MIT

Author

Daniel YK Pan

date-time-picker's Issues

Make locale for Russian

Hi,
this can help with RU locale

/**
 * ru
 */

export const LANG_RU_TRANS = {
    'time picker': 'Выбор Времени',
    'today': 'Сегодня',
    'set time': 'Установить Время',
    'close': 'Закрыть',
    'confirm': 'Подтвердить',
    'hour': 'Час',
    'minute': 'Минута',
    'second': 'Секунда',
};

Thx for awesome component 😄

Not able to Run the date-time-picker

Hi ,
I am using angular cli but not able to run the same.
Following is my error

Can't bind to 'dateTimePicker' since it isn't a known property of 'input'. ("<input [ngModel]="momentValue | date: 'short'" [ERROR ->][(dateTimePicker)]="momentValue" readonly />")

Localization does not localize date values

Setting locale to "de" does not translate the date values:

• Days:
  • Monday, Tuesday.... instead of Montag, Dienstag....
  • 1st, 2nd, 3rd instead of 1., 2., 3. (There is no shortcut for First, second, etc. besides a period in German)
• Month: January, February.... instead of Januar, Februar....

Feature-Request: Open Datepicker via Button / Icon (attribute mode?)

Nice datepicker, thank you for this!

It would be nice when the picker could be opened via a datepicker-icon or a button.
If I could pass an selector of dom-element which then open the calendar I would be happy.

Optional AM/PM mode

Hello again,

In french (and others locales), we don't use this AM/PM mechanism and we have 24 hours system instead.
Do you think it could be an option of your component ?

Sincerely yours,

Marty

z-index is not work

z-index is not work in ng2-admin.

but I use another package(ng2-daterangepicker) in ng2-admin can work.

Can I get Date Range Picker

Hello @DanielYKPan

Eg. Something like this

When i click Set Time button or AM/PM change Page will be reloaded

i added control in angular 2 html page and open when i select date and click confirm date will be updated in my input box. when i select picker and change time and click set time button page will be reloaded.

html:

<input class="picker-input" [ngModel]="fromDt" [returnObject]="'string'" [viewFormat]="'MM/DD/YYYY hh:mm A'" [(dateTimePicker)]="fromDt" [hourTime]="'12'" [mode]="'dropdown'" readonly>

Translate widget buttons

Hi, I have question about translations. Can I anyhow translate buttons like "Today" "Set Time" etc.
Enything else works great but i cannot find anywhere info how to translate those buttons.

date-time-picker & reactive Forms

Hi. Can i use date-time-picker with reactiveForms ?

Can you add these two new languages?

Hi,
Would you add the two languages I paste? Catalan and Spanish.

And release a new version.

Thanks

/**

• ca
  */

export const LANG_CA_TRANS = {
'time picker': 'Selector de Temps',
'today': 'Avui',
'set time': 'Selecciona Temps',
'close': 'Tancar',
'confirm': 'Confirmar',
'hour': 'Hora',
'minute': 'Minut',
'second': 'Segón',
};

/**

• es
  */

export const LANG_ES_TRANS = {
'time picker': 'Selector de Tiempo',
'today': 'Hoy',
'set time': 'Seleccionar Tiempo',
'close': 'Cerrar',
'confirm': 'Confirmar',
'hour': 'Hora',
'minute': 'Minuto',
'second': 'Segundo',
};

on Chrome, hours and minutes sliders are not updated correctly

on Chrome, hours and minutes are not updated correctly while using sliders.
The values written on the slider buttons and the time header are not updated

On the screenshot, you can see that the hour slider has been dragged to '20' but the values haven't been updated on the button and in the header.
As soon as the mouse hover the 'set time' button, the values are updated

after updateing ng-date-timepicker Error: core_1.InjectionToken is not a constructor.

(index):36 Error: core_1.InjectionToken is not a constructor
Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/translations.js
Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/dialog.component.js
Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/picker.directive.js
Evaluating http://localhost:888/node_modules/ng-pick-datetime/lib/picker.module.js
Evaluating http://localhost:888/node_modules/ng-pick-datetime/index.js
Evaluating http://localhost:888/app/app.module.js
Evaluating http://localhost:888/app/main.js
Loading app
at Object.eval (translations.ts:15)
at eval (translations.ts:29)
at eval (translations.ts:29)
at eval ()
at evaluate (evaluate.js:106)
at instantiate.js:354
at dynamicExecute (register-loader.js:686)
at doEvaluate (register-loader.js:633)
at ensureEvaluate (register-loader.js:542)
at register-loader.js:562
at Object.eval (dialog.component.ts:10)
at eval (dialog.component.ts:239)
at eval (dialog.component.ts:239)
at eval ()
at evaluate (evaluate.js:106)

can I call function and pass selected date in my .ts file

Date is being submitted before I select it.

As I open the dialog the current moment is submitted without any event select date or click on confirm button.

It submits date which I set as the default date. It submits the given value by default without any instructions?

  <button *ngIf="selectedMeeting?.startDateTime" **[dateTimePicker]="selectedMeeting.startDateTime"** class="btn btn-row " (dateTimePickerChange)="onDateTimeChanged($event,'start')" [disabled]="!isOrganizer() || isStartedOrCompleted()">
            <span>Starts</span><span class="sbi-blue">{{selectedMeeting.startDateTime | commonDate:'D MMM YYYY  HH:mm' }}</span>
        </button>

Integrated with angular2-seed

Dear Daniel,

I tried to integrated your ng2-date-time-picker into angular2-seed:
https://github.com/mgechev/angular-seed

but it doesn't work...

Can you help on this? Thanks

Selection of year doesn't work

When I try to select a year it doesn't work. The selection only works if I select the year using the arrows of the calendar.

[Request] disabling animation

Is it possible to add an option to disable dropdown/popup animation ?

Seconds selection on time

Is there a way to allow the time picker to entry the seconds?

cant make two way binding with selectedValue

hi there
i have a form in edit mode so i subscribe to data and fill it to my input but the datetime picker just store the current time of my laptop !

Buttons are not localized

I tried to use date-time-picker today and used the localized version with [locale]="'fr'".
It works well but the buttons are not localized and still displayed in english.

Is there a way to localize buttons ?

You cannot specify an optional minimum date / time and maximum date / time

just like:
min-date Date, mininum selectable date
max-date Date, maximum selectable date
min-hour number, mininum selectable hour
max-hour number, maximum selectable hour

不可以指定可选的最小日期/时间和最大日期/时间

how to set the modal`s width

when i set the [mode]="'dropdown'" , i meet a CSS problem:

so i want to redefined the modal`s width

Suggestion about the theme

@DanielYKPan
Hi, Daniel , I have a suggestion that the [theme] can set GRB too, like this: [theme]="'#ff576b'" .
And than its will be more compatible。
BTW, just a suggestion, for reference only

Unable to submit

Hello,

Since the new version, I can't submit my form anymore.

Here's a minimalist try :

In my component :

private variable: string;
submit() {
    submit'+this.variable);
}

In my component's template :

<form submit)="submit()">
   <input name="variable" [ngModel]="variable | date: 'short'" [(dateTimePicker)]="variable" readonly/>
   <button>Save</button>
</form>

Do you have an idea to resolve this problem ?

N.B. :

• Version : ^4.0.1
• Import : by the SharedModule
• it's possible to submit the form before using the date-time-picker (just open it)

Marty

Inline Date picker

Is there a way to use date picker as inline?
Thanks in advance
Cheers

Disable Future dates

How can I disable future dates

Today Button Functionality Not Working on Different Months and Year

For Eg: I go to different year or month and click on "Today Button" it doesn't goes to and highlight Today's Date.

Override Css

The dropdown is too large. how to override the css and disable the day feature of the component?

Thank you .

Issue with datepicker on mobile device when opening in a modal window & usage of class .footer

I use the datepicker in a moda window. When you want to open it on a mobile device, the footer is cut off.

When I deselect the height in class .picker-popup it gets shown completely.

You can find the class .picker-popup in dialog.component.js in line 175. I deleted height:100% and now it works fine for me. I tried to overwrite it with CSS, but for that I am not smart enought. ;-) Maybe you can give me a hint how to do that. That does not work:

.picker-popup {
height: auto !important;
}

Another thing is that you use a class called .footer. This gets overwritten, if someone uses the same class. Maybe you change that to a more individual name to prevent race conditions in any ways.

Locale not working

In most countries the week starts with a monday, not a sunday.

Sadly there doesn't seem to be a way to account for that. The datepicker always has Sunday as left-most column, no matter which locale.

Edit: Wrong issue. Real issue is: Despite setting locale, the component does not adapt to the chosen locale but still looks like 'en'.

CSS class has been removed

I've started working with this datetime picker in our project and yesterday when I've installed the latest version, some override of CSS that I've made stop working. I see that some class like «out-focus» has been remove and there is no selector anymore that I can use to apply my customization. Is it something that you can fix, or I need to use previous version (4.0.5?).

I did that customization to works with Angular Material 2 and it supports theme:

Make locale for Romanian

Hello,
as you suggest in the Readme I am creating an issue for adding the full locale translation for the ones not found in the momentjs package, so here it is, if I let something out please let me know.
This is a suggestion of how I think it should look like. Hope it helps.

/**
 * ro - Romanian
 */

export const LANG_RO_TRANS = {
    'time picker': 'Selector Timp',
    'today': 'Astăzi',
    'set time': 'Setează Ora',
    'close': 'Închide',
    'confirm': 'Confirmă',
    'hour': 'Oră',
    'minute': 'Minut',
    'second': 'Secondă',
};

Have a great evening

font-familiy custom

Hello,
could you provide a way to change the font-family ?

[mode] ="inline" make other input type file dialog dosn`t work !

hi there
im using date-time-picker and its very good but im face a problem with mode inline
i have in my form other input type file and when i set the mode to inline in date-time-picker
the dialog dosnt show up

i need a solution plz

ERROR in DateTimePickerModule is not an NgModule

hello,
while importing this plugin into my app.module.ts gives me the following error:
ERROR in DateTimePickerModule is not an NgModule.

Theme attribute isn't respected

Setting [theme]="'[Hex code]'" doesn't seem to work at all. Even the "Choose Different Theme" demo https://danielykpan.github.io/date-time-picker/ doesn't work.

Scrollbar are displayed when the calendar is displayed at the bottom of a form

When the datetime picker is displayed at the bottom of a form, scrollbar are displayed to show calendar. Is it possible that the DOM element is create outside the form to show up outside the div element without overflow?

Best Regards

Classes instead of colors

On every hover or an another action, the color changes via "style"-tag. This is nice, but there should be an additional class, so that the styling it could be overwritten via css.

On selecting date, nothing happens

Hi,

I have tried both pop up and drop down options.In pop up mode, after selection of date i pressed confirm. so it has to render date to input box, but nothing happens just date picker stays on the screen.
And in drop down also on selecting date nothing happens. Please help

Modal Class

Using the .modal class will clash with other frameworks like bootstrap.

NaN value when selecting time

I've tried to use the time picker with pipe (date: 'shortTime'), it works fine the first time:

If I reopen it, I've got NaN value display:

Can't format date with [viewFormat]

Hello,
I tried your module and it's working well thanks 👍
Now I try to format my date with [viewFormat]="dddd", unfortunately I's not working.
I'm using webpack. So maybe I miss something somewhere ...
Can you help me figure it out ?

Thanks,

Only on production environment the input click generates an error

Everything on development works just the way it should.
On the click event the calendar is shown and enables me to pick a date.
When serving on production mode with angular-cli, with ng serve --prod, clicking on the input throws an error in the console that looks like the one in the attachment.

<input mdInput class="picker-input" [ngModel]="transactionForm.date | date: 'short'" required="true" [(dateTimePicker)]="transactionForm.date" placeholder="Date" dividerColor="none" readonly [theme]="'green'" [locale]="'ro'">

So here is the console error that I receive:

I can see that is something related to AOT and the fact that the dialog creation is created in a dynamic way. Please help me with some suggestions or maybe this is actually a bug. I also provided the package.json dependencies so that you can see what versions I am using. Sorry for the long issue. Hope this helps. Thanks in advance.

"dependencies": {
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.3.1",
    "angular-oauth2-oidc": "^1.0.20",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.1.1",
    "moment": "^2.18.0",
    "ng2-charts": "^1.5.0",
    "ng2-cookies": "^1.0.6",
    "ng2-date-time-picker": "^2.0.12",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.2",
    "@angular/compiler-cli": "^2.4.6",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.64",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "phantomjs": "^2.1.7",
    "phantomjs-prebuilt": "^2.1.14",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }

Can I select Multiple date

Position in dropdown mode

I'd like the ability to adjust the position of the dropdown mode. it always opens underneath the control, and I don't necessarily want it to overflow to scrollbar.

Configurable position (and other css) of the modal

How to import scss variables to override

I'm sure there's an easy way to do this that I'm just not figuring out. I've added this to an Ionic 2 project, and as far as I can tell, there isn't a way to change the scss variables to theme the popup differently.

If there is can you point me towards how to do this?

Support in a Bootstrap modal

Hello,

I wanted to use the component in a Bootstrap 3 modal but I had some problems.
First, I tried to use it in the default mode ('popup') but it wasn't very good looking.
Then I used the 'dropdown' mode and I had a position problem caused by the fixed position (CSS) of the Bootstrap modal.

I have found a workaround : set the position of the modal to absolute but maybe you have a better idea to soluce this problem.

Thanks,

Marty