bleenco/ng2-datepicker

Angular2 Datepicker Component

ng2-datepicker

ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable.

Installation

1. Install package from npm.

npm install ng2-datepicker --save

2. Include DatepickerModule into your application.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [BrowserModule, DatepickerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

And that's it, you can then use it in your component as:

date = new Date();

<ngx-datepicker [(ngModel)]="date"></ngx-datepicker>

Options

import { DatepickerOptions } from 'ng2-datepicker';
import { getYear } from 'date-fns';
import locale from 'date-fns/locale/en-US';

// options sample with default values
options: DatepickerOptions = {
  minYear: getYear(new Date()) - 30, // minimum available and selectable year
  maxYear: getYear(new Date()) + 30, // maximum available and selectable year
  placeholder: '', // placeholder in case date model is null | undefined, example: 'Please pick a date'
  format: 'LLLL do yyyy', // date format to display in input
  formatTitle: 'LLLL yyyy',
  formatDays: 'EEEEE',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: locale, // date-fns locale
  position: 'bottom',
  inputClass: '', // custom input CSS class to be applied
  calendarClass: 'datepicker-default', // custom datepicker calendar CSS class to be applied
  scrollBarColor: '#dfe3e9', // in case you customize you theme, here you define scroll bar color
  keyboardEvents: true // enable keyboard events
};

For available format, formatTitle and formatDays options check out here.

Then you apply custom options in your template as:

<ngx-datepicker [(ngModel)]="date" [options]="options"></ngx-datepicker>

Theme customization

This examples uses SASS as style preprocessor.

.datepicker-blue
  .calendar-container
    background: #32A8E4
    border: 1px solid #32A8E4
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
    top: 35px
    left: 0
    font-weight: 700
  .month-year-text
    color: #ffffff
  .control
    path
      fill: #eff1f5
    &:hover
      path
        fill: #ffffff
  .day-name-unit
    color: #fafafa
  .day-unit, .year-unit
    color: #ffffff
    &.is-prev-month
      color: #8ed0f0
    &.is-today
      background: #8ed0f0
    &:hover, &.is-selected
      background: #ffffff
      color: #686669
    &.is-disabled
      color: #aaa8ab
      &:hover
        background: transparent

And in your component:

import { DatepickerOptions } from 'ng2-datepicker';

options: DatepickerOptions = {
  calendarClass: 'datepicker-blue',
  scrollBarColor: '#ffffff'
};

Run Demo

1. Clone this repository.

git clone https://github.com/bleenco/ng2-datepicker

2. Install dependencies

npm install

3. Start the demo

npm start

License

MIT

ng2-datepicker's Issues

Demo link not working

Demo link not working.
It simply says :-)

TypeError when using with RC5

Following error comes
TypeError: Cannot read property 'subscribe' of undefined
When trying to use this package with rc5.

Syntax arrow when including datepicker

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.

404 error - package not found

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

Validation

Hi,

How can I use add a validator to this component once it's part of a form?

Best regards,

Error importing datepicker with npm install ng2-datepicker

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

ng2-datepicker not working in IE11

Demo is working fine on IE 11 but after implementation it is not showing calendar on IE 11, working fine on crome.

how to empty the content of the input form when the ngmodel is empty

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

ngModel null results in today's date (should show empty)

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?

Layout issues in Firefox

See the following screenshot taken in Firefox 48/Windows 10:

Works fine in Chrome.

How to use this date picker?

Hello all,

Please update README that how to use.

How can i override the css.

I am using ng2-datepicker, please let me know how i can override the css

Controls not appearing

I have font-awesome 4.1. Does it need the latest in order to display?

Controls don't appear

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.

Support SystemJS

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.

Is there any way to restrict the future date?

Not working with Bootstrap 4 and Angular 2

Attaching the screenshot, the controls are not getting displayed.

Install fails

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

Restrict date range

Is it possible to restrict the date range with a minDate and a maxDate?

Datepicker stacking on top of calendar

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.

angular 2 2.0.0

hi there,

will there be a version for angular 2.0.0 ?

Install with Angular CLI

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"

moment is not a function - again

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.

Does not work with latest forms.

Generates error "No provider for NgForm."

Control Icons not showing

The control icons are not showing . i tried to import de icons but no success.

Error during prod build

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?

Getting The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements!

Getting The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements! while trying to install...

BroccoliMergeTrees failed

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)

Duplicate identifier

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!

Use as inline datepicker

can this be used inline? Have the calendar always showing?

Still not working in RC5 because of wrong dependencies

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

Calendar Dates are incorrect

Dates do not match the correct days on the calendar. The demo always starts the 1st on Monday.

Cannot Pick First Date of The Month (IMPORTANT)

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.

fails on install typings

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

Two way bindings is applicable in ng2-datepicker?

Not able to use it in rc5 FormGroup

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!

Allow the user to select an entire month, instead of a specific date)

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

No initial date when using Unix Timestamp model-format

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.

TypeError: moment is not a function

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!

Changing the style of the input

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,

Expand your example a little bit

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.

Change Year Directly from control

Is there any way to change to year directly like previous version

Feature Request

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.

Please add a default export to support angular-cli auto install feature

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!

Standalone js bundle

Hi,

Is there no js bundle for your component? So we can just simply reference it in the index.html?

Thanks.

ng2-datepicker with Ionic2

Hi,
how to using ng2-datepicker with Ionic2

tks,
joão

Last month Sunday moved to Monday

npm install ng2-datepicker --save
<datepicker [(ngModel)]="scheduleDate" [expanded]="true" class="success"></datepicker>

Last month's Sunday moved to Monday

Demo link not working

The demo link provided in the ReadMe is not working.

broken in rc.5

broken in rc.5

ng2-datepicker is not supported to Angular 2 RC1

Can you please tell me when ng2-datepicker will gives support to RC1?