atais / ng2-eonasdan-datetimepicker Goto Github PK

@atais Could you take a look on ngh .
It will auto update the gh-pages with the script built from ng build.
All we need to do is adding ngh, configure a github access for deploying (token will work), and add the command in travis ci..If you want.

Hi,

Is there anyway to have the calendar control automatically show when the input is focused on? At present I have to click the icon for it to show.

Thanks

I am getting the following error while compiling my application.

ERROR in ./node_modules/ng2-eonasdan-datetimepicker/src/datetimepicker.directive.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: C:\Users\Aman Purohit\Desktop\fcs-app\fcs-Xweb-main\node_modules\ng2-eonasdan-datetimepicker\src\datetimepicker.directive.ts is missing from the TypeScript compilation. Please make sure it is in your tsco
nfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and as
k them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (C:\Users\Aman Purohit\Desktop\fcs-app\fcs-Xweb-main\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:767:23)
at plugin.done.then (C:\Users\Aman Purohit\Desktop\fcs-app\fcs-Xweb-main\node_modules@ngtools\webpack\src\loader.js:41:31)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

Earlier I was using Angular 4 and it was working perfectly. My current config is as follows.

Angular CLI: 7.0.5
Node: 8.9.0
OS: win32 x64
Angular: 7.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Can someone guide what could be a quick fix for this problem?

getting below warnings while webpack build

WARNING in .//ng2-eonasdan-datetimepicker//@angular/core/src/linker/system_js_
ng_module_factory_loader.js
71:15-36 Critical dependency: the request of a dependency is an expression

WARNING in .//ng2-eonasdan-datetimepicker//@angular/core/src/linker/system_js_
ng_module_factory_loader.js
87:15-102 Critical dependency: the request of a dependency is an expression

While running the application getting these errors

Uncaught Error: Unexpected value 'A2Edatetimepicker' imported by the module 'AppModule'. Please add a @NgModule annotation.
at syntaxError (http://localhost:9966/vendor.js:31942:34)
at http://localhost:9966/vendor.js:44896:44
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:9966/vendor.js:44879:49)
at JitCompiler._loadModules (http://localhost:9966/vendor.js:56032:66)
at JitCompiler.compileModuleAndComponents (http://localhost:9966/vendor.js:55991:52)
at JitCompiler.compileModuleAsync (http://localhost:9966/vendor.js:55953:23)
at PlatformRef.bootstrapModuleWithZone (http://localhost:9966/vendor.js:5787:25)
at PlatformRef.bootstrapModule (http://localhost:9966/vendor.js:5773:21)
at Object. (http://localhost:9966/app.js:79632:53)

I'm using this in a project that is updating from Angular 2 to Angular 6 (I'm well aware that this is a huge jump). Will there be support for Angular 6 for this datetimepicker? If so, do you know what the timeframe for that is? If you're not doing this update anytime soon, would you be open to a pull request to update the code?

When using something like this:

<form #form="ngForm" novalidate>
  <input a2e-datetimepicker [date]="startDate" [(ngMode)]="startDate" name="startDate" [options]="a2eOptions" (onChange)="dateStartChange($event)" required/>
</form>

The ngModel will conflict with the date property and shows non formatted date.

Anyone have an example of how to make it work with a form and ngmodel directive in angular?

Im having same issue

#10

says he changed the class name... but im not sure where... in the js/css from the nodemodule?

Hi,

Thanks for writing this wrapper and sharing it!

I have it installed in my Angular 4 application and there are no errors but the input isn't showing any value until I expose the calender even though the date is assigned a value.

When I debug I can see that the date object does indeed have a value:

this.dpElement.data('DateTimePicker').date(this.date);

In the HTML there is an attribute with the correct value:

ng-reflect-date="2018-02-28T00:00:00"

Here's my markup:

            <div class="input-group">
                <input class="form-control" 
                       a2e-datetimepicker
                       [date]="startDate"
                       [options]="a2eOptions"
                       name="startDate"
                       id="startDate"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>

In my component constructor I'm setting the value:
this.startDate = new Date("2018-02-28T00:00:00");

Any ideas why this isn't working?

Many thanks

My mistake,
but I think most of the code for both examples is shared.

I think the easiest approach would be to remove duplicates and link the files where necessary.
It will be much easier to adapt the examples in future.

Hi, is it possible to add this plugin to a angular4 project? I have tried to add and it will install all angular2 dependencies into my angular4 project which will cause a conflict once I ran it.

Im adding this plugin via yarn.

Hi, have a problem, everything ok but only one error don't give me to render my page, help please, have this error:
date() parameter must be one of [null, string, moment or Date]
Also what i done look below
main.ts
import 'eonasdan-bootstrap-datetimepicker';
app.module.ts (used to use directive because have mistake with ngModule)

import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/dist/datetimepicker.directive';
import { MomentModule } from 'angular2-moment/moment.module';

my filter.ts (used to import '* as moment' because only 'moment' doesn't work)

import * as moment from 'moment';
...
export class myClassComponent {
    date: moment.Moment;
}

my template

<div class="input-group">
        <input class="form-control"
               type="text"
               placeholder="From"
               [(ngModel)]="filter.from"
               a2e-datetimepicker
               [date]="date"
        />
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>

Im trying to use this directive. I see that you are taking [date] input which makes it not compatible with "from control" of ng2 (reactive form support). Do you have this support considered already? If yes, could you please show me how? I'm attempting to this below.

      <div class="input-group">
        <input class="form-control"
               a2e-datetimepicker
               [date]="obj.date"
               [options]="a2eOptions"
               [placeholder]="obj.placeholder"
        />
        <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
      </div>

Unexpected value 'A2Edatetimepicker' imported by the module 'AppModule'. Please add a @NgModule annotation.

Hi,
actually when i try to use ng2-eonasdan-datetimepicker with system.js and package.son config files, i get an error with visual studio

"devDependencies": {
    "browser-sync": "^2.12.10",
    "concurrently": "^2.2.0",
    "jasmine-core": "2.5.2",
    "jasmine-node": "^1.14.5",
    "jshint": "^2.9.2",
    "lite-server": "^2.2.0",
    "live-server": "^1.0.0",
    "ng2-eonasdan-datetimepicker": "0.0.2", <----
    "typescript": "^2.0.2", <----
    "typings": "^1.3.2" <----
  }

i geth these errors :

Gravité	Code	Description	Projet	Fichier	Ligne	État de la suppression
Erreur		Build :Interface 'JQueryDeferred<T>' cannot simultaneously extend types 'JQueryPromise<T>' and 'JQueryGenericPromise<T>'.	
C:\myapp\Typescripts\jquery.d.ts	428	

Gravité	Code	Description	Projet	Fichier	Ligne	État de la suppression
Erreur		Build :Interface 'JQueryEventObject' cannot simultaneously extend types 'BaseJQueryEventObject' and 'JQueryPopStateEventObject'.	
C:\myapp\Typescripts\jquery.d.ts	574	

Gravité	Code	Description	Projet	Fichier	Ligne	État de la suppression
Erreur		Build :Duplicate identifier 'export='.	Upsign Digital Client	C:\myapp\Typescripts\jquery.d.ts	3905	

in my folder typescripts, i have all ready jquery.d.ts and in my nodes_modules, i have

How can i solve this ?

The problem

When using input-group-btn the calendar isn't opening, is there any way I can use it that way?

Hi @fetrarij, we were able to get it to work in our project, and the need for a fix was probably project-specific. We had to manually import a script, and then everything worked fine. Thanks for checking though. I'll close this.

Originally posted by @benjaminrlawrence in #56 (comment)

Where did ou import script manually

hi,

when i use ng2-eonasdan-datetimepicker in my ng2 project..

I wrote it exactly as you did...

but i meet a problem.

Uncaught (in promise): Error: Error in ./TestBaseComponent class TestBaseComponent - inline template:30:23 caused by: this.dpElement.datetimepicker is not a function

this is my code:

vendor.ts

import 'eonasdan-bootstrap-datetimepicker';

.module.ts

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {TestBaseComponent} from "./test-base.component"; import { BrowserModule } from '@angular/platform-browser'; import {A2Edatetimepicker} from 'ng2-eonasdan-datetimepicker'; @NgModule({ imports: [CommonModule,BrowserModule,A2Edatetimepicker], declarations: [TestBaseComponent], providers: [], //服务 exports: [A2Edatetimepicker,TestBaseComponent] }) export class TestBaseModule { }

.component.ts

`import { Component,OnInit} from '@angular/core';
let template = require('./test-base.component.html');
@component({
template: template
})
export class TestBaseComponent implements OnInit{
a2eOptions = {
format: "DD.MM.YYYY",
};

ngOnInit(){}

}`

.html

<div> <h4 style="color: red">日历</h4> <div class="form-group"> <div class="input-group"> <input class="form-control" a2e-datetimepicker [date]="dateTo" [options]="a2eOptions" (onChange)="dateToChange($event)" (onClick)="dateClick()"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div>

i do not know why,

please help me to find the reason when you're not busy.

thanks a lot.

It doesn't work in angular 4... Any idea why?

ERROR in Error: A2Edatetimepicker is not an NgModule
    at _getNgModuleMetadata (/home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:140:15)
    at _extractLazyRoutesFromStaticModule (/home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:109:26)
    at /home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:129:27
    at Array.reduce (native)
    at _extractLazyRoutesFromStaticModule (/home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:128:10)
    at Object.listLazyRoutesOfModule (/home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_impl.js:53:22)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/home/walter/Smartmeter/SMP_Frontend/node_modules/@angular/compiler-cli/src/ngtools_api.js:91:39)
    at AotPlugin._getLazyRoutesFromNgtools (/home/walter/Smartmeter/SMP_Frontend/node_modules/@ngtools/webpack/src/plugin.js:207:44)
    at _donePromise.Promise.resolve.then.then.then.then.then (/home/walter/Smartmeter/SMP_Frontend/node_modules/@ngtools/webpack/src/plugin.js:443:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:169:7)

When installing using node v10.15.1, I am notified of a security vulnerability related this package's dependency on jQuery (^1.8.3 || ^2.0). Can this be updated to include jQuery ^3.0? The eonodasan bootstrap datetime picker allows that version of jQuery.

Hi, first of all, thank you a lot for the componet!!

I am facing one strange problem. The locale is only working when I start the application with npm run webpack:start. When I use npm run start (ng serve), the locale don't change.

My options setup:

options: any = {format: 'YYYY/MM/DD HH:mm', locale:'pt-br', showClear: true};

Thank you in advance.

Unfortunately, I do not work with Angular 2 anymore and I am not able to develop & maintain this repository.

If one would like to become a contributor please contact me on email.

ERROR TypeError: Cannot read property 'top' of undefined
    at place (scripts.bundle.js:504)
    at Object.show (scripts.bundle.js:1332)
    at InputDateComponent.open (input-date.component.ts:56)
    at Object.eval [as handleEvent] (InputDateComponent.html:8)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLInputElement.eval (platform-browser.js:2628)

Code with error:

// Top and bottom logic
  if (vertical === 'auto') {
    if (offset.top + widget.height() * 1.5 >= $(window).height() + $(window).scrollTop() &&
      widget.height() + element.outerHeight() < offset.top) {
      vertical = 'top';
    } else {
      vertical = 'bottom';
    }
  }

When I import from module and run build and get an error follow

ERROR in A2Edatetimepicker is not an NgModule

I am attempting to remove a medium level vulnerability coming from bootstrap. I have already built a version of eonasdan-datetimepicker with upgraded packages. In attempting to build ng2-eonasdan-datetimepicker, I am running into a 'yarn install' problem.
So clearly I don't quite understand enough.
How to build this package locally?

What I am seeing after cloning the project and running 'yarn' is:

rimraf dist && ngc

Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasmine/index.d.ts:14:18: Cannot redeclare block-scoped variable 'describe'.
Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasmine/index.d.ts:16:18: Cannot redeclare block-scoped variable 'xdescribe'.
Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasmine/index.d.ts:25:18: Cannot redeclare block-scoped variable 'it'.
Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasmine/index.d.ts:35:18: Cannot redeclare block-scoped variable 'xit'.
Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasminewd2/index.d.ts:9:18: Cannot redeclare block-scoped variable 'it'.
Error at /home/joel/workspace/Tracker3/ng2-eonasdan-datetimepicker/node_modules/@types/jasminewd2/index.d.ts:11:18: Cannot redeclare block-scoped variable 'xit'.
Error at /home/joel/workspace/Tracker3/node_modules/@types/mocha/index.d.ts:41:15: Cannot redeclare block-scoped variable 'describe'.
Error at /home/joel/workspace/Tracker3/node_modules/@types/mocha/index.d.ts:42:15: Cannot redeclare block-scoped variable 'xdescribe'.
Error at /home/joel/workspace/Tracker3/node_modules/@types/mocha/index.d.ts:47:15: Cannot redeclare block-scoped variable 'it'.
Error at /home/joel/workspace/Tracker3/node_modules/@types/mocha/index.d.ts:48:15: Cannot redeclare block-scoped variable 'xit'.
Error at /home/joel/workspace/Tracker3/node_modules/@types/passport/index.d.ts:15:13: Subsequent property declarations must have the same type.  Property 'user' must be of type 'any', but here has type 'User'.

Hi, i am using 0.1.3 version of your component, which is really great, but i am having this errors when doint NG SERVE: ( i have followed all your instructions to use this control)

ERROR in node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.d.ts(10,29): error TS2694: Namespace '''' has no exported member 'SetOptions'.
node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.d.ts(12,32): error TS2694: Namespace '''' has no exported member 'Datetimepicker'.

This is my code:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SmartadminModule } from '../shared/smartadmin.module';
import { RepActividadComponent } from './rep-actividad.component';
import { RepActividadRouting } from './rep-actividad.routing';
import { AppSharedModule } from '../appshared/appshared.module';
import { SmartadminInputModule } from '../shared/forms/input/smartadmin-input.module';
import { A2Edatetimepicker } from 'ng2-eonasdan-datetimepicker';

@NgModule({
imports: [
CommonModule,
SmartadminModule,
SmartadminInputModule,
RepActividadRouting,
AppSharedModule,
A2Edatetimepicker
],
declarations: [RepActividadComponent]
})
export class RepActividadModule { }

My .angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/moment/locale/es.js",
"../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
],

Could you tell me what i am doing wrong? Thanks in advance.

who can help?

It would be great if you can provide demo on plunker, thanks :)

Hello Team,
I am getting the below issue in a form.
Can't bind to 'options' since it isn't a known property of 'input'. ("m-control" a2e-datetimepicker [(ngModel)]="dateTo"
[ERROR ->][options]="a2eOptions" />
<span class="input-group-addon")
How can I resolve this issue.

ERROR in Error: Metadata version mismatch for module C:/projects/LFM/node_modules/ng2-eonasdan-datetimepicker/node_modules/@angular/core/core.d.ts, found versi
on 4, expected 3
at StaticSymbolResolver.getModuleMetadata (C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:25748:34)
at StaticSymbolResolver._createSymbolsOf (C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:25536:46)
at StaticSymbolResolver.getSymbolsOf (C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:25517:14)
at C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:24376:30
at Array.forEach (native)
at extractProgramSymbols (C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:24375:79)
at AotCompiler.analyzeModulesAsync (C:\projects\LFM\node_modules@angular\compiler\bundles\compiler.umd.js:23931:47)
at CodeGenerator.codegen (C:\projects\LFM\node_modules@angular\compiler-cli\src\codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (C:\projects\LFM\node_modules@angular\compiler-cli\src\ngtools_api.js:73:30)
at _donePromise.Promise.resolve.then (C:\projects\LFM\node_modules@ngtools\webpack\src\plugin.js:386:44)

Help me please!

Hi,

Followed tutorial in README file, but when loading my app I have this error. I googled but no advice helped.

core.es5.js?0445:1223 ERROR TypeError: this.dpElement.datetimepicker is not a function
at DateTimePickerDirective.ngOnInit (eval at 635 (app.js:796), :75:24)
at checkAndUpdateDirectiveInline (eval at (vendor.js:20), :11037:19)
at checkAndUpdateNodeInline (eval at (vendor.js:20), :12533:17)
at checkAndUpdateNode (eval at (vendor.js:20), :12472:16)
at prodCheckAndUpdateNode (eval at (vendor.js:20), :13166:5)
at Object.eval [as updateDirectives] (VisitorsComponent.ngfactory.js:2107)
at Object.updateDirectives (eval at (vendor.js:20), :12923:72)
at checkAndUpdateView (eval at (vendor.js:20), :12439:14)
at callViewAction (eval at (vendor.js:20), :12804:21)
at execComponentViewsAction (eval at (vendor.js:20), :12736:13)
at checkAndUpdateView (eval at (vendor.js:20), :12445:5)
at callViewAction (eval at (vendor.js:20), :12804:21)
at execEmbeddedViewsAction (eval at (vendor.js:20), :12762:17)
at checkAndUpdateView (eval at (vendor.js:20), :12440:5)
at callViewAction (eval at (vendor.js:20), :12804:21)

Hi, it's okay with it in development mode but have ERROR in prod mode:

ERROR in Unexpected value 'DateTimePickerDirective in .../node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.d.ts' declared by the module 'AppModule in .../src/app/app.module.ts'

can you help me with it?

Can the arrow keys function be disabled?

I already do the installation step and add import in vendor.ts but directive still not work for me any solution for this problem. My project using webpack and angular 2

It doesn't work with angular5. I've got error:
ERROR TypeError: this.dpElement.datetimepicker is not a function

Stack trace:
DateTimePickerDirective.prototype.ngOnInit@webpack-internal:///../../../../ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js:24:9
checkAndUpdateDirectiveInline@webpack-internal:///../../../core/esm5/core.js:12598:9
checkAndUpdateNodeInline@webpack-internal:///../../../core/esm5/core.js:14125:20
checkAndUpdateNode@webpack-internal:///../../../core/esm5/core.js:14068:16
debugCheckAndUpdateNode@webpack-internal:///../../../core/esm5/core.js:14961:55
debugCheckDirectivesFn@webpack-internal:///../../../core/esm5/core.js:14902:13
View_PatientInformationFormComponent_0/<@ng:///AppModule/PatientInformationFormComponent.ngfactory.js:394:5
debugUpdateDirectives@webpack-internal:///../../../core/esm5/core.js:14887:12
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14034:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14385:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14317:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14040:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14385:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14317:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14040:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14385:21
execEmbeddedViewsAction@webpack-internal:///../../../core/esm5/core.js:14343:17
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14035:5
callViewAction@webpack-internal:///../../../core/esm5/core.js:14385:21
execComponentViewsAction@webpack-internal:///../../../core/esm5/core.js:14317:13
checkAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14040:5
callWithDebugContext@webpack-internal:///../../../core/esm5/core.js:15288:39
debugCheckAndUpdateView@webpack-internal:///../../../core/esm5/core.js:14825:12
ViewRef_.prototype.detectChanges@webpack-internal:///../../../core/esm5/core.js:11802:9
ApplicationRef.prototype.tick/<@webpack-internal:///../../../core/esm5/core.js:6110:58
ApplicationRef.prototype.tick@webpack-internal:///../../../core/esm5/core.js:6110:13
ApplicationRef/<.next/<@webpack-internal:///../../../core/esm5/core.js:5943:99
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:391:17
forkInnerZoneWithAngularBehavior/zone._inner<.onInvoke@webpack-internal:///../../../core/esm5/core.js:4953:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:390:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:141:24
NgZone.prototype.run@webpack-internal:///../../../core/esm5/core.js:4770:54
ApplicationRef/<.next@webpack-internal:///../../../core/esm5/core.js:5943:69
EventEmitter.prototype.subscribe/schedulerFn<@webpack-internal:///../../../core/esm5/core.js:4539:36
SafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:244:13
SafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:191:17
Subscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:132:9
Subscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:96:13
Subject.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subject.js:65:17
EventEmitter.prototype.emit@webpack-internal:///../../../core/esm5/core.js:4519:24
checkStable@webpack-internal:///../../../core/esm5/core.js:4918:13
forkInnerZoneWithAngularBehavior/zone._inner<.onHasTask@webpack-internal:///../../../core/esm5/core.js:4966:21
ZoneDelegate.prototype.hasTask@webpack-internal:///../../../../zone.js/dist/zone.js:444:21
ZoneDelegate.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:464:17
Zone.prototype._updateTaskCount@webpack-internal:///../../../../zone.js/dist/zone.js:288:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:208:25
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25

Hi

Was trying to use this module but faced this problem Error: BrowserModule has already been loaded

I was checking and your module is indeed importing the BrowserModule, it shouldn't do that https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-browser-vs-common-module

I think one of the last steps in this project is to implement some tests :-)

@fetrarij I do not know if you would have any spare time to implement them.
I could only suggest, that they could look like those that I have made for Angular 1 version of this project: https://github.com/atais/angular-eonasdan-datetimepicker

IMO you could use the "examples" projects for this purpose. Provide to them the source code and tests would be run on them with protractor or something?

I believe that it would greatly complete this code and allow for future changes with back compatibility.
Locking versions in npm might be a good idea then.

Hi @fetrarij ,

formGroupName.get('formControlName').disable(); is not working when the datepicker is used.

Please fix this.

With the eonasdan-datetimepicker you could update the max and min of a date picker by simply doing this:

.on("dp.change", function (e) {
    if (e.date) {
        $('#returnDatePicker').data("DateTimePicker").minDate(e.date.add(1, 'days'));
    }
});

With angular, I have tried both the jQuery above, which causes all kinds of madness as well as adding a setMin() method to the date picker options object.

Alas, none of those work.

Is this something that can be done?
If so, am I missing something?

Hi, I want to use datetimepicker input in an input-group but I want to open the calendar on input click
and prevent openning it on button click, because I will use the button for a different purpose .

For example:

           <div class="input-group  pull-right">
                    <input type="text" class="form-control card-search" a2e-datetimepicker placeholder="{{'entity.common.to'|translate}}" name="to"
                        (onChange)="dateFilterChange($event,'to')" [date]="date" [options]="a2eOptions" #toInput />
                    <span class="input-group-addon" (click)="loadAll()">
                        <i class="fa fa-search"></i>
                    </span>
               </div>

Hello, it it possible to have a directive for the linked dates per example from below link?
https://github.com/atais/ng2-eonasdan-datetimepicker/blob/master/demo/src/app/linked-datepickers/linked-datepickers.component.ts

Otherwise, i'll have to write an update() method in every component that has linked date

Thanks

Hi,

I am using a2e-datetimepicker for reactive form input.

By default, I need to maintain the input as NULL and need to validate form when input is focused out.

Form Input doesn't change to touched on input focus out. Please fix this @fetrarij .

CSS is broken. How to fix it?

angular-cli.json:

"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"

  ],
  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/moment/moment.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"
  ],

vendors.ts:

// css files
import 'bootstrap/dist/css/bootstrap.min.css';
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css';
// js files
import * as $ from 'jquery';
window['jQuery'] = window['$'] = $;
import 'bootstrap/dist/js/bootstrap.min.js';
import 'eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js';
import * as moment from 'moment';

There is Angular 1 version of this library: https://github.com/atais/angular-eonasdan-datetimepicker
At the moment there are 4 examples for the Angular 1:

• Simple example, with one datetimepicker: http://plnkr.co/n8L8UZ
• Example with two, linked datetimepickers: http://plnkr.co/ZSjN8f
• Validation example: http://plnkr.co/NmFt43
• From/To validation example: http://plnkr.co/ZeKX7z

I am not sure how validation would work with Angular 2 - it is a place for discussion. Anyway it would be nice to have the examples ported to Angular 2.

Angular 2 examples:

• Simple example, with one datetimepicker: https://embed.plnkr.co/vnU3TedIRqOFGXWRbXt0/
• Example with two, linked datetimepickers:
• Validation example:
• From/To validation example:

I have created a simple plunker demo, but it is not done "properly" and not all the functions work. That is why it is incomplete.
Fix list:

• moment library can not be used in app.ts
• datetimepicker dirty import is required for library to be imported

At the moment I do not know how to fix the above.

Probably during creating new demos some bugs/ missing features will be found, that is why it is important to create them.
Thanks for help.

It is not run directly by same as code in new ng 2 app which is build by CLI

We need to give full path

like

import { A2Edatetimepicker } from 'ng2-eonasdan-datetimepicker/src/datetimepicker.module';
import { DateTimePickerDirective } from 'ng2-eonasdan-datetimepicker/src/datetimepicker.directive';

When adding
import datetimepicker from 'eonasdan-bootstrap-datetimepicker';

it gives error

Error in import datetimepicker from 'eonasdan-bootstrap-datetimepicker';

So how we can import in our application

We have not file system.js and other directly app.module.ts

AppComponent.html:14 ERROR Error: Cannot find a differ supporting object 'undefined'
at KeyValueDiffers.push../node_modules/@angular/core/fesm5/core.js.KeyValueDiffers.find (core.js:16533)
at DateTimePickerDirective.push../node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js.DateTimePickerDirective.ngOnInit (datetimepicker.directive.js:103)
at checkAndUpdateDirectiveInline (core.js:18537)
at checkAndUpdateNodeInline (core.js:19801)
at checkAndUpdateNode (core.js:19763)
at debugCheckAndUpdateNode (core.js:20397)
at debugCheckDirectivesFn (core.js:20357)
at Object.eval [as updateDirectives] (AppComponent.html:14)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:20349)
at checkAndUpdateView (core.js:19745)

AppComponent.html:14 ERROR TypeError: Cannot read property 'diff' of undefined
at DateTimePickerDirective.push../node_modules/ng2-eonasdan-datetimepicker/dist/datetimepicker.directive.js.DateTimePickerDirective.ngDoCheck (datetimepicker.directive.js:108)
at checkAndUpdateDirectiveInline (core.js:18540)
at checkAndUpdateNodeInline (core.js:19801)
at checkAndUpdateNode (core.js:19763)
at debugCheckAndUpdateNode (core.js:20397)
at debugCheckDirectivesFn (core.js:20357)
at Object.eval [as updateDirectives] (AppComponent.html:14)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:20349)
at checkAndUpdateView (core.js:19745)
at callViewAction (core.js:19986)

Hi @fetrarij ,

I am using a2e-datetimepicker for reactive form input.

Form reset doesn't effect the input state. Input still in touched. Expected state of input is untouched

Please fix this.

We are trying to implement ng2-eonasdan-datetimepicker for Angular 5 project using 0.0.9 version. Facing the below error:

Even we have tried 0.0.8 version but getting the existed issue #24

ERROR ReferenceError: $ is not defined at new DateTimePickerDirective (eval at <anonymous> (app.js:1750), <anonymous>:18:23) at createClass (eval at <anonymous> (vendor.js:14), <anonymous>:12643:20) at createDirectiveInstance (eval at <anonymous> (vendor.js:14), <anonymous>:12486:37) at createViewNodes (eval at <anonymous> (vendor.js:14), <anonymous>:13944:53) at createEmbeddedView (eval at <anonymous> (vendor.js:14), <anonymous>:13821:5) at callWithDebugContext (eval at <anonymous> (vendor.js:14), <anonymous>:15258:42) at Object.debugCreateEmbeddedView [as createEmbeddedView] (eval at <anonymous> (vendor.js:14), <anonymous>:14570:12) at TemplateRef_.createEmbeddedView (eval at <anonymous> (vendor.js:14), <anonymous>:11896:38) at NgbModalStack._getContentRef (eval at <anonymous> (app.js:547), <anonymous>:59:35) at NgbModalStack.open (eval at <anonymous> (app.js:547), <anonymous>:29:31) at NgbModal.open (eval at <anonymous> (app.js:561), <anonymous>:36:33) at MaintenanceComponent.open (eval at <anonymous> (app.js:715), <anonymous>:33:27) at Object.eval [as handleEvent] (MaintenanceComponent.html:47) at handleEvent (eval at <anonymous> (vendor.js:14), <anonymous>:13749:155) at callWithDebugContext (eval at <anonymous> (vendor.js:14), <anonymous>:15258:42) at Object.debugHandleEvent [as handleEvent] (eval at <anonymous> (vendor.js:14), <anonymous>:14845:12) at dispatchEvent (eval at <anonymous> (vendor.js:14), <anonymous>:10164:25) at eval (eval at <anonymous> (vendor.js:14), <anonymous>:10789:38) at HTMLButtonElement.eval (eval at <anonymous> (vendor.js:143), <anonymous>:2680:53) at ZoneDelegate.invokeTask (eval at 884 (polyfills.js:1407), <anonymous>:421:31) at Object.onInvokeTask (eval at <anonymous> (vendor.js:14), <anonymous>:4943:33) at ZoneDelegate.invokeTask (eval at 884 (polyfills.js:1407), <anonymous>:420:36) at Zone.runTask (eval at 884 (polyfills.js:1407), <anonymous>:188:47) at ZoneTask.invokeTask [as invoke] (eval at 884 (polyfills.js:1407), <anonymous>:496:34) at invokeTask (eval at 884 (polyfills.js:1407), <anonymous>:1517:14) at HTMLButtonElement.globalZoneAwareCallback (eval at 884 (polyfills.js:1407), <anonymous>:1543:17)

After making a date selection I am able to click in the field and use the Backspace key to edit the date.
However, I am not able to use the Delete key as it will always clear the entire field.

Solution do not have the field cleared when the user presses the Delete key but have it do what is expected (e.g. delete a single character for each key press)