{"id":13728830,"url":"https://github.com/martre3/ngx-dates-picker","last_synced_at":"2025-05-08T01:30:22.957Z","repository":{"id":35116204,"uuid":"206299322","full_name":"martre3/ngx-dates-picker","owner":"martre3","description":"Angular 2+ datepicker component with no JQuery dependency.","archived":false,"fork":false,"pushed_at":"2023-01-05T22:19:09.000Z","size":2943,"stargazers_count":1,"open_issues_count":25,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T23:38:10.146Z","etag":null,"topics":["angular","date-range-picker","datepicker","daterange-picker","nojquery"],"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/martre3.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":"2019-09-04T11:04:31.000Z","updated_at":"2022-06-06T20:16:20.000Z","dependencies_parsed_at":"2023-01-15T14:09:27.067Z","dependency_job_id":null,"html_url":"https://github.com/martre3/ngx-dates-picker","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martre3%2Fngx-dates-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martre3%2Fngx-dates-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martre3%2Fngx-dates-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martre3%2Fngx-dates-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martre3","download_url":"https://codeload.github.com/martre3/ngx-dates-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252981350,"owners_count":21835413,"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","date-range-picker","datepicker","daterange-picker","nojquery"],"created_at":"2024-08-03T02:00:51.045Z","updated_at":"2025-05-08T01:30:22.403Z","avatar_url":"https://github.com/martre3.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Form"],"readme":"# ngx-dates-picker\n\nAngular 2+ datepicker component with no JQuery dependency, forked from [bleenco/ng2-datepicker](https://github.com/bleenco/ng2-datepicker).\n\n[![AbstruseCI](https://ci.bleenco.io/badge/6)](https://ci.bleenco.io/repo/6)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg style=\"display: inline-block\" src=\"https://user-images.githubusercontent.com/32035250/64512878-033faf00-d2f0-11e9-9fcb-5cbef6112cde.png\" width=\"300\"\u003e\n  \u003cimg style=\"display: inline-block\" src=\"https://user-images.githubusercontent.com/32035250/64523368-d4800380-d304-11e9-8ddf-528216634d98.png\" width=\"300\"\u003e\n  \u003cimg style=\"display: inline-block\" src=\"https://user-images.githubusercontent.com/32035250/64523552-38a2c780-d305-11e9-83ba-7833b2f51e4a.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/32035250/64512970-384c0180-d2f0-11e9-9bc8-53a8cb77c615.png\" width=\"300\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/32035250/64591250-0ac78c80-d3b2-11e9-8df5-17cb9c4f51b9.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\n## Installation\n1. Install package from `npm`.\n\n```sh\nnpm install ngx-dates-picker --save\n```\n\n2. Include NgxDatesPickerModule into your application.\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgxDatesPickerModule } from 'ngx-dates-picker';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    NgxDatesPickerModule\n  ],\n  declarations: [ AppComponent ],\n  exports: [ AppComponent ]\n})\nexport class AppModule {}\n```\n\n## Example\n```html\n  \u003cngx-dates-picker [(ngModel)]=\"date\" /\u003e\n```\n\n## NgModel\nAccepted types are date `string`, javascript `Date` object and `DateRange` object (`{start: Date, end: Date}`).\nIf `selectRange` is `true` javascript `Date` object will be returned for selected date, else - `DateRange` object, \nwhere `range.start` will be equal to `range.end` if one day is selected. \n\n## Attributes\n|Name|Type|Default|Description|\n| --- | --- | --- | --- |\n|`headless`|boolean|`false`|Disable datepicker's input|\n|`isOpened`|boolean|`false`|Show or hide datepicker|\n|`position`|string|`bottom-right`|Dropdown position (`bottom-left`, `bottom-right`, `top-left`, `top-right`, `static`)|\n|`previousMonthButtonTemplate`|`TemplateRef`|`undefined`|Overrides left arrow used to go one month back.|\n|`nextMonthButtonTemplate`|`TemplateRef`|`undefined`|Overrides right arrow used to go to next month.| \n|`options`|object|see [options](#options)||\n\n## \u003ca name=\"options\"\u003e\u003c/a\u003eOptions\n```ts\ndefaultOptions: DatepickerOptions = {\n  closeOnClickOutside: true;\n  closeOnSelection: true;\n  selectRange: false,\n  includeDays: 'previous-month'; // 'none', 'previous-month', 'next-month', 'all'. Should it render days outside current month.\n  minYear: 1970,\n  maxYear: 2030,\n  displayFormat: 'MMM D[,] YYYY',\n  barTitleFormat: 'MMMM YYYY',\n  dayNamesFormat: 'ddd',\n  rangeSeparator: '-' // Char that separates start and end dates in input field.\n  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday\n  locale: {},\n  minDate: undefined, // Minimal selectable date\n  maxDate: undefined,  // Maximal selectable date\n  barTitleIfEmpty: '',\n  placeholder: '', // HTML input placeholder attribute (default: '')\n  addClass: {}, // Optional, value to pass on to [ngClass] on the input field\n  addStyle: {}, // Optional, value to pass to [ngStyle] on the input field\n  fieldId: 'datepicker-0', // ID to assign to the input field. Defaults to datepicker-\u003ccounter\u003e\n  useEmptyBarTitle: true, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown \n};\n```\n\nFor available `format` options check out [here](https://date-fns.org/docs/format).\n\nIn case you want to initialize with an empty value, just assign null to the model attribute you're storing the date and you can customize the message in the bar with the property `barTitleIfEmpty`.\n\n## Locale\n\nTo change the locale import it from `date-fns`. For example `import * as frLocale from 'date-fns/locale/fr'` and pass it to options `options={locale: frLocale}`. \n\n## To Do\n1. Fix packages vulnerabilities.\n2. Write tests (not a single test has been written yet).\n3. Add ability to add custom class to each calendar component.\n\n## Run Included Demo\n\n1. Clone this repository\n\n```sh\ngit clone https://github.com/martre3/ngx-dates-picker.git\ncd ngx-dates-picker\n```\n\n2. Install packages\n\n```sh\nnpm install\n```\n\n3. Run Demo\n\n```sh\nnpm start\n```\n\n## Licence\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartre3%2Fngx-dates-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartre3%2Fngx-dates-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartre3%2Fngx-dates-picker/lists"}