On selecting date, nothing happens

[mvnvedavyas]

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

[DanielYKPan]

@mvnvedavyas What version of the package you are using?

[mvnvedavyas]

@DanielYKPan

In package.json file it shows like below "_from": "ng-pick-datetime@latest", "_id": "ng-pick-datetime@4.0.3",

[DanielYKPan]

@mvnvedavyas Do you follow the README example?

[mvnvedavyas]

@DanielYKPan yes, i followed it. This is the html line i used in my template

<input [ngModel]="momentValue | date: 'short'" [dateTimePicker]="momentValue" (dateTimePickerChange)="setMoment($event)" readonly />

and i pasted below code in my app.component.ts public setMoment(moment: any): any { this.momentValue = moment; // Do whatever you want to the return object 'moment' }

and it says moment and moment value not found and i get below error when i console into the browser

Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 4 more… }

[DanielYKPan]

@mvnvedavyas Please try the version 4.0.7 of the package. The error you mentioned may be caused by the AOT compiler.

[mvnvedavyas]

@DanielYKPan I tried ver 4.0.7 and throws an error below:

object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 4 more… }

can u go thru this and tell me what i am missing? thanks.

[DanielYKPan]

you are using the SystemJS.

please follow the README example.

[mvnvedavyas]

Yes, i am using systemJS and i did follow the readme example., still it gives the same error. Let me share my code to u 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 { DateTimePickerModule } from 'ng-pick-datetime';

import { AppComponent } from './app.component'; import { routing } from './app.routing'; import { AppConfig } from './app.config';

import { AlertComponent } from './_directives/index'; import { AuthGuard } from './_guards/index'; import { AlertService, AuthenticationService, UserService } from './_services/index'; import { HomeComponent } from './home/index'; import { UserListComponent } from './home/index'; import { AdminComponent } from './admin/index' import { LoginComponent } from './login/index'; import { RegisterComponent } from './register/index'; import { EditUserComponent } from './admin/index'; import { AddEmployeeComponent } from './admin/index'; import { CSVUploadComponent } from './file_upload/index'; import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload';

@NgModule({ imports: [ BrowserModule, FormsModule, DateTimePickerModule, HttpModule, routing ], declarations: [ AppComponent, AlertComponent, HomeComponent, UserListComponent, LoginComponent, RegisterComponent, AdminComponent, EditUserComponent, AddEmployeeComponent, CSVUploadComponent, FileSelectDirective, FileDropDirective ], providers: [ AppConfig, AuthGuard, AlertService, AuthenticationService, UserService ], bootstrap: [AppComponent] })

export class AppModule { }`

systemjs.config.js :

`/**

• System configuration for Angular 2 samples

• Adjust as necessary for your application needs. */ (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: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd.js',
      'ng-pick-datetime': 'npm:ng-pick-datetime',
      'moment': 'npm:moment',
  
      // other libraries
      'rxjs': 'npm:rxjs'
  },
  // packages tells the System loader how to load when no filename and/or no extension
  packages: {
      app: {
          main: './main.js',
          defaultExtension: 'js'
      },
      rxjs: {
          defaultExtension: 'js'
      },
      'ng2-file-upload':{
          defaultExtension: 'js'
      },
      'ng-pick-datetime': {
          main: 'index.js',
          defaultExtension: 'js'
      },
      // momentJS 
      'moment': {
          main: 'moment.js',
          defaultExtension: 'js'
      },
  }

  }); })(this);`

html used in template:

<input [ngModel]="momentValue | date: 'short'" placeholder="date of Joining" [ngModelOptions]="{standalone: true}" [dateTimePicker]="momentValue" [viewFormat]=" 'll' " [pickerType]=" 'date' " readonly />

if i lost something in abv shared code plss let me know. sincere thanks @DanielYKPan

[DanielYKPan]

@mvnvedavyas what version of angular r u using?

[mvnvedavyas]

I am using mean stack to develop our application. Have a look below

{ "name": "HRMS", "version": "1.0.0", "description": "Client for MEAN Stack with Angular 2 User Registration and Login Example", "repository": { "type": "git", "url": "https://github.com/cornflourblue/mean-angular2-registration-login-example.git" }, "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w" }, "license": "MIT", "dependencies": { "@angular/common": "~2.4.0", "@angular/compiler": "~2.4.0", "@angular/core": "~2.4.0", "@angular/forms": "~2.4.0", "@angular/http": "~2.4.0", "@angular/platform-browser": "~2.4.0", "@angular/platform-browser-dynamic": "~2.4.0", "@angular/router": "~3.4.0", "@angular/upgrade": "~2.4.0", "core-js": "^2.4.1", "ng-pick-datetime": "^4.0.7", "ng2-datepicker": "^1.8.3", "ng2-datepicker-bootstrap": "^0.1.2", "ng2-file-upload": "^1.2.0", "rxjs": "5.0.1", "systemjs": "0.19.40", "zone.js": "^0.7.4" }, "devDependencies": { "concurrently": "^3.1.0", "lite-server": "^2.2.2", "typescript": "^2.0.10", "@types/core-js": "0.9.36", "@types/node": "^6.0.46", "@types/jasmine": "^2.5.36" } }

[DanielYKPan]

@mvnvedavyas Yes, I see the problem. Because the picker was added a translate service, which was using 'InjectionToken' from angular 4.

'InjectionToken' is a replacement for the 'OpaqueToken' from angular 2. So I guess that causes the problem.

[mvnvedavyas]

I see, so is there any way to work it out? Because i have tried many pickers available in Internet and got fed up, and i found yours and it is convenient to use. And i am newbie to angular2. thanks @DanielYKPan

[DanielYKPan]

@mvnvedavyas I guess no, unless you update your angular version.

[mvnvedavyas]

to angular 4?

[DanielYKPan]

@mvnvedavyas Yes

[davidboothe]

I am experiencing the same bug described in this issue, but i'm using Angular 4.2.5, Webpack, and Chrome. I followed the readme and tried code pulled directly from the examples. Both dropdown and default popup show a calendar, but when anything is clicked it will flash and reload the calendar. You can not click away to close the calendar.

[davidboothe]

I also noticed on the callback code: (dateTimePickerChange)="setMoment($event)" it passes an $event. But the actual function expects a moment value. public setMoment(moment: any): any is this correct?

[mvnvedavyas]

Yeah david, moment can be any. Instead of specific

M.V.N.Vedavyas

On Wed, Jul 5, 2017 at 4:54 PM, David Boothe notifications@github.com wrote:

I also noticed on the callback code: (dateTimePickerChange)="setMoment($event)" it passes an $event. But the actual function expects a moment value. public setMoment(moment: any): any is this correct?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DanielYKPan/date-time-picker/issues/24#issuecomment-313076026, or mute the thread https://github.com/notifications/unsubscribe-auth/AZv4IJRQp9BDy_nAMLi1OLaVAx86V6Qyks5sK3J8gaJpZM4M2mUg .

[davidboothe]

@mvnvedavyas i guess my issue is that the (dateTimePickerChange) is sending an $event and not a moment object.

[DanielYKPan]

@davidboothe (dateTimePickerChange) return an object as a any type (Default is JS Date Object). If you want to change that, you could use option [returnObject] to specify what type of object you want. You could learn more about this from README.md