{"id":13535500,"url":"https://github.com/ng2-ui/datetime-picker","last_synced_at":"2025-04-02T01:31:00.347Z","repository":{"id":57130721,"uuid":"54795899","full_name":"ng2-ui/datetime-picker","owner":"ng2-ui","description":"Angular2 DateTime Picker","archived":true,"fork":false,"pushed_at":"2023-08-18T10:29:58.000Z","size":7783,"stargazers_count":121,"open_issues_count":37,"forks_count":61,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-15T03:30:58.302Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ng2-ui.github.io/#/datetime-picker","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/ng2-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-03-26T19:31:39.000Z","updated_at":"2023-05-05T16:57:05.000Z","dependencies_parsed_at":"2024-01-16T15:49:45.616Z","dependency_job_id":null,"html_url":"https://github.com/ng2-ui/datetime-picker","commit_stats":{"total_commits":272,"total_committers":27,"mean_commits":"10.074074074074074","dds":"0.23529411764705888","last_synced_commit":"ebc4d5a6b44e2d53aeb7aaff4a1be848329e6241"},"previous_names":["ng2-ui/ng2-datetime-picker"],"tags_count":60,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fdatetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fdatetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fdatetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ng2-ui%2Fdatetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ng2-ui","download_url":"https://codeload.github.com/ng2-ui/datetime-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738498,"owners_count":20825789,"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-08-01T08:00:57.414Z","updated_at":"2025-04-02T01:30:59.590Z","avatar_url":"https://github.com/ng2-ui.png","language":"TypeScript","readme":"# Angular(2+) Datetime Picker\n\n\n\n\n[![Build Status](https://travis-ci.org/ng2-ui/datetime-picker.svg?branch=master)](https://travis-ci.org/ng2-ui/datetime-picker)\n[![Join the chat at https://gitter.im/ng2-ui/datetime-picker](https://badges.gitter.im/ng2-ui/datetime-picker.svg)](https://gitter.im/ng2-ui/datetime-picker?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\nAngularJS 2 DateTime Picker\n\n## NOTE: NOT-MAINTAINED :(\nThis project has been archived because of inactivity of the owner, Allen Kim. The current owner is looking for a new owner and ready to transfer ownership. Please send me the email to \"allenhwkim AT gmail.com\" to claim the ownership.\n\n\u003ca href=\"https://rawgit.com/ng2-ui/datetime-picker/master/app/index.html\"\u003e\n  \u003cimg src=\"http://i.imgur.com/g5qbBBz.png\" width=\"50%\" style=\"border:1px solid grey\" /\u003e\n\u003c/a\u003e\n\n[Plunker Example](https://plnkr.co/edit/su2aiL)  \n[French Example](https://plnkr.co/edit/J6hXyB?p=preview)\n\n\n## How Does It Work\n\n1. Get a Date or string from input field.\n2. If input value is string, convert it to Date object and save it internally.\n3. When the input field is clicked, show date time picker with date value.\n4. When date time is selected, set `toString` function of selected date for formatting.\n5. Set input field with the selected value.\n\n## Install\n\n1. install datetime-picker\n\n        $ npm install @ngui/datetime-picker --save\n\n2. If you are using SystemJS, add `map` and `packages` to your `systemjs.config.js`\n\n        map[‘@ngui/datetime-picker'] = 'node_modules/@ngui/datetime-picker/dist';\n        packages[‘@ngui/datetime-picker'] = { main: '@ngui/datetime-picker.umd.js', defaultExtension: 'js’ }\n\n3. import NguiDatetimePickerModule to your AppModule\n\n        import { NgModule } from '@angular/core';\n        import { FormsModule } from \"@angular/forms\";\n        import { BrowserModule  } from '@angular/platform-browser';\n        import { AppComponent } from './app.component';\n        import { NguiDatetimePickerModule } from '@ngui/datetime-picker';\n\n        @NgModule({\n          imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],\n          declarations: [AppComponent],\n          bootstrap: [ AppComponent ]\n        })\n        export class AppModule { }\n\n## Use it in your code\n\n\n       \u003cinput\n          [(ngModel)]=\"myDate\"\n          ngui-datetime-picker\n          date-only=\"true\" /\u003e\n\n       \u003cform [formGroup]=\"myForm\"\u003e\n         \u003cinput\n           required\n           [(ngModel)]='myVar'\n           formControlName=\"date\"\n           ngui-datetime-picker\n            date-only=\"true\"/\u003e\n       \u003c/form\u003e\n\n       \u003cinput\n          [(ngModel)]=\"date2\" ngui-datetime-picker\n          date-format=\"DD-MM-YYYY hh:mm\"\n          year=\"2014\"\n          month=\"12\"\n          day=\"31\"\n          hour=\"23\"\n          minute='59'\n          [close-on-select]=\"false\"  /\u003e\n\nFor full example, please check `test` directory to see the example of;\n\n  - `app.module.ts`\n  -  and `app.component.ts`.\n\n## Override default style\n\nThe default style is written in `src/ngui-datetime-picker.component.ts`.\nThis can be overwritten by giving a more detailed css selector.\n\ne.g.,\n\n    #my-div .ngui-datetime-picker {\n      background-color: blue;\n    }\n\n## Override built-in date parser and date formatter\n\nThe default date parser and formatter can only handle 'YYYY-MM-DD HH:MM' format\nif you are not using [momentjs](http://momentjs.com/). If you use momentjs, you\ncan use momentjs dateformat by adding the following in your html.\n\n    \u003cscript src=\"moment-with-locales.min.js\"\u003e\u003c/script\u003e\n\nIf you are using moment and want to pass in a string date value in one format but display it in a different format\nyou can use both date-format and parse-format:\n\n    \u003cinput\n          [(ngModel)]=\"date\"\n          ngui-datetime-picker\n          date-format=\"MM/DD/YYYY HH:mm\"\n          parse-format=\"YYYY-MM-DD HH:mm:ss\" /\u003e\n\nIf you want to have your own date format without using momentjs,\nplease override `NguiDateTime.parser` and `NguiDateTime.formatDate` function.\nFor example,\n\n    import { NguiDatetimePickerModule, NguiDatetime } from '@ngui/datetime-picker';\n\n    // Override Date object formatter\n    NguiDatetime.formatDate = (date: Date) : string =\u003e {\n        ..... my own function that returns a string ....\n    };\n\n    // Override Date object parser\n    NguiDatetime.parseDate = (str: any): Date =\u003e {\n        .... my own function that returns a date ...\n    } ;\n\n    @NgModule({\n      imports: [BrowserModule, FormsModule, NguiDatetimePickerModule],\n      declarations: [AppComponent],\n      bootstrap: [ AppComponent ]\n    })\n    export class AppModule { }\n\nIn addition, you can override other static variables of `NguiDatetime` class. The following\nis the list of variables that you can override.\n\n  * **days**:            default: 1,2,....31           \n  * **daysOfWeek**:      default: Sunday, Monday, .....\n  * **weekends**:        default: 0,6\n  * **firstDayOfWeek**:  default: 0 as in Sunday\n  * **months**:          default: January, February\n  * **formatDate**:      default: returns YYYY-MM-DD HH:MM\n  * **parseDate**:       default: returns date from YYYY-MM-DD HH:MM\n  * **locale**:          default: 'date', 'year', 'month', time', 'hour', 'minute'\n\n## **ng2-ui** welcomes new members and contributors\n\nThis module is only improved and maintained by contributors like you;\n\nAs a contributor, it's NOT required to be skilled in Javascript nor Angular2.\nIt’s required to be open-minded and interested in helping others.\nYou can contribute to the following;\n\n  * Updating README.md\n  * Making more and clearer comments\n  * Answering issues and building FAQ\n  * Documentation\n  * Translation\n\nIn result of your active contribution, you will be listed as a core contributor\non https://ng2-ui.github.io, and a member of ng2-ui too.\n\nIf you are interested in becoming a contributor and/or a member of ng-ui,\nplease send me email to `allenhwkim AT gmail.com` with your github id.\n\n## Attributes\n  All options are optional except value\n\n  * **date-only**,  true or false, default is false\n  * **time-only**, true or false, default is false\n  * **close-on-select**, true or false. indicates to close ngui-datetime-picker when select a date. default: true\n  * **date-format**,  momentjs date format, e.g. YYYY-MM-DD hh:mm:ss.\n    You need to include `moment` js in your html to use date-format.\n    `\u003cscript src=\"moment.min.js\"\u003e\u003c/script\u003e`\n  * **parse-format**,  momentjs date format used to parse a string input value, e.g. YYYY-MM-DD hh:mm:ss.\n    You need to include `moment` js in your html to use parse-format.\n    `\u003cscript src=\"moment.min.js\"\u003e\u003c/script\u003e`\n  * **default-value** a date selected when a popup opens, default the current date\n  * **minute-step** the interval of minutes, default 1\n  * **min-date** Date, mininum selectable date\n  * **max-date** Date, maximum selectable date\n  * **min-hour** number, mininum selectable hour\n  * **max-hour** number, maximum selectable hour\n  * **disabled-dates**  Array of Date, dates not selectable\n  * **show-week-numbers**  trueor false, default false. Show week numbers\n\n## Outputs of directive\n\n  * **ngModelChange**, triggered when the input value as changed (contains new input value)\n  * **valueChanged**, triggered when a date modification is done (contains new date value)\n  * **popupClosed**, triggered when the component is closed (contains a boolean true)\n\n## Outputs of component\n\n  * **selected$**, triggered when a date modification is done (contains new date value)\n  * **closing$**, triggered when the component is closed (contains a boolean true)\n\n## For Developers\n\n### To start\n\n    $ git clone https://github.com/ng2-ui/datetime-picker.git\n    $ cd datetime-picker\n    $ npm install\n    $ npm start\n\n### List of available npm tasks\n\n  * `npm run` : List all available tasks\n  * `npm start`: Run `app` directory for development using `webpack-dev-server` with port 9001\n  * `npm run clean`: Remove dist folder\n  * `npm run clean:dist`: Clean up unnecessary dist folder within dist and app directory\n  * `npm run lint`: Lint TypeScript code\n  * `npm run build:ngc`: build ES module\n  * `npm run build:umd`: Build UMD module `ng2-map.umd.js`\n  * `npm run build:app`: Build `app/build/app.js` for runnable examples\n  * `npm run build`: Build all(build:ngc, build:umc, build:app, and clean:dist)\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng2-ui%2Fdatetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fng2-ui%2Fdatetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fng2-ui%2Fdatetime-picker/lists"}