{"id":13728732,"url":"https://github.com/dalelotts/angular-bootstrap-datetimepicker","last_synced_at":"2025-05-14T15:06:55.311Z","repository":{"id":9527423,"uuid":"11427833","full_name":"dalelotts/angular-bootstrap-datetimepicker","owner":"dalelotts","description":"Native Angular date/time picker component styled by Twitter Bootstrap","archived":false,"fork":false,"pushed_at":"2024-04-28T00:15:45.000Z","size":5203,"stargazers_count":1280,"open_issues_count":34,"forks_count":405,"subscribers_count":37,"default_branch":"main","last_synced_at":"2025-04-27T04:34:15.993Z","etag":null,"topics":["anguar5","angular","contractor","datepicker","daterange","datetime","datetime-picker","datetimepicker","moment","picker","timepicker","twitter-bootstrap"],"latest_commit_sha":null,"homepage":"http://dalelotts.github.io/angular-bootstrap-datetimepicker/","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/dalelotts.png","metadata":{"files":{"readme":"README.es_MX.md","changelog":null,"contributing":".github/contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-07-15T16:26:22.000Z","updated_at":"2025-03-05T20:40:22.000Z","dependencies_parsed_at":"2024-02-07T05:44:14.082Z","dependency_job_id":"53a809f5-603b-4f35-aa81-2792723b4b72","html_url":"https://github.com/dalelotts/angular-bootstrap-datetimepicker","commit_stats":{"total_commits":277,"total_committers":24,"mean_commits":"11.541666666666666","dds":"0.10108303249097472","last_synced_commit":"c7183860ec520902cb91f853c410d26a976a1a2c"},"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalelotts%2Fangular-bootstrap-datetimepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalelotts%2Fangular-bootstrap-datetimepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalelotts%2Fangular-bootstrap-datetimepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dalelotts%2Fangular-bootstrap-datetimepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dalelotts","download_url":"https://codeload.github.com/dalelotts/angular-bootstrap-datetimepicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252396045,"owners_count":21741139,"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":["anguar5","angular","contractor","datepicker","daterange","datetime","datetime-picker","datetimepicker","moment","picker","timepicker","twitter-bootstrap"],"created_at":"2024-08-03T02:00:49.160Z","updated_at":"2025-05-14T15:06:55.297Z","avatar_url":"https://github.com/dalelotts.png","language":"TypeScript","readme":"# Selector de fecha y hora con bootstrap para Angular 13+\n\nComponente selector de fecha/hora nativo para Angular (13+) estilizado con Bootstrap 4.\n\n[![npm downloads](https://img.shields.io/npm/dm/angular-bootstrap-datetimepicker.svg)](https://www.npmjs.com/package/angular-bootstrap-datetimepicker)\n[![Build Status](https://travis-ci.org/dalelotts/angular-bootstrap-datetimepicker.png?branch=master)](https://travis-ci.org/dalelotts/angular-bootstrap-datetimepicker)\n[![Coverage Status](https://coveralls.io/repos/github/dalelotts/angular-bootstrap-datetimepicker/badge.svg?branch=master)](https://coveralls.io/github/dalelotts/angular-bootstrap-datetimepicker?branch=master)\n\n[![Join the chat at https://gitter.im/dalelotts/angular-bootstrap-datetimepicker](https://badges.gitter.im/dalelotts/angular-bootstrap-datetimepicker.svg)](https://gitter.im/dalelotts/angular-bootstrap-datetimepicker?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![MIT License][license-image]][license-url]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\n[Documentación](http://dalelotts.github.io/angular-bootstrap-datetimepicker/) (Inglés)\n\n[Página de demo](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo)\n\n[Github](https://github.com/dalelotts/angular-bootstrap-datetimepicker)\n\n_Leer la documentación en otro idioma: [Inglés](https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/README.md)_\n\n## Angular 8.x-12.x?\n\nUse version 4\n\n`npm install angularjs-bootstrap-datetimepicker@4`\n\n## Angular 7.x?\n\nUse version 3\n\n`npm install angularjs-bootstrap-datetimepicker@3`\n\n## Angular 1.x?\n\nVisita [angularjs-bootstrap-datetimepicker](https://github.com/dalelotts/angularjs-bootstrap-datetimepicker)\n\n## Apoya el proyecto\n\nSé que este es un pequeño componente sin embargo mucha gente lo utiliza en producción (estoy completamente agradecido con ello) - si llegas a utilizar este componente por favor dale click al botón de estrella (en la parte superior derecha de la página).\n\n![](./screenshots/stars.png)\n\n## Versiones de Dependencias Mínimas\n\nVersiones de dependencias mínimas:\n\n- AngularJS 8.x ó mayor (1.x no funcionará)\n- moment.js 2.x ó mayor para parseo de fecha y formateo\n- bootstrap 4.x para css/layout\n- open-iconic para los íconos predeterminados (puedes usar cualquier librería de íconos de tu preferencia)\n\njQuery NO es necesario.\n\n## Uso con Angular CLI\n\nSi estas usando [Angular CLI](https://cli.angular.io/) hay unos pequeños y simples pasos para agregar este componente a tu proyecto.\n\nPrimero, instala este módulo y las dependencias mínimas\n\n```shell\nnpm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic\n```\n\nDespués actualiza `./src/app/app.module.ts` para que incluya lo siguiente:\n\n```TypeScript\nimport { AppComponent } from './app.component';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\nimport { NgModule } from '@angular/core';\nimport { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    DlDateTimePickerDateModule,\n  ],\n  providers: [FormsModule],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nPosterior, agrega lo siguiente a `./src/app/app.component.html`\n\n```html\n\u003cdl-date-time-picker startView=\"day\" maxView=\"year\" minView=\"minute\" minuteStep=\"5\" [(ngModel)]=\"selectedDate\"\u003e \u003c/dl-date-time-picker\u003e\n```\n\nA continuación, agrega lo siguiente a `./src/styles.css`\n\n```css\n@import \"~bootstrap/dist/css/bootstrap.min.css\";\n@import \"~open-iconic/font/css/open-iconic-bootstrap.css\";\n```\n\n**Nota:** Este componente utiliza íconos de la libreria `open-iconic` de manera predeterminada, pero puedes utilizar cualquier librería de íconos que soporten estilizado por medio de `clases`.\n\nPor último, ejecuta `npm start` y deberás ver el selector de fecha/tiempo en [http://localhost:4200/](http://localhost:4200/)\n\nDe manera predeterminada, el selector de fecha/tiempo es tan ancho como su contenedor `{ width:100% }`.\nUtiliza las clases `row` y `col` de bootstrap flex para el acomodo del componente en filas y columnas.\nSi el contenedor padre no es lo suficientemente ancho (mayor a 340px) el diseño de la fila y columna que contiene el componente puede que no se muestre de manera atractiva.\nOtros lenguajes/locales es probable que requieran un contenedor un poco mas ancho para poder mostrar apropiadamente el contenido.\n\n## Configuración\n\nUtiliza el [generador de configuración automatizado](https://stackblitz.com/github/dalelotts/angular-bootstrap-datetimepicker-demo) (¡por favor hazme saber si no funciona para tu caso!),\no ve a [https://dalelotts.github.io/angular-bootstrap-datetimepicker/](https://dalelotts.github.io/angular-bootstrap-datetimepicker/)\npara visualizar la documentación generada por automático.\n\n### Primer día de la semana\n\nEl primer día de la semana es determinado por los [ajustes de moment i18n ](https://momentjs.com/docs/#/i18n/).\nPor ejemplo, configurando el lugar a `'fr'` hará que día Lunes sea el primer día de la semana.\n\n### Formato para visualización de año, mes, dia, hora, am/pm y minutos\n\nEl formato para horas y minutos es determinado por los [ajustes de moment i18n](https://momentjs.com/docs/#/i18n/).\n\nLas horas son desplegadas utilizando `ll` como formato.\nLos minutos son desplegados utilizando `lll` como formato.\n\nRecomiendo que utilices los ajustes predeterminados del lugar con Moment (si con incorrectos puedes enviar un PR a momento para corregir los ajustes)\nSi por alguna razón los ajustes predeterminados de Moment no funcionan, puedes [configurar el lugar existente](https://momentjs.com/docs/#/customization/) ó [crear un lugar personalizado](https://momentjs.com/docs/#/i18n/adding-locale/) con los formatos deseados.\n\n## Documentación\n\nPuedes generar la documentación ejecutando `npm run documentation`\nó ver [https://dalelotts.github.io/angular-bootstrap-datetimepicker/](https://dalelotts.github.io/angular-bootstrap-datetimepicker/)\n\n## Accesibilidad\n\nEl componente `DlDateTimePickerComponent` agrega el atributo `aria-label` a la izquierda, derecha y botones 'arriba' adicional a todas las celdas del calendario donde el texto de la celda no pueda describir completamente el valor.\n\n### Accesibilidad por medio del teclado\n\nEl componente `DlDateTimePickerComponent` soporta los siguiente atajos de teclado en todas las vistas:\n\n| Atajo                | Acción                                                |\n| -------------------- | ----------------------------------------------------- |\n| `FLECHA_IZQ`         | Ir a la celda de la izquierda                         |\n| `FLECHA_DER`         | Ir a la celda de la derecha                           |\n| `FLECHA_ARRIBA`      | Ir a la celda superior                                |\n| `FLECHA_ABAJO`       | Ir a la celda inferior                                |\n| `INICIO`             | Ir a la primera celda de la vista                     |\n| `FIN`                | Ir a la última celda de la vista                      |\n| `PAGINA_ARRIBA`      | Ir a la misma celda en el periodo anterior de tiempo  |\n| `PAGINA_ABAJO`       | Ir a la misma celda en el periodo siguiente de tiempo |\n| `ENTRAR` o `ESPACIO` | Seleccionar la celda actual                           |\n\n## Capturas de pantalla\n\n### Vista de año\n\n![Datetimepicker vista de año](./screenshots/year.png)\n\nEsta vista permite al usuario seleccionar el año de la fecha a elegir.\nSi la vista de año es la minView, la fecha se configurará a medianoche del primer día del año.\n\n### Vista de mes\n\n![Datetimepicker vista de mes](./screenshots/month.png)\n\nEsta vista permite al usuario seleccionar el mes del año seleccionado.\nSi el mes es minView, la fecha se configurará a medianoche del primer día del mes.\n\n### Vista de día (Predeterminado)\n\n![Datetimepicker vista de día](./screenshots/day.png)\n\nEsta vista permite al usuario seleccionar el día del mes seleccionado.\nSi el día es minView, la fecha se configurará a medianoche del día seleccionado.\n\n### Vista de hora\n\n![Datetimepicker vista de hora](./screenshots/hour.png)\n\nEsta vista permite al usuario seleccionar la hora del día del día seleccionado.\nSi la hora es igual a minView, la fecha se configurará al inicio de la hora del día seleccionado.\n\n### Visa de minuto\n\n![Datetimepicker vista de minutos](./screenshots/minute.png)\nEsta vista permite al usuario seleccionar una hora específica del dia en la hora seleccionada.\nDe manera predeterminada el tiempo es visualizado en incrementos de 5 minutos, la propiedad \u003ccode\u003eminuteStep\u003c/code\u003e controla los incrementos del tiempo visualizado.\nSi la vista de minutos es la minView, la cual es de manera predefinida, la fecha se configurará al inicio de la hora del día seleccionado.\n\n## Contribuir\n\nVer [Contributing.md](.github/contributing.md)\n\n### Pruebas\n\nEste componente fué realizado utilizando TDD y todas las mejoras y cambios tiene tests.\n\nUtilizamos karma y jshint para así garantizar la calidad del código. La manera mas sencilla de correr estas pruebas es usando gulp de la siguiente manera:\n\n```shell\nnpm install\nnpm test\n```\n\nKarma tratará de abrir Chrome como navegador con el cual se correrán los tests.\nAsegúrate de que chrome esté instalado o cambia la configuración de navegador en karma.config.js\n\n## Licencia\n\nangular-bootstrap-datetimepicker fué liberada con la licencia MIT y copyright 2015 Knight Rider Consulting, Inc.. Lo que anterior implica lo podrás encontrar a continuación.\n\n## Se te pide que:\n\n- Mantengas la licencia y el aviso de copyright incluidos en los archivos CSS y Javascript de angular-bootstrap-datetimepicker cuanto utilices esta librería en tus proyectos.\n\n## Te permite:\n\n- De manera libre descargar y usar angular-bootstrap-datetimepicker de manera completa o sus componentes para propósito personal, privado, de manera interna en una compañía o con fines comerciales.\n- Usar angular-bootstrap-datetimepicker en paquetes o distribuciones creados por ti.\n- Modificar el código fuente.\n- Acceder a una sublicencia para modificar y distribuir angular-bootstrap-datetimepicker a terceros no incluidos en la licencia.\n\n## Te prohibe:\n\n- Responsabilizar a los autores y propietarios de las licencias por daños ya que se proporciona sin garantía angular-bootstrap-datetimepicker.\n- Responsabilizar a los creadores o titulares de derechos de autor de angular-bootstrap-datetimepicker.\n- Redistribuir algún componente de angular-bootstrap-datetimepicker sin la atribución adecuada.\n- Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se puede entender que Knight Rider Consulting, Inc. respalda tu distribución.\n- Utilizar alguna marca o logo propiedad de Knight Rider Consulting, Inc. de alguna manera en la que se pueda entender o deducir que tu creaste este software.\n\n## No requiere el que tu:\n\n- Incluyas el código fuente angular-bootstrap-datetimepicker o el de alguna modificación que tú le hayas hecho al código original, o en cualquier redistribución.\n- Envíes los cambios que hiciste a angular-bootstrap-datetimepicker al proyecto angular-bootstrap-datetimepicker (sin embargo, sugerencias o cambios son bienvenidos).\n\nLa licencia completa de angular-bootstrap-datetimepicker se encuentra [en el repositorio del proyecto](LICENSE) para más información.\n\n[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat\n[license-url]: LICENSE\n","funding_links":[],"categories":["Table of contents","UI Components"],"sub_categories":["Third Party Components","Form"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalelotts%2Fangular-bootstrap-datetimepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdalelotts%2Fangular-bootstrap-datetimepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdalelotts%2Fangular-bootstrap-datetimepicker/lists"}