{"id":20407822,"url":"https://github.com/restorando/angular-pickadate","last_synced_at":"2025-04-06T02:08:13.541Z","repository":{"id":57741674,"uuid":"14597192","full_name":"restorando/angular-pickadate","owner":"restorando","description":"A simple and fluid inline datepicker for AngularJS with no extra dependencies.","archived":false,"fork":false,"pushed_at":"2020-04-03T05:27:40.000Z","size":712,"stargazers_count":274,"open_issues_count":27,"forks_count":91,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-03-30T00:11:07.630Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/restorando.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":"2013-11-21T19:21:29.000Z","updated_at":"2025-02-06T01:13:13.000Z","dependencies_parsed_at":"2022-08-27T05:22:23.457Z","dependency_job_id":null,"html_url":"https://github.com/restorando/angular-pickadate","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-pickadate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-pickadate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-pickadate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/restorando%2Fangular-pickadate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/restorando","download_url":"https://codeload.github.com/restorando/angular-pickadate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423514,"owners_count":20936626,"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-11-15T05:26:26.178Z","updated_at":"2025-04-06T02:08:13.520Z","avatar_url":"https://github.com/restorando.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-pickadate [![Build Status](https://travis-ci.org/restorando/angular-pickadate.svg?branch=master)](https://travis-ci.org/restorando/angular-pickadate)\n\n\nA simple and fluid inline datepicker for AngularJS with no extra dependencies.\n\n![pickadate](http://img.ctrlv.in/img/5294e96436552.jpg)\n\n### Demo\n\n\u003ca href=\"http://embed.plnkr.co/gXP8xdsdP9nJIr0fi1RQ/preview\" target=\"_blank\"\u003eView demo in a new window\u003c/a\u003e\n\n### Installation\n\n1) Add the `pickadate` module to your dependencies\n\n```javascript\nangular.module('myApp', ['pickadate']);\n```\n\n2) Use the `pickadate` directive in any element\n\n```html\n\u003cdiv pickadate ng-model=\"date\"\u003e\u003c/div\u003e\n```\n\nIf the element is an `\u003cinput\u003e`, it will display the datepicker as a modal. Otherwise, it will be rendered inline.\n\nPickadate is fluid, so it will take the width of the parent container.\n\n### Pickadate options\n\n#### format\n\nYou can specify the date format using the `format` attribute. Supported formats must have the year, month and day parts, and the separator must be `-` or `/`.\n\n```html\n\u003cdiv pickadate ng-model=\"date\" format=\"dd/mm/yyyy\"\u003e\u003c/div\u003e\n```\n\nFormat string can be composed of the following elements:\n\n* `'yyyy;`: 4 digit representation of year (e.g. AD 1 =\u003e 0001, AD 2010 =\u003e 2010)\n* `'mm'` or `'MM'`: Month in year, padded (01-12)\n* `'dd'`: Day in month, padded (01-31)\n\nEvery option that receives a date as the input (e.g. min-date, max-date, etc) should be entered using the same format.\n\n#### min-date, max-date\n\n```html\n\u003cdiv pickadate ng-model=\"date\" min-date=\"minDate\" max-date=\"maxDate\"\u003e\u003c/div\u003e\n```\n\n```javascript\nfunction MyAppController($scope) {\n    $scope.minDate = '2013-11-10';\n    $scope.maxDate = '2013-12-31';\n}\n```\n\n`min-date` and `max-date` take angular expressions, so if you want to specify the values inline, don't forget the quotes!\n\n```html\n\u003cdiv pickadate ng-model=\"date\" min-date=\"'2013-11-10'\" max-date=\"'2013-12-31'\"\u003e\u003c/div\u003e\n```\n\n#### disabled-dates\n\nYou can specify a function that will determine if a date is disabled or not. You can pass `formattedDate` as an argument to receive the date formatted in the current locale, or `date` to receive the date object. You can pass both of them if you need.\n\n```html\n\u003cdiv pickadate ng-model=\"date\" disabled-dates=\"disabledDatesFn(formattedDate)\"\u003e\u003c/div\u003e\n```\n\n```javascript\nfunction MyAppController($scope) {\n    $scope.disabledDatesFn = function(formattedDate) {\n        return ['2013-11-10', '2013-11-15', '2013-11-19'].indexOf(formattedDate) \u003e -1;\n    }\n}\n```\n\nThis is handy if you want to disable dates programatically.\n\n```html\n\u003cdiv pickadate ng-model=\"date\" disabled-dates=\"disabledDatesFn(date)\"\u003e\u003c/div\u003e\n```\n\n```javascript\nfunction MyAppController($scope) {\n    $scope.disabledDatesFn = function(date) {\n        return date.getDay() === 6; // Disable every Sunday\n    }\n}\n```\n\n#### default-date\n\nAllows you to preset the calendar to a particular month without setting the chosen date.\n\n```html\n\u003cdiv pickadate default-date=\"presetDate\"\u003e\u003c/div\u003e\n```\n\n```javascript\nfunction MyAppController($scope) {\n    $scope.presetDate = '2013-12-01';\n}\n```\n\n#### week-starts-on\n\nSets the first day of the week. The default is 0 for Sunday.\n\n```html\n\u003cdiv pickadate week-starts-on=\"1\"\u003e\u003c/div\u003e\n```\n\n#### no-extra-rows\n\nThe calendar will have between 4 and 6 rows if this attribute is present. By default it will always have 6 rows.\n\n```html\n\u003cdiv pickadate no-extra-rows\u003e\u003c/div\u003e\n```\n\n#### multiple\n\nThe calendar will support selecting multiple dates. NgModel will be set as an array of date strings\n\n```html\n\u003cdiv pickadate multiple\u003e\u003c/div\u003e\n```\n\n#### allow-blank-date\n\nThe calendar will allow user to remove the last remaining date.\n\n```html\n\u003cdiv pickadate multiple not-blank\u003e\u003c/div\u003e\n```\n\n#### select-other-months\n\nThis attribute can take the following string values:\n\n- `next`: the calendar will allow selecting dates from the next month\n- `previous`: same as the one before, but for previous month dates\n- `both`: the calendar will allow selecting dates from both the next and previous month\n\n```html\n\u003cdiv pickadate select-other-months=\"next\"\u003e\u003c/div\u003e\n```\n\n### I18n \u0026 Icons\n\nPickadate uses angular `$locale` module for the date translations. If you want to have the calendar in any other language, please include the corresponding AngularJS i18n files. You can get them here: [https://code.angularjs.org/1.3.0/i18n/](https://code.angularjs.org/1.3.0/i18n/).\n\nFor the remaining translations you can configure the `pickadateI18nProvider`.\n\n```javascript\nangular.module('testApp', ['pickadate'])\n\n    .config(function(pickadateI18nProvider) {\n        pickadateI18nProvider.translations = {\n            prev: '\u003ci class=\"icon-chevron-left\"\u003e\u003c/i\u003e ant',\n            next: 'sig \u003ci class=\"icon-chevron-right\"\u003e\u003c/i\u003e'\n        }\n    });\n```\n\nThe translations can contain custom html code, useful to include custom icons in the calendar controls.\n\n## License\n\nCopyright (c) 2013 Restorando\n\nMIT License\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frestorando%2Fangular-pickadate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frestorando%2Fangular-pickadate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frestorando%2Fangular-pickadate/lists"}