nkalinov / ng2-datetime Goto Github PK

H nkalinov,

I'm a new guy with angularjs2 and have some questions about this plugin.

• How to set default value for date / time picker?
• How to change (reset) the value manually via a typescript? I tried to set the model object to null but it seems not reflect to UI - even the model is changed.

Please help to check. Thanks!

I have installed jquery and core-js typings using:

typings install core-js --ambient
typings install jquery --ambient

and when I try running npm install --save ng2-datetime I get the following error in my console:

typings ERR! message Unknown dependency: registry:dt/core-js#0.0.0+20160317120654

typings ERR! cwd /Users/simon/Desktop/Development/git/application_admin_angular2/node_modules/ng2-datetime
typings ERR! system Darwin 15.3.0
typings ERR! command "/Users/simon/.nvm/versions/node/v5.10.0/bin/node" "/Users/simon/Desktop/Development/git/application_admin_angular2/node_modules/typings/dist/bin/typings-install.js"
typings ERR! node -v v5.10.0
typings ERR! typings -v 0.6.8

typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>

npm ERR! Darwin 15.3.0
npm ERR! argv "/Users/simon/.nvm/versions/node/v5.10.0/bin/node" "/Users/simon/.nvm/versions/node/v5.10.0/bin/npm" "install" "--save-dev" "ng2-datetime"
npm ERR! node v5.10.0
npm ERR! npm  v3.8.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `typings install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng2-datetime package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng2-datetime
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng2-datetime
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/simon/Desktop/Development/git/application_admin_angular2/npm-debug.log

Your help is much appreciated.

Hi @nkalinov

I have used following options in datepickerOpts value.
self.datepickerOpts = {
autoclose: true,
todayBtn: 'linked',
todayHighlight: true,
format: 'mm/dd/yyyy',
endDate : new Date(),
enableOnReadonly: true
};

Date picker input text box was still enabled. can you please check this?

Hi,

I am setting the following datepickerOptions in ngOnInit:

.ts

this.datepickerOptions = {
      startDate: new Date(),
      autoclose: true,
      todayBtn: 'linked',
      todayHighlight: true,
      language: 'pl',
      icon: 'fa fa-calendar',
      assumeNearbyYear: true,
      format: 'dd.mm.yyyy'
    };

this.transactionDate = new Date()

.html
<datetime #datepicker [(ngModel)]="transactionDate" [datepicker]="datepickerOptions" [timepicker]="timepickerOptions"></datetime>

Unfortunately the datetime input is empty on initialization.
Removing the startDate option makes the new Date() visible again.

I need the datetime picker to only pick future dates. Any advice?

Error: Template parse errors:
'datetime' is not a known element:

1. If 'datetime' is an Angular component, then verify that it is part of this module.
2. If 'datetime' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
   
   [ERROR ->]<datetime [(ngModel)]="date">
   <input type="date" class="form-control" id="dat"):

app.module.ts

...
import { NKDatetimeModule } from 'ng2-datetime/ng2-datetime';
...
@NgModule({
  imports: [
    ...
    NKDatetimeModule,
    ...
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html
<datetime [(ngModel)]="date"></datetime>

system.config.js

(function (global) {
    System.config({
        paths: {
      // paths serve as alias
            'npm:': 'node_modules/'
        },
    // map tells the System loader where to look for things
        map: {
      // our app is within the app folder
            app: 'js/app',
      // angular bundles
     ....
     //other
     'ng2-datetime': "npm:ng2-datetime",
        },
    // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'ng2-datetime': {
                main: './ng2-datetime.js',
                defaultExtension: 'js'
            },
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Why? Angular2 somehow don't see this component and don't recognize datetime html tag...
I use latest 2.0.1 angular version.

I tried to load demo on the safari browser but it does not seems to work.

Hi @nkalinov
I have selected Year as 2010-2019, but it displays from 2009-2020.
The user navigates to a specified date, but no date selected & discards the calendar. When the calendar is opened again, it shows the previously visited Date/Month/Year. Better it shows currently selected date or If its empty then current date display is fine (This is the suggestion)

I am trying to configure datetime in my application but it keeps failing due to below error. Link to repo I am trying in https://github.com/sumitarora/angular2-examples

VM27654:46EXCEPTION: Uncaught (in promise): Error: Error in ./RioHelloPageComponent class RioHelloPageComponent - inline template:1:4 caused by: No provider for NgControl!
ErrorHandler.handleError @ VM27654:46
next @ VM27653:298
schedulerFn @ VM27680:89
SafeSubscriber.__tryOrUnsub @ VM27685:223
SafeSubscriber.next @ VM27685:172
Subscriber._next @ VM27685:125
Subscriber.next @ VM27685:89
Subject.next @ VM27681:55
EventEmitter.emit @ VM27680:81
onHandleError @ VM27698:65
Zone.runGuarded @ zone.js?fad3:113
_loop_1 @ zone.js?fad3:379
drainMicroTaskQueue @ zone.js?fad3:386
VM27654:51ORIGINAL STACKTRACE:
ErrorHandler.handleError @ VM27654:51
next @ VM27653:298
schedulerFn @ VM27680:89
SafeSubscriber.__tryOrUnsub @ VM27685:223
SafeSubscriber.next @ VM27685:172
Subscriber._next @ VM27685:125
Subscriber.next @ VM27685:89
Subject.next @ VM27681:55
EventEmitter.emit @ VM27680:81
onHandleError @ VM27698:65
Zone.runGuarded @ zone.js?fad3:113
_loop_1 @ zone.js?fad3:379
drainMicroTaskQueue @ zone.js?fad3:386
VM27654:52Error: Uncaught (in promise): Error: Error in ./RioHelloPageComponent class RioHelloPageComponent - inline template:1:4 caused by: No provider for NgControl!
    at resolvePromise (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:429:31)
    at eval (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:406:13)
    at Object.onInvoke (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:7790:1), <anonymous>:44:37)
    at Zone.run (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:96:43)
    at eval (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:462:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:236:37)
    at Object.onInvokeTask (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:7790:1), <anonymous>:35:37)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:235:42)
    at Zone.runTask (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:136:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/app.43b6a97f05d0553786db.js:9817:1), <anonymous>:368:35)

Cant get this to work with webpack. can anyone help out?

vendor.ts file has this.
import 'ng2-datetime';

webpack.config.vendor.js has the following:
`var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = {
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [
{ test: /.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /.css/, loader: extractCSS.extract(['css']) }
]
},
entry: {
vendor: [
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'style-loader',
'jquery',
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'moment',

        'ng2-bootstrap',
        'ng2-datetime',
        'ng2-bs3-modal',
        'alertifyjs'
    ]    
},       
output: {
    path: path.join(__dirname, '../wwwroot', 'dist'),
    filename: '[name].js',
    library: '[name]_[hash]',
},
plugins: [
    extractCSS,
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DllPlugin({
        path: path.join(__dirname, '../wwwroot', 'dist', '[name]-manifest.json'),
        name: '[name]_[hash]'
    })
].concat(isDevelopment ? [] : [
    new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        minimize: true,
        mangle: false // Due to https://github.com/angular/angular/issues/6678
    })
])

};
`

And my app.module.ts has this.
import { NKDatetime } from 'ng2-datetime/ng2-datetime';

No build error and when i run the app with all this commented out it works fine. But i need the datepickers.

This is the error im getting..

Uncaught Error: Unexpected value 'NKDatetime' declared by the module 'AppModule'(anonymous function) @ compiler.umd.js:14166CompileMetadataResolver.getNgModuleMetadata @ compiler.umd.js:14153RuntimeCompiler._compileComponents @ compiler.umd.js:16777RuntimeCompiler._compileModuleAndComponents @ compiler.umd.js:16715RuntimeCompiler.compileModuleAsync @ compiler.umd.js:16706PlatformRef_._bootstrapModuleWithZone @ core.umd.js:9488PlatformRef_.bootstrapModule @ core.umd.js:9470(anonymous function) @ boot-client.ts:19__webpack_require__ @ bootstrap 4cb6055…:19(anonymous function) @ bootstrap 4cb6055…:39__webpack_require__ @ bootstrap 4cb6055…:19(anonymous function) @ bootstrap 4cb6055…:39(anonymous function) @ bootstrap 4cb6055…:39

I am trying to display a form containing a datetime input. Since I want to reload the state of a previously filled in form, I prefill the form using the date the user has entered the last time he filled in that form. The datepicker does show the current date instead of the initial date from the model, the timepicker shows the correct time, though.

The template is the following:

<div class="form-group">
    <label for="earliestDeparture" class="control-label">{{'earliestDeparture'}}</label>
    <datetime [(ngModel)]="model.earliestDeparture"
        [timepicker]="{showMeridian: false, minuteStep: 1}"
        [datepicker]="{autoclose: true, todayBtn: 'linked', todayHighlight:true, assumeNearbyYear: true, format: 'D, d MM yyyy'}"
     name="earliestDeparture"></datetime>
    {{model.earliestDeparture}}
</div>

For debugging purposes, I displayed the model value as plain text and as you can see, the model contains the correct date. Despite that, the datepicker does not, it shows the current date instead.

I tinkered around and found out that if you replace this.datepicker.datepicker('update', date.toUTCString()); by this.datepicker.datepicker('update', date);, the correct date shows (transmitting the Date object rather than the UTC string representation of that date).

If you have further questions about how to reproduce it, don't hesitate to ask.

It's working perfectly.
but shows this on githbash terminal.

[default] ../node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts:95:27
Cannot find name 'jQuery'.

After spending about 5 hours following the installation isntructions, and variations of configurations, I could not get ng2-datetime to work with rc4. I think improvement of the installation instructions including what versions of angular2, forms, etc are required to use this would make it easier to work with.

after installing ng2-datetime with npm install --save ng2-datetime

import {NKDatetime} from 'ng2-datetime/ng2-datetime'

and adding the NKDatetime proprty to the directives of the component ,

The Browser crashes and show this error : EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on NKDatetime

I'm using this dashboard : https://github.com/akveo/ng2-admin

Yesterday everything worked ok, after a reboot this night, when running npm start, Typescript cant find JQuery anymore...?

node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(140,37): error TS2304: Cannot find name '$'.
node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(157,19): error TS2304: Cannot find name '$'.
node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(161,27): error TS2304: Cannot find name 'jQuery'.
node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(162,37): error TS2304: Cannot find name '$'.
node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts(189,19): error TS2304: Cannot find name '$'.

Version is the latest: 1.1.5.

In src/ng2-datetime.ts these two loc's are missing:

declare var $: any;
declare var jQuery: any;

and VS2015 complains about them. It can be easily fixed by adding them locally but I thought I should let the maintainers of this repo know this.

Thanks,

Hi there, First great component ! Unfortunately I can't get it working. I thought something was wrong with my app settings because I use webpack. I got these errors:

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(51,17): error TS7006: Parameter '_' implicitly has an 'any' type.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(115,21): error TS7006: Parameter 'e' implicitly has an 'any' type.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(140,37): error TS2304: Cannot find name '$'.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(142,36): error TS7006: Parameter 'e' implicitly has an 'any' type.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(157,19): error TS2304: Cannot find name '$'.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(161,27): error TS2304: Cannot find name 'jQuery'.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(162,37): error TS2304: Cannot find name '$'.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(164,47): error TS7006: Parameter 'e' implicitly has an 'any' type.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(189,19): error TS2304: Cannot find name '$'.

ERROR in user\app\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(223,17): error TS7006: Parameter 'obj' implicitly has an 'any' type.

Then I cloned the repo and run npm && npm start but got this:
(index):25 Error: (SystemJS) TypeError: _angular_core.createPlatformFactory is not a function(…)

Any ideas what that could be ?

Thanks in advance,
Guby

Hello, i cant figure out why i'll get an 404 on this after adding NKDateTime into the directive Array.

Log excerpt:

[1] 16.08.02 11:10:08 303 GET /node_modules/@angular/forms
[1] 16.08.02 11:10:08 304 GET /node_modules/rxjs/observable/ArrayLikeObservable.js
[1] 16.08.02 11:10:08 304 GET /node_modules/rxjs/observable/IteratorObservable.js
[1] 16.08.02 11:10:08 304 GET /node_modules/rxjs/operator/observeOn.js
[1] 16.08.02 11:10:08 304 GET /node_modules/rxjs/scheduler/FutureAction.js
[1] 16.08.02 11:10:08 304 GET /node_modules/rxjs/scheduler/QueueScheduler.js
[1] 16.08.02 11:10:08 404 GET /node_modules/@angular/forms/

In your package.json file you have:

 "postinstall": "typings install",

But then in your devDependencies:

"devDependencies": {
  "typings": "^0.8.1"
}

Therefore installing this dependency fails for non-typescript projects. Typings should either be set as a "dependency" or a "peerDependency"

Hello!

I try install ng2-datetime in production mode, but postinstall script failed.

npm ERR! [email protected] postinstall: `typings install`
npm ERR! Exit status 1

I havnt installed in production typings, it available only in devDependencies.
If i install typings manually all work fine, but typings should not be present at the production server.

I notice that the demo's form fields are blank despite the backing models each having a date set.

Is there any way to change this so that they display their initial values?

Thanks a lot by the way, it's just what I need.

Hi,

When using ng2-datetime (since 1.0.3, now 1.1.0) I encountered the following issue: there is no way (or, at least, I'm unable to find it) to determine that user has deliberately put an empty value. In other words, I'd like to have both date and time fields optional. Currently (1.1.0), assuming the following scenario:

• model variable is initialized with new Date()
• user empties the date and time fields, as (s)he doesn't won't to have any value set
• although the text inputs get emptied, the change is not reflected in the model.

At first, I was thinking about using (blur) and updating the model myself, yet I realized the event won't get triggered, as we deal with two inputs here. Having null / undefined if both fields were emptied would be great. (This leads to a separate issue, i.e. how to deal with mixed cases (let's say, only time is provided)).

Is there a way to achieve the required effect?

First, nice lib, there are still very few ng2 libs, so it helped me a lot.
The problem I'm facing is when I want, for example, to change startDate on date picker options it doesn't get updated, I even tried to force the update calling ngAfterViewInit(); with the new options, but it doesn't get updated. I wanted to know if there is a way to achieve this.

I'm needing such functionality because I have 2 datepickers, where the first one isn't allowed to have dates after the second one (using the endDate option), and the second one isn't allowed to have dates before the first one (using the startDate option). I think it's a pretty common use case.

PS: when i set the options i.e. {startDate: new Date()} when the component is being built, they do work, the problem is when the options are changed.

It seems that it doesn't yet. While I have updated my form to use NgForm from angular/forms instead of NgForm from angular/common, the datetime directive crashes and reports

**ORIGINAL EXCEPTION**: _No provider for NgControl!_

The reason is that since I used angular/forms I removed the reference to FORM_DIRECTIVES from angular/common.
Are you going to migrate or support angular/forms?

Thanks

After importing
import { NKDatetimeModule } from '../src/ng2-datetime/ng2-datetime.module';
In Module.ts I receive the error Cannot read type of null.

Angular version 2.0.0 rc5

Error in console:

GET https://nkalinov.github.io/ng2-datetime/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js 404 (Not Found)

I can see a double slash in the URLafter /platform-browser//

The timepicker displays the initial time in 24 hour mode until I select a new time. Is there a way to force 12 hour mode?

When I run the command
npm install --save ng2-datetime

Not appeared in the directory src theng2-datetime.module containing NKDatetimeModule class that will be used in my app.module.ts file.

Hi. I have faced with one issue. When you override datepicker options in he class, component call init method each time. But before init it does not unsubscribe from previous events.

My solution is:
this.datepicker.datepicker('destroy'); this.datepicker.off('changeDate');
this.timepicker.timepicker('remove'); this.datepicker.off('changeTime')

Call this in ngOnChanges method;

Great job on the plugin!

Can it be updated to support jQuery 3? I believe you just need to bring in the latest from bootstrap-datepicker.

uxsolutions/bootstrap-datepicker@416fca4

getting error,
EXCEPTION: Error in demo/app.component.html:38:41 platform-browser.umd.js:971
EXCEPTION: Error in demo/app.component.html:38:41 platform-browser.umd.js:962:17

ORIGINAL EXCEPTION: RangeError: date value is not finite in DateTimeFormat.format() platform-browser.umd.js:962:17

ORIGINAL STACKTRACE: platform-browser.umd.js:962:17

DateFormatter</DateFormatter.format@http://localhost:3000/node_modules/@angular/common/common.umd.js:1021:24
DatePipe</DatePipe.prototype.transform@http://localhost:3000/node_modules/@angular/common/common.umd.js:1047:20
pureProxy2/<@http://localhost:3000/node_modules/@angular/core/core.umd.js:8376:26
anonymous/View_AppComponent0.prototype.detectChangesInternal@AppComponent.template.js:896:64
AppView</AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:9996:13
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:10084:17
AppView</AppView.prototype.detectViewChildrenChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:10016:17
AppView</AppView.prototype.detectChangesInternal@http://localhost:3000/node_modules/@angular/core/core.umd.js:10007:13
AppView</AppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:9996:13
DebugAppView</DebugAppView.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:10084:17
ViewRef</ViewRef_.prototype.detectChanges@http://localhost:3000/node_modules/@angular/core/core.umd.js:9397:58
ApplicationRef_</ApplicationRef_.prototype.tick/<@http://localhost:3000/node_modules/@angular/core/core.umd.js:9047:79
ApplicationRef_</ApplicationRef_.prototype.tick@http://localhost:3000/node_modules/@angular/core/core.umd.js:9047:17
ApplicationRef_</ApplicationRef_.prototype.loadComponent@http://localhost:3000/node_modules/@angular/core/core.umd.js:9018:13
ApplicationRef</ApplicationRef_.prototype.bootstrap/<@http://localhost:3000/node_modules/@angular/core/core.umd.js:9007:17
ApplicationRef_</ApplicationRef_.prototype.run/<@http://localhost:3000/node_modules/@angular/core/core.umd.js:8978:30
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/core.umd.js:6075:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
NgZoneImpl</NgZoneImpl.prototype.runInner@http://localhost:3000/node_modules/@angular/core/core.umd.js:6106:64
NgZone</NgZone.prototype.run@http://localhost:3000/node_modules/@angular/core/core.umd.js:6330:55
ApplicationRef_</ApplicationRef_.prototype.run@http://localhost:3000/node_modules/@angular/core/core.umd.js:8976:13
ApplicationRef_</ApplicationRef_.prototype.bootstrap@http://localhost:3000/node_modules/@angular/core/core.umd.js:8998:20
coreLoadAndBootstrap/</<@http://localhost:3000/node_modules/@angular/core/core.umd.js:8790:47
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke@http://localhost:3000/node_modules/@angular/core/core.umd.js:6075:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:216:25
scheduleResolveOrReject/<@http://localhost:3000/node_modules/zone.js/dist/zone.js:571:53
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:356:24
NgZoneImpl/this.inner<.onInvokeTask@http://localhost:3000/node_modules/@angular/core/core.umd.js:6066:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:256:29
drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:474:26
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:426:22

Hi @nkalinov

I have used following options in datepickerOpts value.
this.datepickerOpts = { autoclose: true, todayBtn: 'linked', todayHighlight: true, format: 'mm/dd/yyyy', endDate : new Date(), enableOnReadonly : true };

Date picker input text box was still enabled.

Using Angular RC7, angular-cli webpack.9-4, I can't get JQuery working. In my app.module, I've got

import 'jquery/dist/jquery.min.js';
import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';

and then I import NKDatetime into my declarations.

When webpack runs, I get

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:149:26
Cannot find name 'jQuery'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:150:36
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:167:18
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:171:26
Cannot find name 'jQuery'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:172:36
Cannot find name '$'.

ERROR in [default] C:\Users\rakibler\Projects\efile\node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts:198:18
Cannot find name '$'.

No idea what I'm doing wrong.

ngOnDestroy() {
    if (this.datepicker) {
        this.datepicker.destroy(); // destroy method is not found
    }
}

when switching pages

I am unable to install this as while installing in expecting Angular2 beta, and I am working on Angular 2 RC1

Here is my imports:

import 'jquery/src/jquery';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';

My component:

import { NKDatetime } from 'ng2-datetime/ng2-datetime';
@Component({
   ...
   directives: [NKDatetime],
})

Template:
<datetime [formControl]="date" [ngModel]="dateValue"></datetime>

I get an error: TypeError: $(...).datepicker is not a function. angular rc-5

How to change template? At the moment, date and time inputs are aligned vertically. How can i align them horizontally?

Hi everybody !
I got this error "No provider for NgControl!"
I'm using the new @angular/forms API with :
bootstrap(MyApp, [disableDeprecatedForms(), provideForms()]);
And i use datetime like in the demo :

<form #form="ngForm">
    <div class="form-group">
        <datetime name="startDate" [(ngModel)]="date" #startDate="ngModel"></datetime>
    </div>
</form>

And my typescript file :

@Component({
    selector: "edit-event",
    template: require("./editevent.component.html"),
    styles: [require("./calendar.scss")],
    directives: [NKDatetime]
})
export class EditEventComponent {
    date: Date = new Date(2016,3,4);
}

I don't understand why it's happening...

Thanks for your help
Chocapic54

EDIT :
Got same error when i copy paste demo files into my project

Hi

I have followed the install instructions. I have included datepicker like below in ts file

import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';
import {NKDatetime} from 'ng2-datetime/ng2-datetime';

In system.config.js file

map['ng2-datetime'] = 'node_modules/ng2-datetime';
packages['ng2-datetime'] = {defaultExtension: 'js'};

In ts file mentioned date like this
Purchasedate: any = new Date();

And used in html like this
<datetime [(ngModel)]="Purchasedate"></datetime>

I have included jquery in my index.html file. When i ran the app , I am getting error
(index):34 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/jquery(…)

can you please help me on this?

When installing ng2-datetime i got this error :

├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└─┬ [email protected]
└── [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN enoent ENOENT: no such file or directory, open '/home/alaa/WebstormProjects/ng2-admin/node_modules/Ionicons/package.json'
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

Hi @nkalinov

I have tried as per demo example likedate2= new Date(2015, 3, 2); . In IE11 & Edge browser it's not setting default date which I mentioned. But chrome is fine. Can you please check this.

My Imports:
`import { NKDatetimeModule } from "ng2-datetime/ng2-datetime";

@NgModule({
imports: [FormsModule, ReactiveFormsModule, CommonModule, NKDatetimeModule],
declarations: [AppComponent]
})
export class MyModule { }`

My HTML:
<datetime [timepicker]="false" [formControl]="form.controls['startDate']"></datetime>

I already tried the solution from this Issue. Is there anything to do to make it working?

jQuery: 2.2.3
Angular: 2.0.0 (final)
Webpack: 1.13.0

When I set the ngModel variable (request.needByDateTime) to null from an event on another part of the form, I get a "getHours" error from the time picker.

My date/timepicker

<datetime [datepicker]="_datepickerOptions" [timepicker]="_timepickerOptions" [(ngModel)]="request.needByDateTime" formControlName="needByDateTime"></datetime>

My Date/time options
private _datepickerOptions = { autoclose: true, icon: 'fa fa-calendar' }

private _timepickerOptions = { explicitMode: true, defaultTime: 'current', icon: 'fa fa-clock-o' }

Error:

TypeError: Cannot read property 'getHours' of null
    at NKDatetime.updateModel (ng2-datetime.ts:201)
    at eval (ng2-datetime.ts:102)
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.ts:61)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at ZoneTask.invoke (zone.js:423)

I would like to set the placeholder of the input control. Is this possible?

Hello,

I updated ng2-datetime to version 1.1.1, but after i run ng build, copied js file from src/ng2-datetime/ng2-datetime.js still has the old code in the ngOnDestroy() method.

Should .js file be updated also?

Hi @nkalinov

I am using following code. <datetime required [(ngModel)]="Purchasedate" [ngModelOptions]="{standalone: true}" [timepicker]="false" [datepicker]="datepickerOpts"></datetime>

Whenever form submits, I am getting 5.30 hrs delay time . I am in IST time zone. It's assuming time was 12 AM and sending the previous date. Basically, I have opted date option so better avoid UTC time calculation here. Please check and let me know your comments
For Eg : I have chosen 16 July 2016. But in my form submit always returning as 2016-06-15T18:30:00.000Z

In my case, I am not saving time . So date saved wrongly in the database. Is that possible to get date alone which I choose

stops working with the latest angular2 rc.5, 'No value accessor for form control with unspecified name'. was working well on the previous versions

Hi,
Do you plan to upgrade your datetime picker to Angular 2.0.0 and Bootstrap v4 in a near futur ?

Ben

Hi,

Is it possible to hide the input fields.

Thanks,

ERROR in node_modules\ng2-datetime\src\ng2-datetime\ng2-datetime.ts
(25,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'Date'.
Property 'toDateString' is missing in type '{}'.

Are the latest updates for RC1 in a publishable state??