All Projects → IckleChris → ic-datepicker

IckleChris / ic-datepicker

Licence: other
Angular (2+) datepicker component

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to ic-datepicker

Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (+92.59%)
Mutual labels:  angular2, ng2
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+5788.89%)
Mutual labels:  angular2, ng2
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (+125.93%)
Mutual labels:  angular2, ng2
praecox-datepicker
A date picker built with Svelte.Simple and flexible, supporting functions such as single selection, multiple selection, disabling, and marking.
Stars: ✭ 66 (+144.44%)
Mutual labels:  datepicker, datepicker-component
Angular Google Maps
Angular 2+ Google Maps Components
Stars: ✭ 1,982 (+7240.74%)
Mutual labels:  angular2, ng2
Ng2 Sweetalert2
A sweetalert2 service for angular2.
Stars: ✭ 49 (+81.48%)
Mutual labels:  angular2, ng2
Ng2 Flatpickr
Angular 2+ wrapper for flatpickr (https://github.com/chmln/flatpickr)
Stars: ✭ 91 (+237.04%)
Mutual labels:  angular2, datepicker
Mydatepicker
Angular 2+ date picker
Stars: ✭ 558 (+1966.67%)
Mutual labels:  angular2, datepicker
Ng2 Search Filter
Angular 2 / Angular 4 / Angular 5 custom pipe npm module to make a search filter on any input, 🔥 100K+ downloads
Stars: ✭ 137 (+407.41%)
Mutual labels:  angular2, ng2
Ngx Date Fns
⏳ date-fns pipes for Angular 2.0 and above ⏳
Stars: ✭ 135 (+400%)
Mutual labels:  angular2, ng2
Ng2 Ace
A basic ace editor directive for angular 2.
Stars: ✭ 33 (+22.22%)
Mutual labels:  angular2, ng2
ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
Stars: ✭ 24 (-11.11%)
Mutual labels:  angular2, ng2
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-3.7%)
Mutual labels:  angular2, ng2
angular2-signature-pad
Signature pad component for Angular 2.x and above.
Stars: ✭ 17 (-37.04%)
Mutual labels:  angular2, ng2
Ngx Echarts
An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
Stars: ✭ 820 (+2937.04%)
Mutual labels:  angular2, ng2
Ng2 Konva
Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
Stars: ✭ 78 (+188.89%)
Mutual labels:  angular2, ng2
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (+1888.89%)
Mutual labels:  angular2, datepicker
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: ✭ 23,286 (+86144.44%)
Mutual labels:  angular2, ng2
Ngx Mydatepicker
Angular 2+ attribute directive datepicker
Stars: ✭ 123 (+355.56%)
Mutual labels:  angular2, datepicker
Ng2 Nouislider
Angular2 noUiSlider directive
Stars: ✭ 181 (+570.37%)
Mutual labels:  angular2, ng2

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()
    });
  }
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].