icklechris / ic-datepicker

Angular (2+) datepicker component

Ic Datepicker

Docs & Example

Warning: This component is still in pre-release. Although the component should be stable, until v1 is released there is potential for API changes whilst things are finalised. To prevent issues, ensure your package.json file specifies a specific version (e.g. "ic-datepicker": "0.0.5").

Installation

Install the component via NPM;

npm install -S ic-datepicker
  (or)
yarn add ic-datepicker

Import the IcDatepickerModule into your module;

// app.module.ts

import { IcDatepickerModule } from 'ic-datepicker';

@NgModule({
  imports: [
    IcDatepickerModule,
  ],
})

Usage

Use the <ic-datepicker/> element, optionally providing an IcDatepickerOptionsInterface instance containing overriding options (see defaults).

import { IcDatepickerOptionsInterface } from 'ic-datepicker';

@Component({
  selector: 'my-example-component',
  template: `
    <form [formGroup]="exampleForm">
      <!-- Reactive Form -->
      <ic-datepicker formControlName="datepicker" options="datepickerOptions"></ic-datepicker>
      
      <!-- ngModel -->
      <ic-datepicker [(ngModel)]="modelDatepicker" options="datepickerOptions"></ic-datepicker>
    </form>
  `,
  styles: ``
})
export class MyExampleComponent implements OnInit {
  datepickerOptions: IcDatepickerOptionsInterface;
  exampleForm: FormGroup;
  modelDatepicker: any;

  ngOnInit() {
    this.datepickerOptions = {
      position: 'top'
    };

    this.exampleForm = new FormGroup({
      datepicker: new FormControl()
    });
  }
}

ic-datepicker's Issues

Tab / Shift + Tab Doesn't work

While filling forms user often use Tab / Shift + Tab keys to switch between the form fields. When the focus is on the Datepicker field pressing Tab/ Shift + Tab keys doesnt set the focus on the next/previous form field.

Can you please have a look?

import to ionic 3 got error

Error: StaticInjectorError[IcDatepickerService]:
StaticInjectorError[IcDatepickerService]:
NullInjectorError: No provider for IcDatepickerService!

I had follow the readme, but still got error.

Production build with AoT throws error - Error encountered resolving symbol values statically

When trying production build with AoT in Angular CLI, it throws the below error:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /node_modules/ic-datepicker/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in /node_modules/ic-datepicker/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in /node_modules/ic-datepicker/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in /node_modules/ic-datepicker/node_modules/@angular/core/index.d.ts, resolving symbol IcDatepickerModule in /node_modules/ic-datepicker/dist/src/ic-datepicker.module.d.ts, resolving symbol IcDatepickerModule in /node_modules/ic-datepicker/dist/src/ic-datepicker.module.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

I have imported the IcDatepickerModule module like this in my module:

import { IcDatepickerModule } from 'ic-datepicker/dist';

If I update the import to the following:

import { IcDatepickerModule } from 'ic-datepicker';

and delete all contents of node_modules\ic-datepicker
and then copy paste the contents of node_modules\ic-datepicker\dist in node_modules\ic-datepicker. It works. Can you please have a look?

Year change causes form to submit

Hi,

When we switch Year or click the Up/Down icons on Years selector it causes form to submit.

Support current-date initialization

It would be perfect to provide an easy way to initialize current date

Reactive form - clear date if null/undefined

In reactive form, if date is null or undefined, it stays on previously selected date. Is it possible to clear date if set date is null or undefined? Thanks

Support for Time Picker

Here is a suggestion to please add support for time picker. In some situations we might want user to enter date and time so instead of having two different plugins, what if could also add optional dropdowns for time selection?

Input-Group & ngModel

Is there a complete sample to group the ic-datepicker in an 'input-group'? I'm looking for a input-field and then two buttons (clear & toogle calendar) which could be grouped nicely with the 'input-group' and 'input-group-addon'. But I failed miserably with the approach since the input-field was still aligned on the far left side and the popup did not display the way as expected (either nothing, red square, 3 line popup with very long row of dates).

And the second request is for a sample how to use [(ngModel)] properly with the component.

DD.MM.YYYY support?

First off, this datepicker looks very nice and I'd like to use it in one of my projects.
What I'd need is the DD.MM.YYYY (e.g. 01.04.2017) format?
Is there an option available so that I can use this date format?
Thanks in advance.

Error moment/moment"' has no default export

The plugin looks awesome, but I am receiving below error when I try to use this plugin:

node_modules/moment/moment"' has no default export.

On all files having below import:

import Moment from 'moment';

Can you please guide?

I would really appreciate if you could please also share the settings required for systemjs.config?

Instructions for systemjs.config.js?

Hi,
I followed the instructions on the installation-page, but when I try to start the app it can’t find the ic-datepicker and throws a 404 and a ZoneAwareError. I’m guessing I need to add some reference in systemjs.config but I do not know how. I found a comment by @naveedahmed1 about this in another issue-thread here, but it did not work for me.

I think we should also add below instructions for systemjs configuration
in maps add:
'ic-datepicker/dist': 'node_modules/ic-datepicker/dist/bundles',
in packages add:
'ic-datepicker/dist': { defaultExtension: "js", main: "ic-datepicker.bundle.js"
}

This is probably a trivial problem but I’m pretty new to Angular and still learning. Just for reference, I’m using Angular 4 and ic-datepicker is set to 0.0.10 in the package.json.
Thanks in advanced.

Help with disableDayFn

I'm having to always recreate the "datepickerOptionsDate". When I change month it assigns to the first day of the month to recharge.

I wish it only changed in the function.

I tried this.datepickerOptionsDate.disableDayFn and it did not work.

Can anybody help me?

Thanks.

ngOnInit() {

    this.titleService.setTitle('Agendamento - Portal de Parceiros Peixe Urbano');

    moment.locale('pt-br');

    this.dateFilter = moment(Date());

    this.datepickerOptionsDate = {
      displayFormat: 'dddd, DD MMM YYYY',
      inputClasses: ['form-control', 'group-left'],
    };

    this.list();
    this.getAvailabilityCalendar(this.dateFilter);
  }

  getAvailabilityCalendar(dateMoment: Moment) {

    let firstDate = dateMoment.format('YYYY-MM-01');
    let lastDate = dateMoment.format('YYYY-MM-') + moment().daysInMonth();
    this.scheduleService.getAvailabilityCalendar(firstDate, lastDate)
      .subscribe(response => {
        this.daysUnavailable = response;

        this.datepickerOptionsDate = {
          showEmptyRow: false,
          displayFormat: 'dddd, DD MMM YYYY',
          showDayQuickOptions: false,
          inputClasses: ['form-control', 'group-left'],
          disableDayFn: (dayMomentInstance) => {
            let dateMoment = moment(dayMomentInstance).format('YYYY-MM-DD');
            return this.daysUnavailable.find(p => moment(p).format('YYYY-MM-DD') === dateMoment);
          }
        }
      },
      error => {
        this.errors = error;
      });
  }

Always defaults to Current Date

Hi,

The date field always defaults to current date, as a side effect, when I use it with reactive form and submit form without even selecting any date, it posts the current date to the server instead of null.

this.form = fb.group({
            from: [null],
            to: [null]
        });

Input readonly not working

The field does not respect the property readonly.

this.datepickerOptions = { showEmptyRow: false, showDayQuickOptions: false, inputClasses: ['form-control', 'group-left'], attrs: { placeholder: 'de', readonly: false } };

<ic-datepicker [options]="datepickerOptions"></ic-datepicker>

The result in browser:

<input type="text" class="form-control group-left" ng-reflect-ng-class="form-control,group-left" placeholder="de" readonly="true">

Hide last empty row for months that don't need it

A number of months do not need the last row. Would be nice if this row is hidden for those months that can live without. I can imagine some designs would prefer to have a static layout (i.e. not shrinking during every month toggle), so in case you like to honor this request, I'd make it configurable.

Production builds with AoT Fails

In case of Angular Clli the productions build with AoT (ng build --prod --aot) are failing with below error, can you please have a look:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in node_modules/ic-datepicker/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in node_modules/ic-datepicker/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in node_modules/ic-datepicker/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in node_modules/ic-datepicker/node_modules/@angular/core/index.d.ts, resolving symbol IcDatepickerModule in node_modules/ic-datepicker/dist/src/ic-datepicker.module.d.ts, resolving symbol IcDatepickerModule in node_modules/ic-datepicker/dist/src/ic-datepicker.module.d.ts

Note!

I cut the contents from node_modules\ic-datepicker\dist and the removed all contents from node_modules\ic-datepicker directory and pasted the contents from node_modules\ic-datepicker\dist to *node_modules\ic-datepicker* direcotry.

then updated the import statements to:

import { IcDatepickerModule } from 'ic-datepicker';

And worked! So, the problems seems to be with the npm package, and requires a fix.

Placeholder text

Is it possible to add placeholder text to the datepicker input element?

change styles and color scheme

Create work on this datepicker! Wondering if it's possible to change the colors? I'm using material2 in my project and using a theme to control my primary and secondary colors.

Is it possible to localize labels?

I'd like to have the ability to localize the month and day labels as well as the today / tomorrow actions. Can this be done by providing a configuration?

Show two months instead of one

Hey I would want to show 2 months instead of one. Will it be easy to add such functionality ? I want this to be default.