ng2-ui / datetime-picker

Angular2 DateTime Picker

Angular2 User Interface

Collection of Quality Angular 2 UIs

IMPORTANT: NOT-MAINTAINED

Accepting volunteers and ready to transfer ownership.

Example

Modules Included

module	version	most-recent version
@ngui/auto-complete	0.13.0
@ngui/collapsable	0.5.0
@ngui/datetime-picker	0.16.0
@ngui/infinite-list	0.6.0
@ngui/map	0.17.0
@ngui/menu	0.6.0
@ngui/overlay	0.8.0
@ngui/parallax-scroll	0.5.0
@ngui/popup	0.5.0
@ngui/scrollable	0.9.0
@ngui/sticky	0.6.0
@ngui/tab	0.5.0
@ngui/tooltip	0.5.0
@ngui/sortable	0.4.0
@ngui/react	0.3.0

Install

• npm

  $ npm install @ngui/ngui @types/googlemaps @types/hammerjs --save-dev

• update systemjs.config.js map and packages

  map['@ngui/ngui'] =  'node_modules/@ngui/ngui/dist/ngui.umd.js';

Usage

• import NguiModule into your app.module.ts

  import { NgModule }       from '@angular/core';
  import { BrowserModule }  from '@angular/platform-browser';
  import { FormsModule }    from "@angular/forms";
  import { HttpModule } from '@angular/http';
  
  import { AppComponent }   from './app.component';
  import { NguiModule, NguiMapModule }  from '@ngui/ngui';              // <---- this
  
  @NgModule({
    imports: [
      BrowserModule, 
      FormsModule, 
      HttpModule, 
      NguiModule,  // <--- this
      NguiMapModule['forRoot']({ apiUrl: 'YOUR GOOGLE MAP URL WITH KEY'}) // <---- this
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

• It's ready. Now use it in your template

  <input ngui-auto-complete [source]="arrayOfKeyValues" [(ngModel)]="myModel" />
  
  <input [(ngModel)]="date1" ngui-datetime-picker />
  
  <ngui-map center="Brampton, Canada"></ngui-map>

ng2-ui welcomes new members and contributors

This module is only improved and maintained by contributors like you;

As a contributor, it's NOT required to be skilled in Javascript nor Angular2. It’s required to be open-minded and interested in helping others. You can contribute to the following;

• Updating README.md
• Making more and clearer comments
• Answering issues and building FAQ
• Documentation
• Translation

In result of your active contribution, you will be listed as a core contributor on https://ng2-ui.github.io, and a member of ng2-ui too.

If you are interested in becoming a contributor and/or a member of ng-ui, please send me email to allenhwkim AT gmail.com with your github id.

For Developers

To start

$ git clone https://github.com/ng2-ui/ngui.git
$ cd ngui
$ npm install
$ npm run build
$ npm start

To update dependencies

$ npm run upgrade

datetime-picker's Issues

ng-dirty is not triggered when date value has changed

Hello,

First, thanks a lot for this useful component.

I'm using the datepicker within a model driven form :

<input class="form-control" ng2-datetime-picker formControlName="date_change" date-only="true" [(ngModel)]="crisisForm.value.status.date_change" />

When a new value is selected, the class ng-dirty is not set to the input. Am i doing it wrong ?
I've checked the demo and it look the same.

Thank you

1 day off

hi again!
it seems when you select a date on the calendar, and the calendar closes, when you open it again, it defaults to 1 day before the currently selected day. i.e. in your plnkr, the date defaults to 2015-01-01 but when you click it it shows 2014-12-31.
thanks!

moment.js supports typescript

Adding the moment.js script directly in the html page is probably an unusual way for Angular2 developers using typescript. Additionally, Moment.js supports typescript (http://momentjs.com/docs/#/use-it/typescript/) so it would be probably easy to support that in this module

Exception in IE 11

Hello,

Thanks for this great component, but there is exception when control is opened in IE 11.

Exception stacktrace:
EXCEPTION: Error in ../ng2-datetime-picker/dist/datetime-picker.component.js class anonymous_token_72_ - inline template:5:11
ORIGINAL EXCEPTION: TypeError: Unable to get property 'fullName' of undefined or null reference

This exception occurs, when you want to change time.

Usage:
<input [(ngModel)]="timeStart" datetime-picker class="form-control" />

In chrome and firefox is working great!

Any help?

Thanks!

Compatibility with bootstrap

The wrapper element which has a className of ng2-datetime-picker has a style added to it for inline-block.

All input controls by default are 100% of the container control. If using this control with bootstrap, you can a result like this

But if you remove the display: inline-block, it appears full width correctly. Any reason for this??

Focus using tab close datepicker

When the focus in input using tab, the datepicker doesn't show. It's show and close.

making width:100%

Hello people,

I'm trying to make the width:100% of my datetime-picker. Is that even possible, any work arounds?
Whatever I do it's still changing it's size. Even tried with JQuery.

Regards
yadbo

Picker position with boundingrect is too little.

Anyway, if there is not enough space at bottom, in the top could be much less 😅

date-format not working?

Is it just me or is it doing yMd even when you specify something else?
<input [(ngModel)]="date2" datetime-picker date-format="Mdy" date-only="true" />
still shows as 2015-01-01

Empty value

Is there a way that I can use the datepicker and set an empty value

It would be interesting to have a property allow null and them have a button to set the date value null.

TypeError: Cannot read property 'fullName' of undefined

I have referred your test folder example and implemented this

i have used below codes in system config js
map['ng2-datetime-picker'] = 'node_modules/ng2-datetime-picker/dist';
packages['ng2-datetime-picker'] = {main: 'index.js', defaultExtension: 'js'};

In my component used like this
import {DateTimePickerDirective} from "ng2-datetime-picker";

html code:
<input [(ngModel)]="date2" ng2-datetime-picker />

<input [(ngModel)]="date2" ng2-datetime-picker /><br/>

whenever I tap calendar icon , I am getting below error and calendar displayed partially( the day only displaying)

platform-browser.umd.js:2306 EXCEPTION: Error in ./DateTimePickerComponent class DateTimePickerComponent - inline template:6:11
platform-browser.umd.js:2306 ORIGINAL EXCEPTION: TypeError: Cannot read property 'fullName' of undefined

Can you please help me on this

Date and Time becomes NaN when user tries to use keyboard to change date time value instead of picker

Hello, This is Sreenesh Kini. I am facing some issue in using this datetimepicker....When I try to edit the date or time from input box using keyboard, without using the picker, then it gives me error as "NaN". I am attaching the screenshots here..

Please help for a solution. Thank you.

Time only? (and a few notes about readme)

Hi!

Thanks for this awesome picker! Great job.
I would like to request a new feature that would only let user select the time without any date.

Also, I noticed that the readme wants you to override CSS using this selector:

#my-div .datetime-picker { background-color: blue; }

But the rendered class is actually called "ng2-datetime-picker".
And in the example for overriding date format the import statement is stated twice.

Date value not the displayed value

I set the date to 01/01/2010, using the DD/MM/YYYY format and I got another value in my datepicker

https://plnkr.co/edit/onkXaUSVycm9Ds3iOsoo?p=preview

datetime-picker directive requires ngModel error

Here is my code:
<input type="text" class="form-control" placeholder="{{'FIELD_DATE' | translate}}" [formControl]="date" [ngModel]="dateValue" datetime-picker [date-format]="dateFormat">
I fetch dateValue from server and in first time this variable is empty. I have the error in console:
datetime-picker directive requires ngModel

close popup

When we have a datetime, we must set close-on-select to false to let users time to select both a date and a time. But the only way to close the popup afterwards seems when clicking with the mouse somewhere outside the popup. It would be good to have other possibilities such as when Escape is clicked. Also when the blur event occurs on the input (through a tab for instance).

Fill field don't propagate to component

When I type a date in the input like 01/01/2010, the value don't propagate to component.

Somebody have the same problem?

Somebody can help me?

The input code follow:

<input class="mdl-textfieldcustom__input ng-valid ng-touched ng-dirty" date-format="DD/MM/YYYY" date-only="true" ng2-datetime-picker="" type="text" ng-reflect-model="" ng-reflect-date-format="DD/MM/YYYY" ng-reflect-date-only="true" ng-reflect-ng-model="" ng-reflect-id="de" id="de" ng-reflect-read-only="false">

Implement [WeekStartWith]

@Input('week-start-with')
public weekStartWith:string = 'sun';

How to keep the datetime-picker field without value (like a optional field)

Hi,

In my application, the date is a optional field, so I'd like to know if it is possible to define the field without any value.

Is it possible?

Selection of year and month

How can i select a specific year or month ?

ng2-DateTime-Picker not working properly with Model Driven Forms

ng2-datetime-picker was working till we were on Template driven forms , but once we moved to the model driven forms we are unable to select the date and load that date into the input text box. (Calendar gets displayed when we hit the input text box and allows us to select dates but does not load that into the text field.)

Below is the code for the input textbox :

 <input formControlName="blackoutDisplayBegin" [(value)]="blackout.DisplayBegin"
               datetime-picker  />

Model as Date when format is used

I made this plunkr
https://plnkr.co/edit/yOoXEdAeVqUvlElVN32Q?p=preview
if I put a Date object, it shoudn't return the date object back?

the displayed value should be the formatted and the internal value should be the date correct?

DateTime Picker not working on date-only="false" case

I tried ng2-datetime-picker today, its not working properly with date-only="false" condition and its working in date-only="true"

Following i have used in my template
"<input [(ngModel)]="date1" datetime-picker />" --> Not working as shown in image

<input [(ngModel)]="date1" datetime-picker date-only="false" /> --> even i set 'date-only' to false, i am getting only date picker.

Feature Request: "Snap Time" option

A nice feature would be to be able to "snap" the time scroll bar to a given minute period e.g. if "time-snap=10" then the time slider would snap to 0/10/20...50.

User feedback is that the time can be a bit fiddly to use and most times people want either a 5 or 10 or 30 minute selection.

Just a thought. Keep up the great work! :)

Installing with angular-cli/webpack

Hi, I am trying to install the timepicker with an angular-cli/webpack project so am unable to edit the system.config.js directly as in the instructions:

map[‘ng2-datetime-picker'] = 'node_modules/ng2-datetime-picker/dist';
packages[‘ng2-datetime-picker'] = { main: 'ng2-datetime-picker.umd.js', defaultExtension: 'js’ }

I have implemented the other steps but am unable to get the timepicker appearing. Could you kindly advise whether I would need to take alternative steps to map in this environment? I would be grateful for any help you may be able to give. Many thanks!

British date format

Does this component support the British Data format?

0 minutes in time picker

If I click on input field then I see correct year, month, day, hour. But minutes are always equal 0. Here is your example with this error: https://ng2-ui.github.io/#/datetime-picker
There is an input field with 2015-01-01 23:59 If you click on it, then you will see 2015-01-01 23:00

Calendar not picking the date set in the input

As shown on the plunkr of the Readme https://plnkr.co/edit/su2aiL?p=preview, when clicking on the link "2015-06-30", the date is set correctly. However, when opening the popup, it opens to the date of today.

Material Design

I'm using it with material design lite and when the value is selected the style is not the correct one.

what should I change to achieve this?

bundling @angular and rxjs with RC5 makes RC6 failing

Because some dependencies have been updated as part of RC6 and ng2DatetimePicker is actually using RC5 in Npm, this module is breaking.

Easy fix is to remove the package dependency (my current workaround was just to delete node_module in ng2DatetimePicker, npm defaults then on the main node_modules rep).

Console Messages Leaking

Just wanted to leave a note that in datepicker.directive (Lines 137 and 165) the console leaks hiding messages due to some logging that wasn't removed. This started with the latest commit, so I figure they just slipped into the commit.

Year is not selectable in the modal

It shall be possible to easily change the year, which is currently not possible and restrict the use of this module. Possibly something simple at the beginning would be good enough (e.g. a dropdown), in order to have a simple functional support.

The long term vision would be to have a datepicker which has a kind of wizard like demoed here https://dalelotts.github.io/angular-bootstrap-datetimepicker/ . Clicking on a year give the possibility to select a month, which give the possibility to select a day, ... But it's also possible to navigate "up", from the day view, to the month view, to the year view, etc.

Unexpected module 'Ng2DatetimePickerModule' declared by the module 'AppModule'

I follow the installation steps but i get this error:

Unexpected module 'Ng2DatetimePickerModule' declared by the module 'AppModule'

Here is my systemjs.config.js and app.module.ts:

systemjs.config.js

(function(global) {
    var map = {
        'app': 'app',
        '@angular': 'node_modules/@angular',
        'rxjs': 'node_modules/rxjs',
        'ng2-datetime-picker': 'node_modules/ng2-datetime-picker/dist'
    };

    var packages = {
        app: { main: 'main.js',  defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        'ng2-datetime-picker': { main: 'ng2-datetime-picker.umd.js', defaultExtension: 'js' }
    };

    var ngPackageNames = [
        'core',
        'common',
        'compiler',
        'forms',
        'platform-browser',
        'platform-browser-dynamic',
        'http'
    ];

    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }

    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }

    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

    ngPackageNames.forEach(setPackageConfig);

    var config = {
        map: map,
        packages: packages
    };

    System.config(config);
})(this);

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {HttpModule, JsonpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {Ng2DatetimePickerModule} from 'ng2-datetime-picker';

@NgModule({
    declarations: [
        AppComponent,
        Ng2DatetimePickerModule
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})

export class AppModule {
}

Plunker doesn't load

The Plunker of the demo doesn't work.
It hangs on "Loading..."

Please fix, thank you.

DynamicComponentLoader deprecated

Deprecation warning ....

I experience the same issue, than the one we can see in the plunkr of this Readme (just open the console): https://plnkr.co/edit/su2aiL?p=preview

Not sure what the issue is about though.

Localization possible?

Is this possible to localize the calendar using moment? Now it's displayed in English but I want to change it to Finnish, is this possible?

defaultValue

Could you add ability to add default value.
By default if you open picker you see current date & time.

Problem with TypeScript

This appeared to me the following errors after I run my gulpfile.js

C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(21,14): error TS1005: '=' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(21,18): error TS1005: ';' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(22,14): error TS1005: '=' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(22,19): error TS1005: ';' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(23,14): error TS1005: '=' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(23,17): error TS1005: ';' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(24,14): error TS1005: '=' expected. C:/Users/R/Documents/projects/myapp/node_modules/ng2-datetime-picker/dist/datetime-picker.component.d.ts(24,19): error TS1005: ';' expected. [10:19:14] TypeScript: 8 syntax errors

how to set "zh-cn" format in ng2-datetime-picker when i use moment.js?

Would be possible to change the name of months by changing the locale of MomentJS?

Hi,

I have a question about i18n. I saw that you're using momentJS with locale, so I'd like to know if it is possible to change language to use 'PT-BR'?

Is it possible?

DatePicker doesn't close

When focus is in DatePipcker like when month is changed and date isn't selected and the focus is changed to other input using tab, datepicker doesn't close.

angular 2 final intergration?

How to make this work with Angular 2 final (2.0.1) ? thank you!

Invalid Date

The component does not seem to work unless you set year and month attributes with rc2. I think addDSTOffset function screws-up the date some how.

Datepicker shall be updated in "real-time" when ngModel / formControl is changed manually

Follow up of #46 (comment)

How can I select also Weekends day (Sat & Sun)?

I saw on the demo that weekends always are disabled. Is there anyway I can select these days?

And the demo on plunker doesn't work. Please check it again.

Thank you!

Not Getting SRC folder

On using '$ npm install ng2-datetime-picker --save' , i am not getting src foler. I want to modify dateTimePicker as per my requirement.

ngModel not updated when selecting only time

It looks like ngModel is not updated on the latest version (currently 0.6.0) when a time on the slider is selected and the popup is closed. However, when changing additionally the date, it works as expected.

Can't find template

I didn't configure systemjs.config.js, cause I used angular2-webpack-starter.
So I imported module with
import {DateTimePickerDirective} from "ng2-datetime-picker";

Everything is ok, but when I focus on input, it throws exception

http://localhost:3000/datetime-picker.html 404 (Not Found)
Unhandled Promise rejection: Failed to load /datetime-picker.html ; Zone: angular ; Task: Promise.then ; Value: Failed to load /datetime-picker.html

And datepicker doesn't shows
Maybe I'm doing something wrong?

date-format doesn't work with banana in the box

<input #fromInput datetime-picker
        [(ngModel)]="from"
        close-on-select="false"
        date-format="DD.MM.YYYY HH:mm"
>

while from value (ISO string) is changed in component, date-format is not applied and input contain ISO 2016-09-13T16:50:46Z instead of 13.09.2016 16:50

I should note that initialization and changing value from datepicker works fine. Only external changes don't touch formatting.

Probably bug