{"id":21827493,"url":"https://github.com/laixiangran/e-ngx-datetimepicker","last_synced_at":"2026-05-07T00:31:04.945Z","repository":{"id":57218009,"uuid":"90456215","full_name":"laixiangran/e-ngx-datetimepicker","owner":"laixiangran","description":"基于Angular的日期组件，依赖的第三方插件：bootstrap-datetimepicker","archived":false,"fork":false,"pushed_at":"2018-11-15T01:44:08.000Z","size":7588,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T11:48:04.041Z","etag":null,"topics":["angular","bootstrap-datetimepicker","datetimepicker"],"latest_commit_sha":null,"homepage":"","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/laixiangran.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-05-06T10:44:33.000Z","updated_at":"2018-04-24T05:14:26.000Z","dependencies_parsed_at":"2022-09-01T21:50:56.089Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-datetimepicker","commit_stats":null,"previous_names":["laixiangran/essence-ng2-datetimepicker"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-datetimepicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244796251,"owners_count":20511669,"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","bootstrap-datetimepicker","datetimepicker"],"created_at":"2024-11-27T18:13:19.284Z","updated_at":"2025-10-05T20:25:10.060Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-datetimepicker\n\n基于Angular的日期组件。\n\n依赖的第三方插件：[bootstrap-datetimepicker](http://eonasdan.github.io/bootstrap-datetimepicker/)\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-datetimepicker@latest\n\t```\n\t\n2. Set in the .angular-cli.json（@angular/cli）\n\n\t```json\n    \"styles\": [\n        \"../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n        \"../node_modules/e-ngx-datetimepicker/dist/assets/css/bootstrap-datetimepicker.min.css\"\n    ],\n    \"scripts\": [\n        \"../node_modules/jquery/dist/jquery.min.js\",\n        \"../node_modules/moment/min/moment.min.js\",\n        \"../node_modules/moment/min/moment-with-locales.min.js\",\n        \"../node_modules/e-ngx-datetimepicker/dist/assets/js/bootstrap-datetimepicker.min.js\",\n        \"../node_modules/bootstrap/dist/js/bootstrap.min.js\"\n    ]\n\t```\n\n3. Add the ENgxDatetimepickerModule\n\n\t```typescript\n\timport {ENgxDatetimepickerModule} from \"e-ngx-datetimepicker\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxDatetimepickerModule\n\t    ]\n\t})\n\t```\n\n4. Use in Template\n\n\t**父元素必须设置position: relative**\n\n\t```html\n\t\u003cform class=\"form-group\" #form=\"ngForm\"\u003e\n\t\t\u003cdiv class=\"form-group\" style=\"position: relative;\"\u003e\n\t\t\t\u003clabel\u003e\n\t\t\t\t选择日期：\n\t\t\t\t\u003cinput type=\"text\" class=\"form-control\"\n\t\t\t\t\t   eNgxDTPicker\n\t\t\t\t\t   #eNgxDTPicker=\"eNgxDTPicker\"\n\t\t\t\t\t   name=\"time\"\n\t\t\t\t\t   [(ngModel)]=\"datetime\"\n\t\t\t\t\t   [options]=\"options\"\n\t\t\t\t\t   required\n\t\t\t\t\t   readonly\n\t\t\t\t\t   (ready)=\"onReady($event)\"\n\t\t\t\t\t   (changeDate)=\"onChangeDate($event)\"\u003e\n\t\t\t\u003c/label\u003e\n\t\t\u003c/div\u003e\n\t\u003c/form\u003e\n\t\u003cbutton class=\"btn btn-primary\" (click)=\"eNgDTPicker.getFn('minDate')('2017-05-01')\"\u003e设置最小时间（模板调用）\u003c/button\u003e\n    \u003cbutton class=\"btn btn-primary\" (click)=\"setMinDate()\"\u003e设置最小时间（组件类调用）\u003c/button\u003e\n    \u003cbutton class=\"btn btn-danger\" (click)=\"clearDate()\"\u003e清空数据\u003c/button\u003e\n\t```\n\n5. Use in Component\n\n\t```typescript\n\tdatetimepicker: ENgxDatetimepickerDirective;\n    datetime: any;\n    options: any = {\n        format: 'YYYY-MM-DD hh:mm:ss'\n    };\n\n    constructor() {}\n\n    onReady($event: ENgxDatetimepickerDirective) {\n        this.datetimepicker = $event;\n    }\n\n    onChangeDate($event: any) {\n        // console.log($event);\n    }\n\n    setMinDate() {\n        this.datetimepicker.getFn('minDate')('2017-05-01');\n    }\n\n    clearDate() {\n        this.datetime = null;\n    }\n\t```\n\n## API\n\n### exportAs\n\n- `eNgxDTPicker` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxDTPicker=\"eNgxDTPicker\"`）。\n\n### Inputs\n\n- `options`（`Object`） - 与[bootstrap-datetimepicker的配置属性](http://eonasdan.github.io/bootstrap-datetimepicker/Options/)一致\n\n### Outputs\n\n- `ready` - `return ($event)`; datetimepicker初始化完成的事件，$event为当前ENgxDatetimepickerDirective实例\n\n- `changeDate` - `return ($event)`; 时间改变触发的事件，$event为改变之后的时间（由于这个事件触发的频率低，建议使用这个事件来获取改变之后的时间）\n\n- `updateDate` - `return ($event)`; 时间视图（比如年视图切换到月视图）改变触发的事件，$event为改变之后的时间\n\n### Instance Method\n\n- `getFn(fnName: string): Function` - 根据函数名称获取bootstrap-datetimepicker函数\n\n- `show(): void` - 显示日期控件\n\n- `hide(): void` - 隐藏日期控件\n\n- `destroy(): void` - 销毁日期控件\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\t\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-datetimepicker/lists"}