{"id":15735301,"url":"https://github.com/doenikoe/az-idatepicker","last_synced_at":"2025-06-21T00:10:23.543Z","repository":{"id":57188692,"uuid":"79415738","full_name":"doenikoe/az-idatepicker","owner":"doenikoe","description":":calendar: Datepicker Component For Angular :calendar:","archived":false,"fork":false,"pushed_at":"2017-04-26T08:54:21.000Z","size":1348,"stargazers_count":8,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-24T02:20:46.286Z","etag":null,"topics":["angular","angular2","angular4","datepicker-component"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/doenikoe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-01-19T04:33:31.000Z","updated_at":"2017-06-23T17:46:26.000Z","dependencies_parsed_at":"2022-08-28T11:11:17.569Z","dependency_job_id":null,"html_url":"https://github.com/doenikoe/az-idatepicker","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/doenikoe/az-idatepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doenikoe%2Faz-idatepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doenikoe%2Faz-idatepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doenikoe%2Faz-idatepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doenikoe%2Faz-idatepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doenikoe","download_url":"https://codeload.github.com/doenikoe/az-idatepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doenikoe%2Faz-idatepicker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261039155,"owners_count":23100978,"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","angular2","angular4","datepicker-component"],"created_at":"2024-10-04T01:12:08.119Z","updated_at":"2025-06-21T00:10:18.521Z","avatar_url":"https://github.com/doenikoe.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM](https://nodei.co/npm/az-idatepicker.png?downloads=true\u0026stars=true)](https://nodei.co/npm/az-idatepicker/)\n\n[![npm version](https://badge.fury.io/js/az-idatepicker.svg)](https://badge.fury.io/js/az-idatepicker) [![Known Vulnerabilities](https://snyk.io/test/npm/az-idatepicker/badge.svg)](https://snyk.io/test/npm/az-idatepicker) ![mit license](https://img.shields.io/packagist/l/doctrine/orm.svg) ![pull request is welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)\n \n![screenshot](https://github.com/doenikoe/az-idatepicker/raw/master/screenshot.png)\n\n# az-idatepicker\nDatepicker component for angular 2. See it in action here: [https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview](https://plnkr.co/edit/gJu3kNJL3rnURc4e3Vml?p=preview) \n\n# Installation\nThis components require moment.js:\n```npm\nnpm install moment --save\n```\nInstall az-idatepicker:\n```npm\nnpm install az-idatepicker --save\n```\n\n# Usage\nimport IDatePickerModule into your app module:\n```angularjs\nimport {IDatePickerModule} from 'az-idatepicker';\n\n@NgModule({\n    imports: [\n        IDatePickerModule,\n        ...\n    ],\n    declarations: [\n        ...\n    ],\n    bootstrap: [...]\n})\n```\nCall \u003caz-idatepicker\u003e from your template:\n```angular2html\n\u003caz-idatepicker\n    id=\"myInput\"\n    [name]=\"'myInputName'\"\n    [placeholder]=\"'Testing'\"\n    [dayLabels]=\"['S','S','R','K','J','S','M']\"\n    [locale]=\"'id'\"\n    [format]=\"'YYYY-MM-DD'\"\n    [idatePickerBinding]=\"model.date\"\n    (onSelect)=\"setDate($event)\"\n\u003e\u003c/az-idatepicker\u003e    \n```\n\n# API\n## Attributes\n| Parameter          \t| Type           | Is Required | Default Value | Description                                                                                                                                                |\n|-----------------------|----------------|-------------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| id                 \t| string         | no          |      -        | ID of component                                                                                                                                            |\n| name               \t| string         | no          |      -        | Name of component                                                                                                                                          |\n| placeholder        \t| string         | no          |      -        | Text to shown if the datepicker is empty                                                                                                                   |\n| dayLabels       \t    | Array\u003cstring\u003e  | yes         |      -        | Day labels visible at header, it started from monday and each symbol separated by 'dash'                                                                   |\n| locale             \t| string         | no          |    en-ca      | Use momentjs (http://momentjs.com/) locale files                                                                                                           |\n| format             \t| string         | no          |  YYYY-MM-DD   | The date format, default to 'YYYY-MM-DD'                                                                                                                   |\n| idatePickerBinding \t| any            | no          |      -        | Binding for ngModel                                                                                                                                        |\n| sundayHighlight       | boolean        | no          |    false      | If true then `sunday` will have red color                                                                                                                  |\n| minYear               | number         | no          |     1970      | Minimum year                                                                                                                                               |\n| maxYear               | number         | no          |     2020      | Maximum year                                                                                                                                               |\n| disableDays           | Array\u003cnumber\u003e  | no          |     []        | Disable dates that in the defined day. Day must defined in ordered index (0=sunday, 1=monday, 2=tuesday, 3=wednesday, 4=thursday, 5=friday, 6=saturday)    |\n| minDate, maxDate      | moment         | no          |      -        | Restrict the range of selectable date with 'minDate' and 'maxDate'                                                                                         |\n  \n## Callback Events\n| Name                  | Return Type  | Description                                                                                        |\n|-----------------------|--------------|----------------------------------------------------------------------------------------------------|\n| getSelectedDate       | string       | Return selected date\n\n## Exposed Method\nYou can use [template reference variable](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars) to call exposed methods in az-idatepicker component\nExample:\n```angular2html\n\u003cbutton (onclick)=\"elem.openDatePicker()\"\u003eOpen IDatePicker\u003c/button\u003e\n\n\u003caz-idatepicker #elem\n    id=\"myInput\"\n    [name]=\"'myInputName'\"\n    [placeholder]=\"'Testing'\"\n    [dayLabels]=\"'S-S-R-K-J-S-M'\"\n    [locale]=\"'id'\"\n    [format]=\"'YYYY-MM-DD'\"\n    [idatePickerBinding]=\"model.date\"\n    (onSelect)=\"setDate($event)\"\n\u003e\u003c/az-idatepicker\u003e\n```\n\n| Name                  | Args  | Description           |\n|-----------------------|-------|-----------------------|\n| openDatePicker        | -     | Open date picker      |\n| closeDatePicker       | -     | Close date picker     |\n\n## Issues\nIf you found any bugs please do not hesitate to give us feedback by reporting issue in our github repository\n\n## Care for pull request ?\nThis [page](https://github.com/doenikoe/az-idatepicker/wiki/Building-and-testing-az-idatepicker) explain how to prepare your local development environment. Let's start contributing in az-idatepicker development.\n\n## Star\n:point_right: Support us by give a star :star: \n\n## License\n- License: MIT\n\n## Author \n- Author: doenikoe\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoenikoe%2Faz-idatepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoenikoe%2Faz-idatepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoenikoe%2Faz-idatepicker/lists"}