{"id":13728695,"url":"https://github.com/BhavinPatel04/ngx-datetime-range-picker","last_synced_at":"2025-05-08T00:32:12.974Z","repository":{"id":33923328,"uuid":"163354529","full_name":"BhavinPatel04/ngx-datetime-range-picker","owner":"BhavinPatel04","description":"Angular material datetime range picker with daily, weekly, monthly, quarterly \u0026 yearly levels","archived":false,"fork":false,"pushed_at":"2025-01-14T01:53:09.000Z","size":6092,"stargazers_count":27,"open_issues_count":6,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-28T14:49:37.808Z","etag":null,"topics":[],"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/BhavinPatel04.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-28T02:09:15.000Z","updated_at":"2025-01-23T08:30:47.000Z","dependencies_parsed_at":"2024-06-19T03:02:03.283Z","dependency_job_id":"62867935-3417-475d-936b-b348559ac2c2","html_url":"https://github.com/BhavinPatel04/ngx-datetime-range-picker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavinPatel04%2Fngx-datetime-range-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavinPatel04%2Fngx-datetime-range-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavinPatel04%2Fngx-datetime-range-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhavinPatel04%2Fngx-datetime-range-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BhavinPatel04","download_url":"https://codeload.github.com/BhavinPatel04/ngx-datetime-range-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252978216,"owners_count":21834898,"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":[],"created_at":"2024-08-03T02:00:48.286Z","updated_at":"2025-05-08T00:32:12.955Z","avatar_url":"https://github.com/BhavinPatel04.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components","UI Components"],"sub_categories":["Dates","Form"],"readme":"# ngx-datetime-range-picker\n\n\u003e Ngx Date time range picker with daily, weekly, monthly, quarterly \u0026 yearly levels\n\n[![Build Status](https://travis-ci.org/BhavinPatel04/ngx-datetime-range-picker.svg?branch=master)](https://travis-ci.org/BhavinPatel04/ngx-datetime-range-picker)\n[![npm version](https://badge.fury.io/js/ngx-datetime-range-picker.svg)](https://badge.fury.io/js/ngx-datetime-range-picker)\n\nThis plugin uses bootstrap and moment.js\n\n[Demo](https://bhavinpatel04.github.io/ngx-datetime-range-picker/)\n\n## React version\n\n[reactjs-datetime-range-picker](https://github.com/BhavinPatel04/reactjs-datetime-range-picker)\n\n## Installation\n\n#### Install the plugin through npm:\n\n```\nnpm install ngx-datetime-range-picker --save\n```\n\n#### Install the plugin through yarn:\n\n```\nyarn add ngx-datetime-range-picker\n```\n\n#### import _NgxDatetimeRangePickerModule_ in your module:\n\n```typescript\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { BrowserAnimationsModule } from \"@angular/platform-browser/animations\";\n...\nimport { FormsModule } from \"@angular/forms\";\nimport { NgxDatetimeRangePickerModule } from \"ngx-datetime-range-picker\";\nimport { AppComponent } from \"./app.component\";\n\n@NgModule({\n imports: [BrowserModule, BrowserAnimationsModule, ... , FormsModule, NgxDatetimeRangePickerModule.forRoot()],\n declarations: [AppComponent],\n bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\n\n#### Tell ngx-datetime-range-picker which theme to use:\u003cbr/\u003e\n\n##### SCSS\n\nAdd below config in your `style.scss`/`some-cool-name-theme.scss`, which has material theme (or not) and is imported in your `angular.json`\n\n```\n// Top of the file\n@use \"ngx-datetime-range-picker/ngx-datetime-range-picker.component.scss\" as ndtrp;\n\n// You would need to include the themes for below components if you are not including them already\n@include mat.form-field-theme($your-app-theme);\n@include mat.icon-theme($your-app-theme);\n@include mat.button-theme($your-app-theme);\n@include mat.select-theme($your-app-theme);\n\n@include ndtrp.ngx-datetime-range-picker-theme($your-app-theme);\n```\n\nIf you _don't_ have a theme and want to use library's default theme\n\n```\n// Top of the file\n@use \"ngx-datetime-range-picker/ngx-datetime-range-picker.component.scss\" as ndtrp;\n\n// You would need to include the themes for below components if you are not including them already\n@include mat.form-field-theme(ndtrp.$ndtrp-app-theme);\n@include mat.icon-theme(ndtrp.$ndtrp-app-theme);\n@include mat.button-theme(ndtrp.$ndtrp-app-theme);\n@include mat.select-theme(ndtrp.$ndtrp-app-theme);\n\n@include ndtrp.ngx-datetime-range-picker-theme();\n```\n\n_Note_: _Themes for components are not included in the library to avoid duplicate styles error_\n\n##### CSS\n\nAdd below config in your `style.css`/`some-cool-name-theme.css` and is imported in your `angular.json`\n\n```\n@import \"ngx-datetime-range-picker/ngx-datetime-range-picker.theme.css\";\n```\n\n_Note_: Make sure whichever file you are adding this to should be imported in `angular.json`\n\n## Usage example\n\n#### Html:\n\n```html\n\u003cngx-datetime-range-picker\n name=\"date\"\n [options]=\"datePickerOptions\"\n [settings]=\"datePickerSettings\"\n [(dateRangeModel)]=\"selectedDate\"\n (dateRangeChanged)=\"onFilterChange($event)\"\n required\n\u003e\n\u003c/ngx-datetime-range-picker\u003e\n```\n\n#### Typescript:\n\n```typescript\nselectedDate: {\n daily: {\n startDate: \"2018-10-13\",\n endDate: \"2018-10-19\",\n },\n weekly: {\n startDate: \"2018-10-13\",\n endDate: \"2018-10-19\",\n },\n monthly: {\n startDate: \"2018-10-13\",\n endDate: \"2018-10-19\",\n },\n quarterly: {\n startDate: \"2018-10-13\",\n endDate: \"2018-10-19\",\n },\n yearly: {\n startDate: \"2018-10-13\",\n endDate: \"2018-10-19\",\n }\n};\n```\n\n## Options\n\n| Option | Type | Description |\n| --------- | ------ | ------------------------------------------- |\n| dateArray | Array | Only the dates in the array will be enabled |\n| startDate | string | Start date |\n| endDate | string | End date |\n| minDate | string | Min date |\n| maxDate | string | Max date |\n| startTime | string | Start time (only for timepicker) |\n| endTime | string | End time (only for timepicker) |\n| minTime | string | Min time (only for timepicker) |\n| maxTime | string | Max time (only for timepicker) |\n\n## Settings\n\n| Setting | Type | Default | Description |\n| ----------------- | ------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |\n| type | string | 'daily' | type (daily | weekly | monthly | quarterly | yearly) |\n| timePicker | boolean | false | enable/disable timepicker |\n| inputDateFormat | string | \"YYYY-MM-DD\" | input date format |\n| viewDateFormat | string | \"YYYY-MM-DD\" | date format to view the date in |\n| outputDateFormat | string | \"YYYY-MM-DD\" | date format in which change event will return the date in |\n| singleDatePicker | boolean | false | enable/disable single date picker |\n| componentDisabled | string | false | enable/disable component |\n| placeholder | string | \"Select Date\" | placeholder/title of the component |\n| showRowNumber | boolean | true | hide/show week numers for daily |\n| availableRanges | Object | {\"Last 7 Days\": {startDate: inputDateFormat, endDate: inputDateFormat}, \"Last 30 days\": {...}, \"Last 90 days\": {...}} | ranges to show |\n| showRanges | boolean | true | hide/show ranges |\n| disableWeekends | boolean | false | enable/disable weekends |\n| disableWeekdays | boolean | false | enable/disable weekdays |\n| displayBeginDate | boolean | false | show begin date in input |\n| displayEndDate | boolean | false | show end date in input |\n\n## [License](https://github.com/BhavinPatel04/ngx-datetime-range-picker/blob/master/LICENSE)\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBhavinPatel04%2Fngx-datetime-range-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBhavinPatel04%2Fngx-datetime-range-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBhavinPatel04%2Fngx-datetime-range-picker/lists"}