bleenco / ng2-datepicker Goto Github PK
View Code? Open in Web Editor NEWAngular2 Datepicker Component
Home Page: http://ng2-datepicker.jankuri.com
License: MIT License
Angular2 Datepicker Component
Home Page: http://ng2-datepicker.jankuri.com
License: MIT License
for some reason ng2-datepicker uses forms-deprecated. It is not clear form it's dependencies (which are bad defined by not using a version but github:angular/common-builds etc)
So when one is bootstrapping the app by
platformBrowserDynamic().bootstrapModule(AppModule);
the app won't start because of the exception below. After removing the Datepicker directive in my component, the application loads again (but without the datepicker..)
// ---------------------------------------------------------------------------------------
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
import {TranslatePipe} from 'ng2-translate/ng2-translate';
import {
FormBuilder,
FormGroup,
FormControl,
Validators
} from '@angular/forms';
import {DatePicker} from "ng2-datepicker";
import {FirmwareService} from "../../service/firmware.service";
import {FirmwareUploadModel} from "../../model/firmware.model";
import {ValidationService} from "../../service/validation.service";
import {ControlMessagesComponent} from "../../control-messages/control-messages.component";
@Component({
moduleId: module.id,
selector: 'app-firmware-modal',
templateUrl: 'modal.component.html',
directives: [DatePicker, ControlMessagesComponent],
providers: [FirmwareService],
pipes: [TranslatePipe]
})
export class MyComp ..
// ---------------------------------------------------------------------------------------
EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in http://localhost:4200/app/my-comp/my-comp.component.html:65:20
ORIGINAL EXCEPTION: No value accessor for form control with unspecified name
ORIGINAL STACKTRACE:
BaseException@http://localhost:4200/vendor/@angular/common/src/facade/exceptions.js:27:23
_throwError@http://localhost:4200/vendor/@angular/common/src/forms-deprecated/directives/shared.js:64:11
Hi, I just found a bug where the user can't pick the 1st date of the month if the 2nd date is on Monday of the first week. The examples are on February 2015 and March 2015. User can't pick 1st February nor 1st March because the date doesn't appear anywhere (whether in the previous month nor the current month). How to solve this? Thank you.
I installed the datepicker with ng2-datepicker.
That went successfully and added ng2-datepicker in the node_modules folder.
import {DatePicker} didn't cause any errors.
But as soon as I add DatePicker into 'directives: [DatePicker]'
my app does not load and gives error:
Uncaught SyntaxError: Unexpected token < ng-datepicker:1
Hello all,
Please update README that how to use.
Is there a way to install datepicker into existing project created by angular-cli ?
Using npm install
just copy repository to node_modules and doesn't creates js-file, required by "installation of 3rd party libs"
Yours is the sharpest and most responsive angular 2 datepicker out there. Thanks!
Is there any intention on supporting text in the box. Some of my users are power users dealing with dates from maybe a decade ago and they'll want to just be able to type the date quickly rather than select the dropdown and navigate to it.
Demo link not working.
It simply says :-)
Following error comes
TypeError: Cannot read property 'subscribe' of undefined
When trying to use this package with rc5.
Dates do not match the correct days on the calendar. The demo always starts the 1st on Monday.
hi there,
will there be a version for angular 2.0.0 ?
http://localhost:4200/ng2-datepicker/ng2-datepicker
The Broccoli Plugin: [BroccoliMergeTrees] failed with:
Error: EBUSY: resource busy or locked, symlink 'C:\Users\xxxx\Desktop\IonicWo
rkspace\Datepicker\tmp\funnel-output_path-mad0a1IF.tmp' -> 'C:\Users\xxxx\Des
ktop\IonicWorkspace\Datepicker\tmp\broccoli_merge_trees-input_base_path-a6P2wIjs
.tmp\1'
at Error (native)
at Object.fs.symlinkSync (fs.js:897:18)
I am using ng2-datepicker, please let me know how i can override the css
Hi, I obtain, the following error message once I include
DatePicker
to the directives of my component.
SyntaxError: expected expression, got '<'
Evaluating http://localhost:3000/node_modules/ng2-datepicker/src/components/ng2-datepicker
Error loading http://localhost:3000/app/main.js
http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js
Line 1243
To produce the error it is in fact not necessary to include the component itself into the html as e.g.
<datepicker class="editText" [ngModel]="dateOfBirth"></datepicker>
whereby dateOfBirth is a component property of type DATE.
I am using the version of 07. Feb. 2016.
Hi,
I am getting following error during prod build
Unhandled rejection Error on fetch for ng2-datepicker at file:///D:/ui/node_modules/ng2-datepicker/ng2-datepicker.js
Loading dist/tmp/app/+broker/company.registration/companyregister.js
Loading dist/tmp/app/app.component.js
Loading dist/tmp/app/main.js
Error: ENOENT: no such file or directory, open
'D:\ui\node_modules\ng2-datepicker\Users\jan\Dev\github\ng2-datepicker\ng2-datepicker.js.map'
at Error (native)
any resolution?
Hi,
While using datepicker with rc5 formgroup I am getting this,
No value accessor for form control with name: 'startDate'
I have given a formControlName to datepicker in this case.
<datepicker [(ngModel)]="data.startDate" model-format="YYYY-MM-DD" formControlName = "startDate"></datepicker>
and also not able to use it with ngDefaultControl in datepicker.
<datepicker [(ngModel)]="data.startDate" model-format="YYYY-MM-DD" ngDefaultControl></datepicker>
Any Help!
can this be used inline? Have the calendar always showing?
The demo link provided in the ReadMe is not working.
Hi Jan,
I have been using your datepicker. I have a small question, is there any way to show empty input by default? currently, we see default today's date when model value is null.
Any suggestion on how to get empty input by default? any configuration?
Since the initial date value is a timestamp of 'new Date()' the datepicker selected date does not match any date on the calendar. I was able to get around this by changing:
private initValue(): void {
setTimeout(() => {
if (!this.initDate) {
this.setValue(moment().format(this.modelFormat || 'YYYY-MM-DD'));
} else {
this.setValue(moment(this.initDate, this.modelFormat || 'YYYY-MM-DD'));
}
});
}
to
private initValue(): void {
setTimeout(() => {
if (!this.initDate) {
this.setValue(moment().startOf('day').format(this.modelFormat || 'YYYY-MM-DD'));
} else {
this.setValue(moment(this.initDate, this.modelFormat || 'YYYY-MM-DD'));
}
});
}
on the ng2-datepicker/src/components/ng2-datepicker.ts page.
I have tried to install this but it fails on: postinstall: typings install
.
I updated packages.json and the output is below. I've also tried a manual npm install with similar results.
PATH=C:\Program Files\nodejs;.\node_modules.bin;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External;%PATH%;C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\git
"C:\Program Files\nodejs\npm.CMD" install ng2-datepicker
[email protected] postinstall C:\Projects\Rebus\FMS\Code\Current\FMSSupport\src\Angular2Client\node_modules\ng2-datepicker
typings install
'typings' is not recognized as an internal or external command,
operable program or batch file.
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
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.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "ng2-datepicker"
npm ERR! node v6.1.0
npm ERR! npm v3.8.6
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-datepicker 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-datepicker
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ng2-datepicker
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Projects\Rebus\FMS\Code\Current\FMSSupport\src\Angular2Client\npm-debug.log
Juri,
Thanks for the date picker!
I'm new to Angular 2. So, it took me a little while to figure out the syntax for your datepicker. I'd add the following to your example:
<datepicker [(ngModel)]="test1.date" view-value="DD.MM.YYYY" model-value="DD.MM.YYYY" init-date={{test1.date}}>
If I have an existing date, then I need to pass it into your picker.
Thanks, again.
Hi @jkuri,
We are currently using this component for some applications, but we met with some problems, because we would like to empty the content of the ngmodel with a button, but the content of the input form doesn't change when the content of our ngmodel changes.
Do you have any suggestions how to empty the input?
Thanks for your work!
Csenge
Hi @jkuri,
We are currently using this component for some applications, but we are requiring the ability to select an entire month.
Are you planning to include that feature in the near future ?
Thanks for your work!
Daniel
Demo is working fine on IE 11 but after implementation it is not showing calendar on IE 11, working fine on crome.
d:/.../node_modules/ng2-datepicker/typings/moment/momen
t-node.d.ts(677,5): error TS2300: Duplicate identifier 'export='.
d:/.../typings/browser/definitions/moment/moment.d.ts(4
92,1): error TS2300: Duplicate identifier 'export='.
I have moment in my SystemJS config because of ng2-bootstrap:
'moment': ${APP_BASE}node_modules/ng2-bootstrap/node_modules/moment/moment.js
Any idea?
Thanks!
broken in rc.5
Can you please tell me when ng2-datepicker will gives support to RC1?
I've been following the instruction to use the date picker, but the unfortunately the component throws the following exception:
angular2.dev.js:23514 TypeError: moment is not a function
at DatePicker.init (ng2-datepicker.ts:172)
at new DatePicker (ng2-datepicker.ts:41)
at angular2.dev.js:1380
at Injector._instantiate (angular2.dev.js:11923)
Any clue what could be the cause?
Moment.js included using the SystemJS map (like the date picker).
Thanks!
It would be great if this library provided a default export object as described here in the angular-cli Publisher's Guide. Our project would greatly benefit from it and it's very easy to do. Please comment back if that would be possible. If you won't have time in the next couple days, I will try to submit a PR to provide this compatibility soon. Thank you!
Hi,
Is there no js bundle for your component? So we can just simply reference it in the index.html?
Thanks.
Following the Readme example, I set up a project with the datepicker in it, but I'm getting this error when I try to run the page:
angular2-polyfills.js:390 Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-datepicker(...)
The page just has "hello world" and the datepicker copied directly from the Readme example. Without the datepicker, it works fine, but if I include it in the HTML or if I take it out of the directives array, then I get the 404. Any idea what could be going on?
Everything is set up exactly like the Readme example
Generates error "No provider for NgForm."
The control icons are not showing . i tried to import de icons but no success.
I've successfully installed the plugin with angular-cli. But the problem is, the controls of the plugin (previous and next buttons for changing month and year) don't appear. This is strange because if I see the demo, the controls should be there. I also inspected the elements using the chrome tools, and I see the elements there. But the elements simply do no nothing. Can you please check? Thanks again.
Hi,
Should be nice to allow developers change the style of the input. I'm using this component but he is really different from the rest of the page.
Best regards,
I get an error at runtime that says: 'TypeError: moment is not a function'.
It's throwing the error on line 152: this.date = moment();.
I can see in the network tab that moment was downloaded successfully.
This is similar to issue #5 but I have followed those instruction and it's still not working.
I do not directly reference the node_modules files. Instead, I have a gulp file that moves what I need to the wwwroot folder (in a dotNet core application).
I don't get any compile errors with this import.
import {DatePicker} from 'ng2-datepicker';
I setup system.js so that ng2-datpicker points to ''ib/js/ng2-datepicker/src/components/ng2-datepicker' (note: this is the src - not the top level). At runtime it seems to find this JS but then crashes looking for moment.
I did the same for moment ('moment': 'lib/js/moment/moment') and I see the files are there but this is not working. It's finding moment so I'm not sure what the error is.
Is it possible to restrict the date range with a minDate and a maxDate?
Maybe this was a bug I introduced after making changes to my forked copy. But whenever I have one datepicker on top of another one, and select the datepicker on top, the datepicker on the bottom appears on top of the calendar that popped up from the above datepicker.
Have you seen this before? At first I thought that I could fix it by setting the z-index of the calendar and datepicker, but I don't think that fixes it.
Hey,
i get an error on ng install ng2-datepicker
it outputs:
installing ng2
The 'ng generate <entity-name>' command requires an entity name to be specified. For more details, use 'ng help'.
Also: the link in the readme isn't working:
http://jankuri.com/components/angular2-datepicker
Hi,
Can you please support also SystemJS? I'm getting this error (EXCEPTION: Error: Uncaught (in promise): Failed to load ng2-datepicker.component.html) because of relative paths.
The problem is here:
templateUrl: './ng2-datepicker.component.html',
styleUrls: ['./ng2-datepicker.css']
I think the project only works with webpack.
Getting The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements! while trying to install...
Hi,
How can I use add a validator to this component once it's part of a form?
Best regards,
Is there any way to change to year directly like previous version
Hi,
how to using ng2-datepicker with Ionic2
tks,
joão
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.