{"id":13637450,"url":"https://github.com/albertnadal/ng2-daterange-picker","last_synced_at":"2026-03-08T12:30:58.982Z","repository":{"id":57321901,"uuid":"84049992","full_name":"albertnadal/ng2-daterange-picker","owner":"albertnadal","description":"Light and simple date range picker component for Angular2 based on Material","archived":false,"fork":false,"pushed_at":"2018-03-13T17:26:12.000Z","size":37163,"stargazers_count":26,"open_issues_count":7,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-28T11:16:43.234Z","etag":null,"topics":["angular","component","daterange","material","ng2-daterange-picker","picker","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/albertnadal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-06T08:44:06.000Z","updated_at":"2022-11-03T16:20:00.000Z","dependencies_parsed_at":"2022-08-26T01:11:06.457Z","dependency_job_id":null,"html_url":"https://github.com/albertnadal/ng2-daterange-picker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albertnadal%2Fng2-daterange-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albertnadal%2Fng2-daterange-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albertnadal%2Fng2-daterange-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/albertnadal%2Fng2-daterange-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/albertnadal","download_url":"https://codeload.github.com/albertnadal/ng2-daterange-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251302782,"owners_count":21567601,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component","daterange","material","ng2-daterange-picker","picker","typescript"],"created_at":"2024-08-02T00:01:17.614Z","updated_at":"2026-03-08T12:30:58.975Z","avatar_url":"https://github.com/albertnadal.png","language":"TypeScript","funding_links":[],"categories":["Angular","UI Components"],"sub_categories":["Components","Form"],"readme":"# Angular 2 Material Daterange picker\n\n[![Version](http://img.shields.io/npm/v/ng2-daterange-picker.svg)](https://www.npmjs.org/package/ng2-daterange-picker)\n\nA minimalist daterange picker component for Angular 2 based on Material.\nNo jQuery dependent. No Bootstrap CSS dependent.\n\n![](http://www.lafruitera.com/ng2-daterange-picker.gif)\n\n### Installation\n```\nnpm install ng2-daterange-picker --save\n```\n### Usage\nImport the DaterangePicker Module and add it to the `imports` of your module\n```\nimport { DaterangePickerModule } from 'ng2-daterange-picker'\n\n@NgModule({\n  imports: [ DaterangePickerModule ],\n  declarations: [ ... ],\n  bootstrap: [ ... ]\n})\nexport class YourModule { }\n```\nUse dinamically the ng2-daterange-picker selector as described in the sample component below\n```\nimport { Component, ViewContainerRef, ViewChild, ComponentFactoryResolver } from '@angular/core';\nimport { DaterangePickerComponent } from 'ng2-daterange-picker';\n\n@Component({\n  selector: 'my-component-selector',\n  entryComponents: [DaterangePickerComponent],\n  template: '\u003cbutton #daterangePicker type=\"button\" (click)=\"showDaterangePickerSelector()\"\u003eSelect a range\u003c/button\u003e'\n})\nexport class MyComponent {\n\n  @ViewChild('daterangePicker', { read: ViewContainerRef }) daterangePickerParentViewContainer: ViewContainerRef;\n\n  constructor(private componentFactory: ComponentFactoryResolver) { }\n\n  showDaterangePickerSelector() {\n    let daterangePickerComponentFactory = this.componentFactory.resolveComponentFactory(DaterangePickerComponent);\n    let daterangePickerComponent: DaterangePickerComponent = DaterangePickerComponent.initWithData(this.daterangePickerParentViewContainer, daterangePickerComponentFactory);\n\n    daterangePickerComponent.onSelectedDaterange.subscribe(\n          data =\u003e {\n                    this.showSelectedDaterange(data.startDate, data.endDate);\n          }\n    );\n  }\n\n  showSelectedDaterange(startDate: Date, endDate: Date) {\n    console.log(startDate);\n    console.log(endDate);\n  }\n\n}\n```\n\n### License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbertnadal%2Fng2-daterange-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falbertnadal%2Fng2-daterange-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falbertnadal%2Fng2-daterange-picker/lists"}