{"id":16429664,"url":"https://github.com/cuppalabs/angular-cuppa-datepicker","last_synced_at":"2026-03-11T00:33:03.105Z","repository":{"id":58243724,"uuid":"73427618","full_name":"CuppaLabs/angular-cuppa-datepicker","owner":"CuppaLabs","description":"Angular Datepicker and Datetimepicker Component for web and mobile. Light Weight and easy to integrate.","archived":false,"fork":false,"pushed_at":"2017-06-18T19:56:02.000Z","size":1181,"stargazers_count":9,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-12T18:47:14.955Z","etag":null,"topics":["angular-datepicker","angular-directives","datepicker"],"latest_commit_sha":null,"homepage":"https://cuppalabs.github.io/angular-cuppa-datepicker/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CuppaLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-10T22:52:32.000Z","updated_at":"2018-05-18T16:25:37.000Z","dependencies_parsed_at":"2022-08-31T01:01:43.876Z","dependency_job_id":null,"html_url":"https://github.com/CuppaLabs/angular-cuppa-datepicker","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/CuppaLabs/angular-cuppa-datepicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular-cuppa-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular-cuppa-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular-cuppa-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular-cuppa-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CuppaLabs","download_url":"https://codeload.github.com/CuppaLabs/angular-cuppa-datepicker/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular-cuppa-datepicker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259620230,"owners_count":22885738,"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-datepicker","angular-directives","datepicker"],"created_at":"2024-10-11T08:23:55.436Z","updated_at":"2026-03-11T00:33:03.076Z","avatar_url":"https://github.com/CuppaLabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular DateTimePicker \n### by [Cuppa Labs](http://www.cuppalabs.com)\n[![npm version](https://img.shields.io/npm/v/angular-cuppa-datepicker.svg)](https://www.npmjs.com/package/angular-cuppa-datepicker)\n\nAngular Cuppa DateTimepicker is a cool responsive DateTimepicker directive for Web and Mobile. It is Mobile friendly and light weight. Developed by [Cuppa Labs](http://www.cuppalabs.com).\n\n## Demo\n\nView the [Demo here](https://cuppalabs.github.io/angular-cuppa-datepicker/) of Date Picker.\n[Click here](https://jsfiddle.net/solomon301/s3hL05s6/) for JSFiddle.\n\n![www.cuppalabs.com](https://raw.githubusercontent.com/CuppaLabs/angular-cuppa-datepicker/master/images/angular-datepicker.png)\n\n## Getting Started\n- Install with [npm](https://www.npmjs.com): `npm install angular-cuppa-datepicker`\n\n#### \t\t\t\tOR\n#### Steps to Download and setup\n#### 1. Add Datepicker Directive\nInclude the `datepicker-directive.js` script file in the `\u003chead\u003e` section or at the bottom of your html page.\n```html\n\u003cscript src=\"datepicker-directive.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n#### 2. CSS\nInclude the CSS file in `\u003chead\u003e` section of your page.\n```html\n\u003clink href=\"cuppa-datepicker-styles.css\" rel=\"stylesheet\"\u003e\n```\n\n#### 3. Initialize\nInject the directive `cuppaDatepickerDirective` as a dependency into the module where the datepicker needs to be initialized.\n\n```js\nangular.module(\"cuppaDatepicker\",[\"cuppaDatepickerDirective\"])\n.controller(\"cuppaDatepickerController\",function($scope){\n        $scope.myDate = new Date();\n        $scope.myDate2 = \"04-18-1990 12:15 AM\";\n});\n\n```\n#### 4. HTML\nDirective tag declaration.\n```html\n \u003ccuppa-datepicker \n \t\tng-model=\"myDate\" \n\t\tbig-banner=\"true\" \n\t\tformat=\"dd/MM/yyyy hh:mm a\" \n\t\tdefault-open=\"true\"\n\t\ttime-picker=\"true\" \n\t\ton-date-select=\"onDateSelect(selectedDate)\"\u003e\n\u003c/cuppa-datepicker\u003e\n```\n#### 5. External Dependencies\n\nWe have font awesome icons as dependency for the component. Don't forget to include the following dependencies.\n\n```html\n\u003cscript src=\"https://use.fontawesome.com/698aa4e2c2.js\"\u003e\u003c/script\u003e\n```\n\n## API Documentation\n\n## Configuration\n\nFollowing directive attirbutes can be configured.\n\n|Property|Required|Default|Description|\n|:--- |:--- |:--- |:--- |:--- |\n|`ng-model`|YES|`''`| scope model for the date field.|\n|`big-banner`   |Optional|`true`|Set to true to have a cool banner above the month table. Set false to have a simple datepicker|\n|`format`|optional|`dd/MM/yyyy`|Date format of the calendar. This will be bound to the model as the date's value.|\n|`default-open`|optional|`false`|To open the dateoicker popover on load. Default false.|\n|`time-picker`|optional|`false`|Enable timepicker feature.|\n\n\n## Events\n\n- `on-date-select`\n\nDefine a callback method to call on select of the date.\n\nExample : \n\n```html\n  on-date-select=\"onDateSelect(selectedDate)\"\n```\n## Date Formats Support\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- 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 =\u003e 01, AD 2010 =\u003e 10)\n- 'y': 1 digit representation of year, e.g. (AD 1 =\u003e 1, AD 199 =\u003e 199)\n- 'MMMM': Month in year (January-December)\n- 'MMM': Month in year (Jan-Dec)\n- 'MM': Month in year, padded (01-12)\n- 'M': Month in year (1-12)\n- 'LLLL': Stand-alone month in year (January-December)\n- 'dd': Day in month, padded (01-31)\n- 'd': Day in month (1-31)\n- 'EEEE': Day in Week,(Sunday-Saturday)\n- 'EEE': Day in Week, (Sun-Sat)\n- 'HH': Hour in day, padded (00-23)\n- 'H': Hour in day (0-23)\n- 'hh': Hour in AM/PM, padded (01-12)\n- 'h': Hour in AM/PM, (1-12)\n- 'mm': Minute in hour, padded (00-59)\n- 'm': Minute in hour (0-59)\n- 'ss': Second in minute, padded (00-59)\n- 's': Second in minute (0-59)\n- 'sss': Millisecond in second, padded (000-999)\n- 'a': AM/PM marker\n- 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)\n- 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year\n- 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year\n- 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')\n- 'GGGG': The long form of the era string (e.g. 'Anno Domini')\n\nformat string can also be one of the following predefined localizable formats:\n\n- 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)\n\n- 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)\n- 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)\n- 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)\n- 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)\n- 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)\n- 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)\n- 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)\n\n## Licence\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE) file for more info.\n\n--\n\nThe MIT License (MIT)\nCopyright (c) 2016 Cuppa Labs\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n## Credits\nThanks to Font Awesome and Moment.js for the libraries.\n\n## Author\nPradeep Kumar Terli\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuppalabs%2Fangular-cuppa-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuppalabs%2Fangular-cuppa-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuppalabs%2Fangular-cuppa-datepicker/lists"}