{"id":16429665,"url":"https://github.com/cuppalabs/angular2-datetimepicker","last_synced_at":"2025-03-15T11:33:02.040Z","repository":{"id":57179469,"uuid":"110462587","full_name":"CuppaLabs/angular2-datetimepicker","owner":"CuppaLabs","description":"Angular 2 and 4 datetime picker component","archived":false,"fork":false,"pushed_at":"2020-07-21T12:36:07.000Z","size":1686,"stargazers_count":40,"open_issues_count":57,"forks_count":50,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-13T09:53:46.505Z","etag":null,"topics":["angular2","angular2-datepicker","angular4","datetimepicker"],"latest_commit_sha":null,"homepage":"https://cuppalabs.github.io/angular2-datetimepicker","language":"CSS","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":"2017-11-12T19:35:06.000Z","updated_at":"2024-11-04T21:26:27.000Z","dependencies_parsed_at":"2022-09-14T02:32:01.256Z","dependency_job_id":null,"html_url":"https://github.com/CuppaLabs/angular2-datetimepicker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuppaLabs%2Fangular2-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CuppaLabs","download_url":"https://codeload.github.com/CuppaLabs/angular2-datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725015,"owners_count":20337660,"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":["angular2","angular2-datepicker","angular4","datetimepicker"],"created_at":"2024-10-11T08:23:55.727Z","updated_at":"2025-03-15T11:33:01.360Z","avatar_url":"https://github.com/CuppaLabs.png","language":"CSS","readme":"\n# Angular 2 / 4 DateTime Picker\n\n# [Documentation](http://cuppalabs.github.io/components/datepicker) | [Demos / Examples](https://cuppalabs.github.io/angular2-datetimepicker).\n\n### Overview \n\nAngular 2 DateTimepicker is a cool responsive DateTimepicker component for Web and Mobile. It is Mobile friendly and light weight. Developed by [Cuppa Labs](http://www.cuppalabs.com).\n\n### Getting Started\nTo get started with using the multiselect dropdown component, follow the below steps. It’s easy to integrate and just a matter of minutes.\n\n### Installation\n- The datetimepicker package is published on the [npm](https://www.npmjs.com/package/angular2-datetimepicker) Registry. \n-  Install the package with [npm](https://www.npmjs.com): \n\n```js\n\tnpm install angular2-datetimepicker\n```\n\n### Usage\n\nImport `AngularDateTimePickerModule` into your `AppModule`\n\n```js\nimport { AngularDateTimePickerModule } from 'angular2-datetimepicker';\n\n@NgModule({\n  // ...\n  imports: [\n    AngularDateTimePickerModule,\n  ]\n  // ...\n})\n\n```\nDeclare the component data variables and options in your component where you want to consume the dropdown component.\n\n```js \nimport { Component, OnInit } from '@angular/core';\n\nexport class AppComponent implements OnInit {\n    \n\tdate: Date = new Date();\n\tsettings = {\n\t\tbigBanner: true,\n\t\ttimePicker: false,\n\t\tformat: 'dd-MM-yyyy',\n\t\tdefaultOpen: true\n\t}\n\tconstructor(){}\n    ngOnInit(){\n       \n    }\n}\n\n```\n\nAdd the following component tag in the template where your want to place the datepicker\n\n```html\n\n\u003cangular2-date-picker [(ngModel)]=\"date\" [settings]=\"settings\"\u003e\u003c/angular2-date-picker\u003e\n\n```\n\n\n### Settings\n\nFollowing `settings` object properties can be used to configure the component.\n\n|Property\t|Type\t|Default\t|Description\t|\n|:--- |:--- |:--- |:--- |\n|format|String|dd-MMM-yyyy hh:mm a|Date format of the selected date.|\n|bigBanner|Boolean|true| The banner section to show the date details.  |\n|defaultOpen|Boolean|false|To open the datepicker popover on load. Default is set to false.|\n|timePicker|Boolean|false|Enable time picker feature.|\n|closeOnSelect|Boolean|true|to close the popover on date select or on click of done button.|\n\n\n## Callback Methods\n\n- `onDateSelect`\n\nDefine a callback method to be called on select of the date.\n\n```html\n  \n  \u003cangular2-date-picker (onDateSelect)=\"onDateSelect($event)\" \n\t\t\t[(ngModel)]=\"date\" \n\t\t\t[settings]=\"settings\" \u003e\n  \u003c/angular2-date-picker\u003e\n\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## Run locally\n- Clone the repository or downlod the .zip,.tar files.\n- Run `npm install`\n- Run `ng serve` for a dev server\n- Navigate to `http://localhost:4200/`\n\n## License\nMIT License.\n\n## Credits\nThanks to Font Awesome and Moment.js for the libraries.\n\n## Author\nPradeep Kumar Terli","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuppalabs%2Fangular2-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuppalabs%2Fangular2-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuppalabs%2Fangular2-datetimepicker/lists"}