Doesn't work for me

[hermanmonillaluna]

\ 1st error without editing system.config **

Steps that I did

1) npm install ng2-datepicker --save

Since I used ionicons in my app. I didn't add it again but I also tried it to put in my index.html.

2) Import module

import { DatePicker } from 'ng2-datepicker/ng2-datepicker'

3) Used it on my component. I used reactive forms.

<datepicker formControlName="dateFrom" [expanded]="true"></datepicker>

\ 2nd error **

When I add this to systemjs.config.js

map: { 'ng2-datepicker': 'npm:ng2-datepicker', 'moment': 'npm:moment', }, packages: { 'ng2-datepicker': { main: 'ng2-datepicker.js', defaultExtension: 'js' }, 'moment': { main: 'moment.js', defaultExtension: 'js' } }

I'm not going to use it for all the components. Just for several components.

Any help would be appreciated. Thanks

[ghetolay]

Again duplicate of #66 and #50.

[jkuri]

Is that something that moduleId: module.id and templateUrl: './ng2-datepicker.component.html' to get relative paths should solve?

[ghetolay]

Yes it's supposed to. @shamgang posted a comment about it here.

It's seems the way you write the url may make it work with some module bundler but there is no universal solution except inline. We're discussing about that on #66.

[hermanmonillaluna]

I solved it by copying the missing .html and .css to the main folder. But I think it is not good practice for application. I'm going to experiment to make it work.

Btw, where do I write relative path? app.component? I don't have any idea :/

Thanks @jkuri. :100: % Nice woooooooork

[hermanmonillaluna]

Nevermind. I got a solution.

For those who's having trouble with the same problem

Open node_modules/ng2-datepicker/src/components/ng2-datepicker.js

Change line 167 and 168 to:

templateUrl: './node_modules/ng2-datepicker/src/components/ng2-datepicker.component.html', styleUrls: ['./node_modules/ng2-datepicker/src/components/ng2-datepicker.css'],

I am not sure if this is proper way to do it. But it worked with me. Try it. :dagger: :dagger:

[hermanmonillaluna]

Light BG : hover Dark BG : active Dashed line : Today's date

Also, I added <p *ngIf="d.day" (click)="selectDate($event, i)">{{ d.day }}</p> because empty date can be hovered. Also, 'Invalid Date' is acceptable in formGroup. But for my project I really need to get the date. That's why I removed the 'Invalid Date' error. Depends on project.

Is it possible to share HTML and SASS code here?

What I did is re-write css to SASS and change some minor changes to fit on my project. Because, it's pretty hard to edit the css file. I think it is much better to be customizable. Thanks!

[ghetolay]

I think the best way to use custom css for now would be something like that :

import { DatePickerComponent } from 'ng2-datepicker/src/component/ng2-datepicker';

@Component({
    selector: 'my-datepicker',
    templateUrl: './node_modules/ng2-datepicker/src/components/ng2-datepicker.component.html',
    styleUrls: [ './mydatepicker.css' ],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => MyDatepickerComponent),
        multi: true
   }]
})
export class MyDatepickerComponent extends DatePickerComponent { }

You may need to adapt template/style urls to your build system but that's the spirit.

We're working on a better way to customize DatePicker.

[hermanmonillaluna]

Are you going to support it with SASS?

Actually, I translated the css to sass and change some of the design.

[ghetolay]

What you use to build your custom css is up to you and your build system. The same way you would do for any Angular 2 component.

[hermanmonillaluna]

Well, you're right. But what I mean is, what if I just want to change a small piece of the design? The design you provide is great. It's cathcy in eyes. That's what people love and clients too. I need to look for the element reference then update the design. For new programmer, that will be a little bit difficult since it has a lot of style in it. That's only a suggestion tho. Thanks for your work :) really helped a lot including me, myself, and I.

[ghetolay]

styles property of Component is an array, so I guess you can just add a .css file to ours :

@Component({
    ....
     styles: ['./node_modules/ng2-datepicker/src/components/ng2-datepicker.css.', './mydatepicker.css']
})

Would that work for you ?

[tryshchenko]

The solution with NG_VALUE_ACCESSOR doesn't work for me. I'm getting 'Type 'any[]' is not a constructor function type.' I've tried to pass elementRef to a constructor of a decorator component, but it didn't help.

I assume the problem can be solved with passing kind of 'disable-styles' parameter also. If would allow styles to be accessible using the ':host' syntax of A2 virtual shadow DOM. Otherwise :host styles has lower priority than own ng2-datepicker styles

[ghetolay]

@ensaier it should work can we see your code ?

[tryshchenko]

@ghetolay thanks for your response, but I've already solved a problem in the other way, and lost those lines of code. We had to implement a bunch of custom functionality so we've decided to proceed with a custom solution.